JavaScript基础知识应用案例分享---滑轮滚动浏览页面

来源：互联网发布：h.323端口号编辑：程序博客网时间：2024/05/10 15:20

显示效果图：

需要用到的引入的js文件代码：

创建一个js文件夹在里面新建一个commom.js文件

保存下面步骤需要用到的drag函数。

/*
该函数封装的是鼠标拖拽效果
@param obj 拖拽的对象
@param scope 拖拽的范围
*/
function drag(obj,scope){
//鼠标按下事件
obj.onmousedown = function(){
//1、获得一个移动的事件
scope.onmousemove = function(e){
var ev = e || window.event;
//2、获得鼠标移动时的坐标
var mouseX = ev.clientX - scope.offsetLeft;
var mouseY = ev.clientY - scope.offsetTop;
//3、计算出图片的位置
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){
obj.releaseCapture();
}else{
return false;
}
}
if(obj.setCapture){
obj.setCapture();
}else{
return false;
}
}
//阻止浏览器默认的拖拽行为
//return false;
//鼠标抬起事件（鼠标抬起之后取消默认的行为）
document.onmouseup = function(){
scope.onmousemove = null;
}
}

/*
绑定事件的通用方法
@param obj 监视的节点对象
@param eventType 绑定的事件名称
@param fn 时间发生的时候要执行的函数
*/
function bindEvent(obj,eventType,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventType,fn);
}else{
obj.addEventListener(eventType,fn,false);
}
}
//调用方式：bindEvent('button','click',function(){})

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

步骤一：搭建页面
在body和css样式里根据显示效果搭建
<style type="text/css">
body,div,button,ul,li,img{margin:0; padding:0}
#drag{position:relative;width:400px;height:20px;background:orange;margin:50px auto}
#btn{position:absolute;width:20px;height:20px;background:brown;}
#box{position:relative;width:200px;height:300px;overflow:hidden;border:3px solid black}
#content{position:absolute;background:orange;}
</style>
<body>
<div id="drag">
<div id="btn"></div>
</div>
<div id="box">
<div id="content">
<p>
/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
<p>/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
<p>/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
</div>
</div>
</body>

////////////////////////////////////////////////////////////////////////////////////

步骤二：绑定拖拽效果
在script样式里绑定
先加载属性进来，根据之前封装好的函数drag(obtn,odrag)把属性传入进去;

实现滑轮滚动效果

////////////////////////////////////////////////////////////////////////////////////////////////////

步骤3：给drag绑定滑轮事件，通过滑轮滚动控制滚动条和显示的内容
因为不同浏览器绑定的滑轮事件代码不一样，
通过封装bindEvent函数实现不同浏览器都能实现效果；
函数bindEvent调用方式
bindEvent(odrag,"mousewheel",scrollEvent);
bindEvent(odrag,"DOMMouseScool",scroolEvent);
上面函数调用的参数scroolEvent是一个函数，
执行在不同浏览器里向上和向下滚动的操作，
在scroolEvent函数执行过程中调用了函数moveDrag(nowLeft)，
我们在scroolEvent函数外封装一个函数moveDrag，
执行根据传过来的参数判断向上或者向下滚动的功能；
//时间发生时执行的函数
function scrollEvent(e){
var ev = e || window.event;
//判断是火狐还是非火狐浏览器
if(ev.detail){
if(ev.detail>0){
//向下滚动
moveDrag(obtn.offsetLeft + speed);
}else{
//向上滚动
moveDrag(obtn.offsetLeft - speed);
}
}else{
//非火狐浏览器
if(ev.wheelDelta>0){
//向上滚动
moveDrag(obtn.offsetLeft - speed);
}else{
//向下滚动
moveDrag(obtn.offsetLeft + speed);
}
}
}
//封装滑轮滚动时按钮移动的距离
function moveDrag(nowLeft){
obtn.style.left = nowLeft +'px';
if(obtn.offsetLeft+obtn.clientWidth>odrag.clientWidth){
obtn.style.left = odrag.clientWidth - obtn.clientWidth +'px';
}else if(obtn.offsetLeft<0){
obtn.style.left = 0;
}
}
}

步骤四:实现滑轮滚动和内容同步滚动效果
分2步：
1、计算出内容移动的距离
2、滑轮和内容同步可以理解为：
拖拽移动的距离/最大的长度 == 对象（内容）移动的距离/对象移动的最长距离；
实现第一步：先根据滑轮移动的距离计算内容移动的位置，
在封装的函数moveDrag里通过添加下面代码实现；
var scale = obtn.offsetLeft / (odrag.clientWidth-obtn.clientWidth);
var contentY = -scale * (content.clientHeight-box.clientHeight);
content.style.top = contentY +'px';
**************************************************************************************

