<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>自定义滚动</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 1000px; height: 50px; background-color: blue; position: relative; margin: 0 auto; } .box2{ width: 50px; height: 50px; background-color: pink; position: absolute; left: 0; top: 0; } .dv1{ width: 300px; height: 300px; border: 1px solid #ccc; overflow: hidden; position: relative; } .dv2{ position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> <div class="dv1"> <div class="dv2"> 在 w3school,你可以找到你所需要的所有的网站建设教程。 从基础的 HTML 到 CSS,乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。 从左侧的菜单选择你需要的教程! 完整的网站技术参考手册 完整的网站技术参考手册 我们的参考手册涵盖了网站技术的方方面面。 其中包括W3C的标准技术:HTML、CSS、XML 。以及其他的技术,诸如JavaScript、PHP、SQL等等。 在线实例测试工具 在线实例测试工具 在w3school,我们提供上千个实例。 通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。 快捷易懂的学习方式 快捷易懂的学习方式 在 w3school,你可以找到你所需要的所有的网站建设教程。 从基础的 HTML 到 CSS,乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。 从左侧的菜单选择你需要的教程! 完整的网站技术参考手册 完整的网站技术参考手册 我们的参考手册涵盖了网站技术的方方面面。 其中包括W3C的标准技术:HTML、CSS、XML 。以及其他的技术,诸如JavaScript、PHP、SQL等等。 在线实例测试工具 在线实例测试工具 在w3school,我们提供上千个实例。 通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。 快捷易懂的学习方式 快捷易懂的学习方式 </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script> $(function(){ $(‘.box2‘).mousedown(function(e){ //当鼠标按下 // console.log(1) var x=e.pageX-$(this).offset().left //盒子左侧到当前鼠标的距离[内部距离] offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。 // $(‘.box2‘).mousemove(function(){ // }) $(‘.box2‘).bind(‘mousemove‘,function(e){ //绑定mousemove事件 var _x=e.pageX-$(‘.box1‘).offset().left-x; var width=$(‘.box1‘).width()-$(‘.box2‘).width(); //滑块活动范围 if(_x<0){ _x=0; }else if(_x>width){ _x=width } var t=_x/width // console.log(e.pageX) // 总长-盒子内部的距离 $(‘.box2‘).css(‘left‘,_x) var T=t*($(‘.dv2‘).height()-$(‘.dv1‘).height()) $(‘.dv2‘).css(‘top‘,-T) }) $(‘.box2‘).mouseup(function(){ //鼠标弹起,解除绑定 $(‘.box2‘).unbind(‘mousemove‘); }) }) }) </script> </html>