通过控制滑动条来控制文章的滑动

最新推荐文章于 2020-12-15 17:37:13 发布

平静背后的哲学

最新推荐文章于 2020-12-15 17:37:13 发布

阅读量329

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/yang725614/article/details/52596171

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

.html文件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type = "text/css">
	/*body{
	width:2000px;
	height: 2000px;
	}*/
	body,img,p,div{margin: 0;padding: 0;}
	#drag{
	width:300px;
	height:20px;
	border:1px solid red;
	margin:60px auto;
	background-color:#ccc;
	position: relative;
	}
	#btn{
	width:20px;
	height: 20px;
	border:1px solid #ooo;
	background-color: red;
	position: absolute;
	}
	#box{
	width:260px;
	height:300px;
	border:1px solid blue;
	margin:60px auto;
	overflow: hidden;
	position: relative;
	}
	#content{
	position: absolute;
	}

	</style>
	<script type = "text/javascript" src = "./js/common.js"></script>
	<script type="text/javascript">
	window.onload = function(){
	var odrag = document.getElementById('drag');
	var obtn = document.getElementById('btn');
	//绑定拖拽效果
	drag(obtn,odrag);
	bindEvent(odrag,"mousewheel",scrollEvent);
	bindEvent(odrag,"DOMMouseScroll",scrollEvent);
	}
	</script>
	</head>
	<body >
	<!--<a style = "position:fixed; right:0; bottom:0;text-decoration:none">返回顶部</a>
	<script type = "text/javascript">
	var oa = document.getElementsByTagName('a')[0];
	oa.onclick = function(){
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
	}
	</script>-->
	<div id = "drag">
	<div id = "btn"></div>
	</div>
	<div id = "box">
	<div id = "content">
	<p>offsetLeft :当前对象到其上级层左边的距离。不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。style.left当前对象到其上级层左边的距离。</p>
	<p>offsetLeft :当前对象到其上级层左边的距离。不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。style.left当前对象到其上级层左边的距离。</p>
	<p>offsetLeft :当前对象到其上级层左边的距离。不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。style.left当前对象到其上级层左边的距离。通过设置z-index:1可以设置显示的顺序5、scrollWidth:获取对象的滚动宽度。6、scrollHeight: 获取对象的滚动高度。7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离；(height+padding为一体)9、clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；10、clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；11、clientLeft: 获取对象的border宽度12、clientTop：获取对象的border高度13、offsetParent :当前对象的上级层对象</p>
	</div>
	</div>
	</body>
	</html>

.js文件

/*
* 通过id查找节点对象
* 参数：标签的id属性
* 返回节点对象
*/
function $(id){
return document.getElementById(id);
}
/*
* 绑定事件的通用方法
* 参数1：监视的节点对象 obj
* 参数2：绑定的事件名称 eventType
* 参数3：事件发生的时候要执行的函数 fn
*/
function bindEvent(obj,eventType,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventType, fn);
}else{
obj.addEventListener(eventType, fn, false);
}
}
//将来这样调用：bindEvent('button','click',function(){})

/*
* 通过class属性查找节点对象
* 参数1：parent 查找的范围
* 参数2：查找的class属性的值
* 返回数组格式的数据
*/

function getByClass(parent,clsName){
var elements = parent.getElementsByTagName('*');
var arr = [];
for(var i=0;i<elements.length;i++){
if(elements[i].className==clsName){
//arr[] = elements[i];
arr.push(elements[i]);
}
}
return arr;
}

/*
* 该函数封装的鼠标拖拽效果
* 参数1：obj 拖拽的对象
* 参数2：scope 拖拽的范围(父元素)
*/

function drag(obj,scope){
obj.onmousedown = function(){
//移动的事件必须是鼠标按下之后的移动，这个时候才会生成拖拽的效果
scope.onmousemove = function(e){
var ev = e || window.event;
//获得鼠标移动时的坐标
var mouseX = ev.clientX - scope.offsetLeft;
var mouseY = ev.clientY - scope.offsetTop;

//计算出图片的位置
var imgX = mouseX - obj.clientWidth/2;
var imgY = mouseY - obj.clientHeight/2;

//先判断是否出界
if(imgX<0){
imgX = 0;
}
if(imgY<0){
imgY = 0;
}
if(imgX+obj.clientWidth>scope.clientWidth){
imgX = scope.clientWidth - obj.clientWidth;
}
if(imgY+obj.clientHeight>scope.clientHeight){
imgY = scope.clientHeight - obj.clientHeight;
}

//计算拖拽的对象拖拽的距离
var scale = obj.offsetLeft / (scope.clientWidth-obj.clientWidth);
var contentY = -scale * (content.clientHeight - box.clientHeight);
content.style.top = contentY +'px';

//设置图像的位置
obj.style.left = imgX +'px';
obj.style.top = imgY +'px';

if(obj.setCapture){
//IE8以下的浏览器（释放捕获）
obj.releaseCapture();
}else{
return false;
}
}
//阻止浏览器默认的行为（主流浏览器）
if(obj.setCapture){
//IE8以下的浏览器（设置捕获）
obj.setCapture();
}else{
return false;
}
}
//鼠标抬起之后取消默认的行为
document.onmouseup = function(){
scope.onmousemove = null;
}
}