如何解决随鼠标滚动的图片抖动问题?

代码如下..功能都实现的还行..就是上下随便滚动的时候..图片很抖很抖..
求如何让其没有抖动迹象..我看很多网站的回到顶部都很稳定..似乎就没抖过..位置没变过一样..
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#float{
position:absolute;
right: 20px;
z-index:1;
display: none;
}
</style>
<script type="text/javascript">
/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
 acceleration = acceleration || 0.1;
 time = time || 16;
 
 var x1 = 0;
 var y1 = 0;
 var x2 = 0;
 var y2 = 0;
 var x3 = 0;
 var y3 = 0;
 
 if (document.documentElement) {
  x1 = document.documentElement.scrollLeft || 0;
  y1 = document.documentElement.scrollTop || 0;
 }
 if (document.body) {
  x2 = document.body.scrollLeft || 0;
  y2 = document.body.scrollTop || 0;
 }
 var x3 = window.scrollX || 0;
 var y3 = window.scrollY || 0;
 
 // 滚动条到页面顶部的水平距离
 var x = Math.max(x1, Math.max(x2, x3));
 // 滚动条到页面顶部的垂直距离
 var y = Math.max(y1, Math.max(y2, y3));
 
 // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
 var speed = 1 + acceleration;
 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
 // 如果距离不为零, 继续调用迭代本函数
 if(x > 0 || y > 0) {
  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  if(this.myImg.src =="http://static.u17i.com/common/images/post/up.gif"){
   myImg.src="http://static.u17i.com/common/images/post/up1.gif";
  }
  window.setTimeout(invokeFunction, time);
 }else{
  if(this.myImg.src =="http://static.u17i.com/common/images/post/up1.gif"){
   myImg.src="http://static.u17i.com/common/images/post/up.gif";
  }
 }
}
var $ = function(o){return document.getElementById(o);}
  window.onload = function(){
   window.onscroll = function(){
    var scrollTop = document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
    if(scrollTop){
     $("float").style.display = 'block';
     $("float").style.top = (scrollTop + document.documentElement.clientHeight - 70)+ "px";
    }else{
     $("float").style.display = 'none';
    }
   }
  }
</script>
</head><body>
<div id="float"><A id=top-link onclick="goTop();return false;" 
href="javascript:void(0);"><img name="myImg" src="http://static.u17i.com/common/images/post/up.gif" /></A></div>
<div style="height:3000px; margin:0 auto;"></div>
</body>
</html>

解决方案 »

  1.   

    你们可以吧代码copy下来运行下..滚动时候很抖..
    希望得到解决
      

  2.   

    position:fixed;
      

  3.   

    嗯..如果是用position:fixed;。。
    具体实现滚动代码是什么..哪里需要修改下。因为之前没用过这熟悉。
    改了发现滚动不了
      

  4.   

    <!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>
        <title></title>
        <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            body{height:3500px;}
        </style>
        
    </head>
    <body>
        <div id="dv" style="width:80px; display:none; height:50px; position:fixed; right:5px; bottom:5px; border:solid 5px black; z-index:1px;">
            <img alt="" src="up.gif" />
        </div>    <script type="text/javascript">        window.onscroll = function () {
               
                if (document.documentElement.scrollTop == 0) {
                    $("#dv").hide();
                    $("img").attr("src", "up.gif");
                }
                else {
                    if (document.documentElement.scrollTop > 2) {
                        $("#dv").fadeIn(900);
                    }            }
            }        document.getElementById("dv").onclick = function () {            $("img").attr("src", "up1.gif");
                if (document.documentElement.scrollTop > 500) {
                    $(document.documentElement).animate({ "scrollTop": "0" }, 1000);
                }
                else {
                    $(document.documentElement).animate({ "scrollTop": "0" }, 600);
                }
               
            }
        </script>  
    </body>
    </html>
    图片一样 不过地址不一样  你换换
      

  5.   

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>难道是这JS我没的原因?
      

  6.   

    求帮助哦。。position:fixed;这属性真没用过
      

  7.   


    本来想昨天晚上回家试试哩  我家电脑装的有IE9  公司的没装  不过昨天晚上收麦子了  呵呵  不好意思  可能就是你没有引用jq1.3.2吧  你加上试试
      

  8.   


    如果没有<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    、要会有效果就奇怪了
      

  9.   

    哦可能是我没下jquery-1.3.2.min.js..
    因为没用jquery。
    呵呵..
    回头我看看还有其他方法不用jquery的方法不..
      

  10.   

    哦..谢谢了。
    之前没有用过position:fixed;
    刚去查看了具体意思。然后就css里的position:absolute;改成了position:fixed;然后加个bottom给定位了下
    然后将
    if(scrollTop){
         $("float").style.display = 'block';
         $("float").style.top = (scrollTop + document.documentElement.clientHeight - 70)+ "px";
        }else{
         $("float").style.display = 'none';
        }
    里的$("float").style.top = (scrollTop + document.documentElement.clientHeight - 70)+ "px";去掉就完美实现了。。呵呵。谢谢您帮了我那么多那么耐心。。