问题描述
- 显示时图片有跳动，怎么修正一下？
-
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <div style="width:100%;height:212px;"> <div id="div1" style="cursor:pointer;position:absolute;width:315px;height:210px;overflow:hidden;border:-3px solid #CCCCCC" onmouseover="clearTimeout(scrl);" onmousemove="getpos()" onmouseout="change(1);"><img src=http://116.255.150.75:808/3601/1/chinama.jpg onload="change(1);"></div> <script> var scrl,direction="right"; var x,xold,xdiff, i=1; function change(start){ if(direction == "right"){ if(div1.scrollTop+210 < div1.scrollHeight){ div1.scrollTop += 210; } else{ div1.scrollTop = 0; } } else{ if(div1.scrollTop-210 > 0){ div1.scrollTop -= 210; } else{ div1.scrollTop = div1.scrollHeight; } } if(start) scrl = setTimeout("change(1)",100); else clearTimeout(scrl); } function getpos(){ x = event.clientX; xdiff = x - xold; xold = x; if(xdiff>0) direction = "right"; if(xdiff<0) direction = "left"; change(0); } </script> </div> </body> </html>这个在显示时，图片有一个跳动的现象，怎么修正？ 请高手指点，十在是不懂代码呀。
解决方案
是不是这段代码引起的开始显示时的跳动：
if(start) scrl = setTimeout("change(1)",100);
else clearTimeout(scrl);
解决方案二：
mg放到div或者li里面会到值div或者li莫名奇妙多3~5px的margin-bottom，将img转为块级元素可以修正这个bug
<img src=http://116.255.150.75:808/3601/1/chinama.jpg onload="change(1);" border="0" style="display:block">
而且你的代码也不兼容标准浏览器，改成下面的
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="width:100%;height:210px;">
<div id="div1" style="cursor:pointer;position:absolute;width:315px;height:210px;overflow:hidden;C" onmouseover="clearTimeout(scrl);" onmousemove="getpos(event)"
onmouseout="change(1);"><img src=http://116.255.150.75:808/3601/1/chinama.jpg onload="change(1);" border="0" style="display:block"></div>
<style>body{margin:0px}</style>
<script>
var scrl,direction="right";
var x,xold,xdiff, i=1;
var div1=document.getElementById('div1')
function change(start){
if(direction == "right"){
if(div1.scrollTop+210 < div1.scrollHeight){
div1.scrollTop += 210;
}
else{
div1.scrollTop = 0;
}
}
else{
if(div1.scrollTop-210 > 0){
div1.scrollTop -= 210;
}
else{
div1.scrollTop = div1.scrollHeight;
}
}
if(start) scrl = setTimeout("change(1)",10);
else clearTimeout(scrl);
}
function getpos(event){
x = event.clientX;
xdiff = x - xold;
xold = x;
if(xdiff>0) direction = "right";
if(xdiff<0) direction = "left";
change(0);
}
</script>
</div>
</body>
</html>
时间： 2025-01-01 11:22:55