//封装滑轮滚动时按钮移动的距离
function moveDrag(nowLeft){
obtn.style.left = nowLeft +'px';
if(obtn.offsetLeft+obtn.clientWidth>odrag.clientWidth){
obtn.style.left = odrag.clientWidth - obtn.clientWidth +'px';
}else if(obtn.offsetLeft<0){
obtn.style.left = 0;
}
//计算滑轮移动的距离从而计算出内容的位置
var scale = obtn.offsetLeft / (odrag.clientWidth-obtn.clientWidth);
var contentY = -scale * (content.clientHeight-box.clientHeight);
content.style.top = contentY +'px';
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

完整代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,div,button,ul,li,img{margin:0; padding:0}
#drag{position:relative;width:400px;height:20px;background:orange;margin:50px auto}
#btn{position:absolute;width:20px;height:20px;background:brown;}
#box{position:relative;width:200px;height:300px;overflow:hidden;border:3px solid black}
#content{position:absolute;background:orange;}
</style>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
window.onload = function(){
var obtn = $('btn');
var odrag = $('drag');
var box = $('box');
var content = $('content');
var speed = 20;
//绑定拖拽效果
drag(obtn,odrag);
//绑定滑轮滚动时间
// odrag.onmousewheel = function(){
// alert('ok');
// }
// odrag.addEventListener('DOMMouseScroll',function(){
// alert('firefox ok')
// },false);
bindEvent(odrag,"mousewheel",scrollEvent);
bindEvent(odrag,"DOMMouseScroll",scrollEvent);
//时间发生时执行的函数
function scrollEvent(e){
var ev = e || window.event;
//判断是火狐还是非火狐浏览器
if(ev.detail){
if(ev.detail>0){
//向下滚动
moveDrag(obtn.offsetLeft + speed);
}else{
//向上滚动
moveDrag(obtn.offsetLeft - speed);
}
}else{
//非火狐浏览器
if(ev.wheelDelta>0){
//向上滚动
moveDrag(obtn.offsetLeft - speed);
}else{
//向下滚动
moveDrag(obtn.offsetLeft + speed);
}
}
}
//封装滑轮滚动时按钮移动的距离
function moveDrag(nowLeft){
obtn.style.left = nowLeft +'px';
if(obtn.offsetLeft+obtn.clientWidth>odrag.clientWidth){
obtn.style.left = odrag.clientWidth - obtn.clientWidth +'px';
}else if(obtn.offsetLeft<0){
obtn.style.left = 0;
}
//计算滑轮移动的距离从而计算出内容的位置
var scale = obtn.offsetLeft / (odrag.clientWidth-obtn.clientWidth);
var contentY = -scale * (content.clientHeight-box.clientHeight);
content.style.top = contentY +'px';
}
}

</script>
</head>
<body>
<div id="drag">
<div id="btn"></div>
</div>
<div id="box">
<div id="content">
<p>
/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
<p>/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
<p>/*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*//*思路：拖拽是由三个事件组成：鼠标必须在按下之后才会生成拖拽效果鼠标按下事件、鼠标移动事件、鼠标抬起事件*/
</p>
</div>
</div>
</body>
</html>

js/common.js中的代码：/*
绑定事件的通用方法
@param obj 监视的节点对象
@param eventType 绑定的事件名称
@param fn 时间发生的时候要执行的函数
*/
function bindEvent(obj,eventType,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventType,fn);
}else{
obj.addEventListener(eventType,fn,false);
}
}
//调用方式：bindEvent('button','click',function(){})
/*
该函数封装的是鼠标拖拽效果
@param obj 拖拽的对象
@param scope 拖拽的范围
*/
function drag(obj,scope){
//鼠标按下事件
obj.onmousedown = function(){
//1、获得一个移动的事件
scope.onmousemove = function(e){
var ev = e || window.event;
//2、获得鼠标移动时的坐标
var mouseX = ev.clientX - scope.offsetLeft;
var mouseY = ev.clientY - scope.offsetTop;
//3、计算出图片的位置
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){
obj.releaseCapture();
}else{
return false;
}
}
if(obj.setCapture){
obj.setCapture();
}else{
return false;
}
}
//阻止浏览器默认的拖拽行为
//return false;
//鼠标抬起事件（鼠标抬起之后取消默认的行为）
document.onmouseup = function(){
scope.onmousemove = null;
}
}

0 0