JavaScript左右拖动滑动的按钮效果
分类:实例代码
分享一段代码实例,它实现了鼠标左右拖动滑动的按钮效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } .div_big { margin: 30px 20px; width: 200px; height: 36px; line-height: 36px; text-indent: 50px; border: 1px solid #ccc; background-color: #ECE4DD; position: relative; border-radius: 5px; } .div_samll { width: 44px; height: 44px; background-color: #88C86B; position: absolute; top: -4px; z-index: 20; border-radius: 22px; } </style> </head> <body> <div class="div_big"> <span>向右滑动完成验证</span> <div class="div_samll"></div> </div> <script> var div1 = document.getElementsByClassName('div_samll')[0]; var span1 = document.getElementsByTagName('span')[0] var f = true; var p = false; var kep = function() { div1.onmousedown = function() { //鼠标按钮按下执行事件 m = true; f = true; span1.innerHTML = ''; } if (m === true) { p = true; } return p; } var oup = function() { document.onmouseup = function() { //鼠标按钮松开执行事件 f = false; console.log(f); } return f; } document.onmousemove = function(event) { event = event || window.event; //获得相对于body定位的横标值; x = event.clientX //获得相对于body定位的纵标值; y = event.clientY nk = x - 30; if (kep() && oup()) { if (nk > 0 && nk <= 158) { div1.style.marginLeft = nk + 'px'; } } } </script> </body> </html>
JavaScript左右拖动滑动的按钮效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript左右拖动滑动的按钮效果就介绍到这了。
JavaScript左右拖动滑动的按钮效果属于前端实例代码,有关更多实例代码大家可以查看。