自己动手搞一个拖动滑块，点击水波纹效果
来源：互联网 发布：数据真实性 英文 编辑：程序博客网 时间：2024/05/17 07:02
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script type="text/javascript" src=""></script> <style type="text/css"> input[type="range"] { width: 80%; background-color: red; border-radius: 15px; -webkit-appearance: none; height: 1px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: green; border-radius: 50%; height: 30px; width: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); border: none; position: relative; z-index: 10; } </style> <script type="text/javascript"> $(function() { $(".input_1").change(function() { $("p.p1").text($(this).val()); }) setInterval(function() { $("p.p2").text($(".input_2").val()); }, 0.01) }) </script> </head> <body> <p>添加change事件</p> <input type="range" class="input_1" step="0.01" min="0" max="5" value="0"> <p class="p1">0</p> <p>添加定时器</p> <input type="range" class="input_2" step="0.01" min="0" max="5" value="0"> <p class="p2">0</p> </body></html><!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 300px;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -5px;left: 0;width: 15px;height: 15px;background: green;cursor: pointer}.lineDiv .minDiv .vals {position: absolute;font-size: 20px;top: -45px;left: -10px;width: 35px;height: 35px;line-height: 35px;text-align: center;background: blue;}.lineDiv .minDiv .vals:after {content: "";width: 0px;height: 0px;border-top: 6px solid blue;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid transparent;display: block;margin-left: 11px;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="minDiv" class="minDiv"><div id="vals" class="vals">0</div></div></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var msg = document.getElementById("msg");var vals = document.getElementById("vals");var ifBool = false; //判断鼠标是否按下//鼠标按下方块minDiv.addEventListener("touchstart", function(e) {e.stopPropagation();ifBool = true;console.log("鼠标按下")});//拖动window.addEventListener("touchmove", function(e) {console.log("鼠标拖动")if(ifBool) {var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var xvar lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= lineDiv.offsetWidth - 15) {minDiv_left = lineDiv.offsetWidth - 15;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值minDiv.style.left = minDiv_left + "px";msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);}});//鼠标松开window.addEventListener("touchend", function(e) {console.log("鼠标弹起")ifBool = false;});//获取元素的绝对位置function getPosition(node) {var left = node.offsetLeft; //获取元素相对于其父元素的left值var leftvar top = node.offsetTop;current = node.offsetParent; // 取得元素的offsetParent // 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"left": left,"top": top};}}</script></body></html>兼容PC端和移动端
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 300px;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -5px;left: 0;width: 15px;height: 15px;background: green;cursor: pointer}.lineDiv .minDiv .vals {position: absolute;font-size: 20px;top: -45px;left: -10px;width: 35px;height: 35px;line-height: 35px;text-align: center;background: blue;}.lineDiv .minDiv .vals:after {content: "";width: 0px;height: 0px;border-top: 6px solid blue;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid transparent;display: block;margin-left: 11px;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="minDiv" class="minDiv"><div id="vals" class="vals">0</div></div></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var msg = document.getElementById("msg");var vals = document.getElementById("vals");var ifBool = false; //判断鼠标是否按下//事件var start = function(e) {e.stopPropagation();ifBool = true;console.log("鼠标按下")}var move = function(e) {console.log("鼠标拖动")if(ifBool) {if(!e.touches) { //兼容移动端var x = e.clientX;} else { //兼容PC端var x = e.touches[0].pageX;}//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var xvar lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= lineDiv.offsetWidth - 15) {minDiv_left = lineDiv.offsetWidth - 15;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值minDiv.style.left = minDiv_left + "px";msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);}}var end = function(e) {console.log("鼠标弹起")ifBool = false;}//鼠标按下方块minDiv.addEventListener("touchstart", start);minDiv.addEventListener("mousedown", start);//拖动window.addEventListener("touchmove", move);window.addEventListener("mousemove", move);//鼠标松开window.addEventListener("touchend", end);window.addEventListener("mouseup", end);//获取元素的绝对位置function getPosition(node) {var left = node.offsetLeft; //获取元素相对于其父元素的left值var leftvar top = node.offsetTop;current = node.offsetParent; // 取得元素的offsetParent // 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"left": left,"top": top};}}</script></body></html>设置滑块的滑动范围
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 95%;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -15px;left: 0;width: 35px;height: 35px;background: green;cursor: pointer;transition: all 0s;}.lineDiv .vals {z-index: 100;position: absolute;top: 0px;left: 0px;width: 0px;height: 5px;background: blue;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="vals" class="vals"></div><!-- --><div id="minDiv" class="minDiv"></div><!-- --></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var minVals = document.getElementById('vals'); //左长线var msg = document.getElementById("msg"); //最上面的信息var ifBool = false; //判断滑块是否按下var lineDiv_W = getPosition(lineDiv).width; //长线的长度var lineDiv_L = getPosition(lineDiv).left; //长线距离html的leftvar minDiv_W = getPosition(minDiv).width; //滑块的长度var minDiv_L = getPosition(minDiv).left; //滑块距离html的leftvar Slider_W_MAX = lineDiv_W - minDiv_W; //滑块可以滑动的最大值px，范围是0~Slider_W_MAXvar minNum = 0; //最小值var maxNum = 500; //最大值var startNum = 100; //起始值var endNum = 400; //结束值var min_Px = Slider_W_MAX / maxNum * startNum; //滑块可以滑动的最小pxvar max_Px = Slider_W_MAX / maxNum * endNum; //滑块可以滑动的最大pxvar minDiv_left=0; //当前滑块的位置/* Slider_W_MAX 1元对应的px？ 1 maxNum 1 1px对应的金额？*/function initSlider(initPX) { //设置滑块的初始位置console.log(initPX);minDiv_left=initPX; //设置滑块的位置minDiv.style.left = initPX + "px";minVals.style.width = initPX + "px";msg.innerText = parseInt(initPX / Slider_W_MAX * 100);}(function() { //初始化滑块位置if(startNum >= 0) { //求出startNum对应的pxinitSlider(Slider_W_MAX / maxNum * startNum)}})()//事件var start = function(e) {ifBool = true;//console.log("鼠标按下")}var move = function(e) {//console.log("鼠标拖动")if(ifBool) {var x; //记录滑块距离html的距离leftif(!e.touches) { //兼容PC端x = e.clientX;} else { //兼容移动端x = e.touches[0].pageX;}minDiv_left = x - lineDiv_L; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= Slider_W_MAX) {minDiv_left = Slider_W_MAX;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值initSlider(minDiv_left)}}var end = function(e) {if(minDiv_left>max_Px){initSlider(max_Px);}if(minDiv_left<min_Px){initSlider(min_Px);}ifBool = false;}//鼠标按下方块minDiv.addEventListener("touchstart", start);minDiv.addEventListener("mousedown", start);//拖动window.addEventListener("touchmove", move);window.addEventListener("mousemove", move);//鼠标松开window.addEventListener("touchend", end);window.addEventListener("mouseup", end);//获取元素的绝对位置function getPosition(node) {var width = node.offsetWidth; //元素宽度var height = node.offsetHeight; //元素高度var left = node.offsetLeft; //获取元素相对于其根元素的left值var leftvar top = node.offsetTop; //获取元素相对于其根元素的top值var topcurrent = node.offsetParent; // 取得元素的offsetParent// 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"width": width,"height": height,"left": left,"top": top};}}</script></body></html><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JS</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><script type="text/javascript" src=""></script><style type="text/css" media="screen">ul {font-size: 0;position: relative;padding: 0;width: 480px;margin: 40px auto;user-select: none;}li {display: inline-block;width: 160px;height: 60px;background: #E95546;font-size: 16px;text-align: center;line-height: 60px;color: white;text-transform: uppercase;position: relative;overflow: hidden;cursor: pointer;}.slider {display: block;position: absolute;bottom: 0;left: 0;height: 4px;background: #1685D3;transition: all 0.5s;}.ripple {width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.4);-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);position: absolute;opacity: 1;}.rippleEffect {-webkit-animation: rippleDrop .4s linear;animation: rippleDrop .4s linear;}@-webkit-keyframes rippleDrop {100% {-webkit-transform: scale(2);transform: scale(2);opacity: 0;}}@keyframes rippleDrop {100% {-webkit-transform: scale(2);transform: scale(2);opacity: 0;}}</style></head><body><ul><li>项目一</li><li>项目二</li><li>项目三</li><li class="slider"></li></ul></body><script>$("ul li").click(function(e) {if($(this).hasClass('slider')) {return;}var whatTab = $(this).index();var howFar = 160 * whatTab;$(".slider").css({left: howFar + "px"});$(".ripple").remove();var posX = $(this).offset().left,posY = $(this).offset().top,buttonWidth = $(this).width(),buttonHeight = $(this).height();console.log(posX, posY, buttonWidth, buttonHeight)$(this).append("<span class='ripple'></span>");if(buttonWidth >= buttonHeight) {buttonHeight = buttonWidth;} else {buttonWidth = buttonHeight;}var x = e.pageX - posX - buttonWidth / 2;var y = e.pageY - posY - buttonHeight / 2;$(".ripple").css({width: buttonWidth,height: buttonHeight,top: y + 'px',left: x + 'px'}).addClass("rippleEffect");});</script></html><!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script type="text/javascript" src=""></script> <style type="text/css"> input[type="range"] { width: 80%; background-color: red; border-radius: 15px; -webkit-appearance: none; height: 1px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: green; border-radius: 50%; height: 30px; width: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); border: none; position: relative; z-index: 10; } </style> <script type="text/javascript"> $(function() { $(".input_1").change(function() { $("p.p1").text($(this).val()); }) setInterval(function() { $("p.p2").text($(".input_2").val()); }, 0.01) }) </script> </head> <body> <p>添加change事件</p> <input type="range" class="input_1" step="0.01" min="0" max="5" value="0"> <p class="p1">0</p> <p>添加定时器</p> <input type="range" class="input_2" step="0.01" min="0" max="5" value="0"> <p class="p2">0</p> </body></html><!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 300px;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -5px;left: 0;width: 15px;height: 15px;background: green;cursor: pointer}.lineDiv .minDiv .vals {position: absolute;font-size: 20px;top: -45px;left: -10px;width: 35px;height: 35px;line-height: 35px;text-align: center;background: blue;}.lineDiv .minDiv .vals:after {content: "";width: 0px;height: 0px;border-top: 6px solid blue;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid transparent;display: block;margin-left: 11px;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="minDiv" class="minDiv"><div id="vals" class="vals">0</div></div></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var msg = document.getElementById("msg");var vals = document.getElementById("vals");var ifBool = false; //判断鼠标是否按下//鼠标按下方块minDiv.addEventListener("touchstart", function(e) {e.stopPropagation();ifBool = true;console.log("鼠标按下")});//拖动window.addEventListener("touchmove", function(e) {console.log("鼠标拖动")if(ifBool) {var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var xvar lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= lineDiv.offsetWidth - 15) {minDiv_left = lineDiv.offsetWidth - 15;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值minDiv.style.left = minDiv_left + "px";msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);}});//鼠标松开window.addEventListener("touchend", function(e) {console.log("鼠标弹起")ifBool = false;});//获取元素的绝对位置function getPosition(node) {var left = node.offsetLeft; //获取元素相对于其父元素的left值var leftvar top = node.offsetTop;current = node.offsetParent; // 取得元素的offsetParent // 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"left": left,"top": top};}}</script></body></html>兼容PC端和移动端
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 300px;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -5px;left: 0;width: 15px;height: 15px;background: green;cursor: pointer}.lineDiv .minDiv .vals {position: absolute;font-size: 20px;top: -45px;left: -10px;width: 35px;height: 35px;line-height: 35px;text-align: center;background: blue;}.lineDiv .minDiv .vals:after {content: "";width: 0px;height: 0px;border-top: 6px solid blue;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid transparent;display: block;margin-left: 11px;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="minDiv" class="minDiv"><div id="vals" class="vals">0</div></div></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var msg = document.getElementById("msg");var vals = document.getElementById("vals");var ifBool = false; //判断鼠标是否按下//事件var start = function(e) {e.stopPropagation();ifBool = true;console.log("鼠标按下")}var move = function(e) {console.log("鼠标拖动")if(ifBool) {if(!e.touches) { //兼容移动端var x = e.clientX;} else { //兼容PC端var x = e.touches[0].pageX;}//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var xvar lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= lineDiv.offsetWidth - 15) {minDiv_left = lineDiv.offsetWidth - 15;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值minDiv.style.left = minDiv_left + "px";msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);}}var end = function(e) {console.log("鼠标弹起")ifBool = false;}//鼠标按下方块minDiv.addEventListener("touchstart", start);minDiv.addEventListener("mousedown", start);//拖动window.addEventListener("touchmove", move);window.addEventListener("mousemove", move);//鼠标松开window.addEventListener("touchend", end);window.addEventListener("mouseup", end);//获取元素的绝对位置function getPosition(node) {var left = node.offsetLeft; //获取元素相对于其父元素的left值var leftvar top = node.offsetTop;current = node.offsetParent; // 取得元素的offsetParent // 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"left": left,"top": top};}}</script></body></html>设置滑块的滑动范围
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>鼠标拖动小方块</title><style type="text/css">.lineDiv {position: relative;height: 5px;background: red;width: 95%;margin: 50px auto;}.lineDiv .minDiv {position: absolute;top: -15px;left: 0;width: 35px;height: 35px;background: green;cursor: pointer;transition: all 0s;}.lineDiv .vals {z-index: 100;position: absolute;top: 0px;left: 0px;width: 0px;height: 5px;background: blue;}</style></head><body><center><h3>用鼠标拖动小方块<span id="msg">0</span>%</h3></center><div id="lineDiv" class="lineDiv"><div id="vals" class="vals"></div><!-- --><div id="minDiv" class="minDiv"></div><!-- --></div><script>window.onload = function() {var lineDiv = document.getElementById('lineDiv'); //长线条var minDiv = document.getElementById('minDiv'); //小方块var minVals = document.getElementById('vals'); //左长线var msg = document.getElementById("msg"); //最上面的信息var ifBool = false; //判断滑块是否按下var lineDiv_W = getPosition(lineDiv).width; //长线的长度var lineDiv_L = getPosition(lineDiv).left; //长线距离html的leftvar minDiv_W = getPosition(minDiv).width; //滑块的长度var minDiv_L = getPosition(minDiv).left; //滑块距离html的leftvar Slider_W_MAX = lineDiv_W - minDiv_W; //滑块可以滑动的最大值px，范围是0~Slider_W_MAXvar minNum = 0; //最小值var maxNum = 500; //最大值var startNum = 100; //起始值var endNum = 400; //结束值var min_Px = Slider_W_MAX / maxNum * startNum; //滑块可以滑动的最小pxvar max_Px = Slider_W_MAX / maxNum * endNum; //滑块可以滑动的最大pxvar minDiv_left=0; //当前滑块的位置/* Slider_W_MAX 1元对应的px？ 1 maxNum 1 1px对应的金额？*/function initSlider(initPX) { //设置滑块的初始位置console.log(initPX);minDiv_left=initPX; //设置滑块的位置minDiv.style.left = initPX + "px";minVals.style.width = initPX + "px";msg.innerText = parseInt(initPX / Slider_W_MAX * 100);}(function() { //初始化滑块位置if(startNum >= 0) { //求出startNum对应的pxinitSlider(Slider_W_MAX / maxNum * startNum)}})()//事件var start = function(e) {ifBool = true;//console.log("鼠标按下")}var move = function(e) {//console.log("鼠标拖动")if(ifBool) {var x; //记录滑块距离html的距离leftif(!e.touches) { //兼容PC端x = e.clientX;} else { //兼容移动端x = e.touches[0].pageX;}minDiv_left = x - lineDiv_L; //小方块相对于父元素（长线条）的left值 if(minDiv_left >= Slider_W_MAX) {minDiv_left = Slider_W_MAX;}if(minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值initSlider(minDiv_left)}}var end = function(e) {if(minDiv_left>max_Px){initSlider(max_Px);}if(minDiv_left<min_Px){initSlider(min_Px);}ifBool = false;}//鼠标按下方块minDiv.addEventListener("touchstart", start);minDiv.addEventListener("mousedown", start);//拖动window.addEventListener("touchmove", move);window.addEventListener("mousemove", move);//鼠标松开window.addEventListener("touchend", end);window.addEventListener("mouseup", end);//获取元素的绝对位置function getPosition(node) {var width = node.offsetWidth; //元素宽度var height = node.offsetHeight; //元素高度var left = node.offsetLeft; //获取元素相对于其根元素的left值var leftvar top = node.offsetTop; //获取元素相对于其根元素的top值var topcurrent = node.offsetParent; // 取得元素的offsetParent// 一直循环直到根元素 while(current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; }return {"width": width,"height": height,"left": left,"top": top};}}</script></body></html><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JS</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><script type="text/javascript" src=""></script><style type="text/css" media="screen">ul {font-size: 0;position: relative;padding: 0;width: 480px;margin: 40px auto;user-select: none;}li {display: inline-block;width: 160px;height: 60px;background: #E95546;font-size: 16px;text-align: center;line-height: 60px;color: white;text-transform: uppercase;position: relative;overflow: hidden;cursor: pointer;}.slider {display: block;position: absolute;bottom: 0;left: 0;height: 4px;background: #1685D3;transition: all 0.5s;}.ripple {width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.4);-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);position: absolute;opacity: 1;}.rippleEffect {-webkit-animation: rippleDrop .4s linear;animation: rippleDrop .4s linear;}@-webkit-keyframes rippleDrop {100% {-webkit-transform: scale(2);transform: scale(2);opacity: 0;}}@keyframes rippleDrop {100% {-webkit-transform: scale(2);transform: scale(2);opacity: 0;}}</style></head><body><ul><li>项目一</li><li>项目二</li><li>项目三</li><li class="slider"></li></ul></body><script>$("ul li").click(function(e) {if($(this).hasClass('slider')) {return;}var whatTab = $(this).index();var howFar = 160 * whatTab;$(".slider").css({left: howFar + "px"});$(".ripple").remove();var posX = $(this).offset().left,posY = $(this).offset().top,buttonWidth = $(this).width(),buttonHeight = $(this).height();console.log(posX, posY, buttonWidth, buttonHeight)$(this).append("<span class='ripple'></span>");if(buttonWidth >= buttonHeight) {buttonHeight = buttonWidth;} else {buttonWidth = buttonHeight;}var x = e.pageX - posX - buttonWidth / 2;var y = e.pageY - posY - buttonHeight / 2;$(".ripple").css({width: buttonWidth,height: buttonHeight,top: y + 'px',left: x + 'px'}).addClass("rippleEffect");});</script></html>阅读全文
0 0
- 自己动手搞一个拖动滑块，点击水波纹效果
- 点击水波纹效果
- 按钮点击水波纹效果
- Android riple material 点击水波纹效果
- android5.0按钮点击水波纹效果
- Android View 点击水波纹效果
- CardView 设置点击水波纹效果
- android如何实现按钮的点击水波纹效果:
- Android中5.0实现点击水波纹效果
- Android 实现所有View的点击水波纹效果
- Android 点击水波纹扩散效果( Ripple Effect )
- Android 笔记 imagebutton 点击水波纹背景效果
- 仿android原生按钮点击水波纹效果
- RecyclerView 实现item点击水波纹动画
- Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单
- Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单
- 自己动手写拖动滑块
- Android 中Layout实现点击水波纹特效
- ASP动态网站建设之连接数据库相关操作
- 条件随机场（CRF）
- AndroidStudio一步步教你修改项目包名（最详细，最易懂）
- [noip2014]飞扬的小鸟 题解
- 编辑crontab添加Linux计划任务
- 自己动手搞一个拖动滑块，点击水波纹效果
- Linux简介
- plsql存储过程和java
- 【1127】假身份证
- Spark开发-Standalone模式
- SpringCloud第六篇-Zuul
- C++数组的使用
- java 基础的数组 添加
- 哈希表查找不成功的ASL问题
