JS中自动滚动条的问题，主要是不兼容IE游览器！！

chen_2016_web 2016-09-17 11:35:09

我越来越狠IE游览器了，每次问题都是IE下测试出现的！

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2{width:100px; height:100px; border:1px solid #000; position:relative; overflow:hidden;}
#div3{position:absolute;}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function myAddEvent(obj,sEvent,fn)
{
if(obj.attachEvent)
{
return obj.attachEvent('on'+sEvent,fn)
}
else
{
return 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, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
}, 30)
}
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oParent=document.getElementById('parent');
function abc(ev)
{
var oEvent=ev||event;
var bDown=true;
bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
if(bDown)
{
setLeft(oDiv.offsetLeft+10)
}
else
{
setLeft(oDiv.offsetLeft-10)
}
if(oEvent.preventDefault)
{
oEvent.preventDefault()
}
else
{
return false;
}
}
myAddEvent(oParent,'mousewheel',abc)
myAddEvent(oParent,'DOMMouseScroll',abc)
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
setLeft(l)
};
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);
startMove(oDiv3,'top',-parseInt((oDiv3.offsetHeight-oDiv2.offsetHeight)*scale))
}
};
</script>

</head>

<body>
<div id="parent">
<div id="div1">
</div>
</div>
<div id="div2">
<div id="div3">
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
乘风行天下任我逍遥
仗剑染红尘喧嚣
识侠者之道与情义肝胆相照
</div>
</div>
</body>
</html>
其实代码还不算完整，是很简单的自动滚动条，只有鼠标移入横向滚动条滚动的时候，才会有效果！但IE9不行，其他IE6之类的没测试。怎么修改代码才能解决啊？

...全文