代码描述:js 拖动滑块 浏览图片。js拖动滑块浏览图片功能
分享一段代码实例,它实现了拖动滑块浏览图片的功能。 代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 800px; height: 230px; border: 1px solid #000; box-sizing: border-box; position: relative; overflow: hidden; margin: 100px auto; } .box ul { width: 1950px; height: 200px; background-color: green; position: absolute; left: 0; top: 0px; } .box ul li { width: 130px; height: 100%; background-color: goldenrod; border: 1px solid #000; box-sizing: border-box; float: left; text-align: center; font-size: 28px; } .box .bottom { width: 100%; height: 30px; background-color: gainsboro; position: absolute; left: 0px; bottom: 0px; } .box span { width: 100px; height: 30px; border-radius: 15px; background-color: green; position: absolute; left: 0; bottom: 0px; } </style> <script> window.onload = function() { var fatherBox = document.getElementById('fatherBox'); var picBox = document.getElementById('picBox') var sliderSpan = document.getElementById('slider'); var sRatio=(fatherBox.offsetWidth-sliderSpan.offsetWidth)/(picBox.offsetWidth-fatherBox.offsetWidth); sliderSpan.onmousedown = function(event) { var event = event || window.event; var startX = event.clientX - sliderSpan.offsetLeft; document.onmousemove = function(event) { var event = event || window.event; var spanLeft = event.clientX - startX; if (spanLeft <= 0) { spanLeft = 0; } else if (spanLeft >= (fatherBox.offsetWidth - sliderSpan.offsetWidth)) { spanLeft = fatherBox.offsetWidth - sliderSpan.offsetWidth; } sliderSpan.style.left = spanLeft + 'px'; picBox.style.left = -spanLeft / sRatio + 'px'; return false; } document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; } return false; } } </script> </head> <body> <div id="fatherBox" class="box"> <ul id="picBox"> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> <li>51前端五</li> <li>51前端六</li> <li>51前端七</li> <li>51前端八</li> <li>51前端九</li> <li>51前端十</li> <li>51前端十一</li> <li>51前端十二</li> <li>51前端十三</li> <li>51前端十四</li> <li>51前端十五</li> </ul> <div class="bottom"></div> <span id="slider"></span> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能