<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#parent{ 400px; height: 20px; background: #ccc; position: relative; margin: 20px auto; }
#div1{ 20px; height: 20px; background: red; cursor: pointer; position: absolute; }
#div2{ 200px; height: 300px; position: relative; border: 1px solid #ccc; overflow: hidden;}
#div3{ position: absolute; }
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oParent=document.getElementById('parent');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function onMouseWheel(ev){
var oEvent=ev||event;
//ie
//wheelDelta 上滚的时候是正数 下滚的时候是负数
//ff
//detail 上滚的时候负数 下滚的时候是正数
var bDown=true; //定义一个变量用来监听滚轮的上下滚动状态
bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
//利用三元运算简化代码 假如存在IE的事件时就用IE的事件 并且返回真的条件为oEvent.wheelDelta<0
//假如大于0的话就会返回false 假如不存在IE时间就用 火狐的事件 并且返回真的条件为oEvent.detail>0
//假如小于0的话就会返回false
/*if(oEvent.wheelDelta){ //假如存在这个时间就用ie的
if(oEvent.wheelDelta<0){ //小于0的时候是往下滚
bDown=true; //往下滚的时候定义为true
}else{
bDown=false; //往上滚的时候定义为false
}
}else{
if(oEvent.detail>0){ //大于0的时候是往下滚动
bDown=true; //往下滚的时候定义为true
}else{
bDown=false; //往上滚的时候定义为false
}
}*/
if(bDown){
setLeft(oDiv.offsetLeft+10);
}else{
setLeft(oDiv.offsetLeft-10);
}
if(oEvent.preventDefault){
oEvent.preventDefault();
}{
return false;
}
}
//绑定两次为了同时兼容三款浏览器，假如绑定的时间不支持不会出错只会不支行
myAddEvent(oParent, 'mousewheel', onMouseWheel);
myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);
myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
/*
ie chrome
oDiv.onmousewheel=function(){
alert('a');
}
ff dom事件只能通过绑定来添加并且不支持onmousewheel
oDiv.DOMMouseScroll=function(){
alert('a');
}
ff 通过绑定来添加事件
oDiv.addEventListener('DOMMouseScroll',function(){
alert('a');
},false);
*/
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft; //滚动条只需要左右移动所以想left的值就可以了
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
if(l<0){
l=0;
}else if(l>oParent.offsetWidth-oDiv.offsetWidth){
l=oParent.offsetWidth-oDiv.offsetWidth;
}
oDiv.style.left=l+'px';
var scale=l/(oParent.offsetWidth-oDiv.offsetWidth); //拖拽的一个百分比
var t=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale;
startMove(oDiv3,{ top: t });
//oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
//其实div3 在div2内能移动的距离就是div3的总体高度减去div2的高度 因为必须往上移动 所以是负值
document.title=scale;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
function setLeft(l){ //把鼠标拖动执行的事件提出来方便放在滚轮事件中同时控制
if(l<0){
l=0;
}else if(l>oParent.offsetWidth-oDiv.offsetWidth){
l=oParent.offsetWidth-oDiv.offsetWidth;
}
oDiv.style.left=l+'px';
var scale=l/(oParent.offsetWidth-oDiv.offsetWidth); //拖拽的一个百分比
var t=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale;
startMove(oDiv3,{ top: t });
}
};
//事件绑定
function myAddEvent(obj, sEvent, fn){
if(obj.attachEvent){
obj.attachEvent('on'+sEvent,fn);
}else{
obj.addEventListener(sEvent,fn,false);
}
}
//运动框架
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj,false)[attr];
}
};
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bStop=true; //这一次运动就结束了，所有值都到达了。
for(var attr in json){
//1.取当前的值
var iCur=0;
if(attr == 'opacity'){
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
} else{
iCur=parseInt(getStyle(obj,attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr]){
bStop=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
} else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
//运动框架结束
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁一个人的时候你会想起谁
</div>
</div>
</body>
</html>