jQuery自定义滚动条

<!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>

  

jQuery自定义滚动条

上一篇:jsp中el表达式的非空判断和变量赋值


下一篇:vue+elementUI 图片上传问题