javascript - 网页设计中想让左边往右边拖动的时候越来越慢最后拖不动，现在只实现了左到右，右到左该如何设计?

我想让左边往右边拖动的时候越来越慢最后拖不动，右边往左边拖也是，现在只实现了左到右，右到左该怎么弄，请教各位

<!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>
#show {width:600px;height:400px;overflow:hidden;position: relative;margin:0 auto;border:1px solid #000;}
#drag{width:1000px;height:400px;position: absolute;top:0;left:0;background:pink;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>


<script>

window.onload=function(){
drag("show","drag");
}

function drag(parentObj,obj){
        var obj=document.getElementById(obj);
        var Roadwidth=document.getElementById(parentObj);
        var scrwidth=1000;
        var disX=0;
        var downX=0;
        obj.onmousedown=function(ev){
                var ev=ev||event;
                disX=ev.clientX-obj.offsetLeft;
                downX=ev.clientX;
                clearInterval(obj.timer);
                
                document.onmousemove=function(ev){
                        var ev=ev||event;
                        obj.style.left=(ev.clientX-disX)/3+"px";       
                };
                
                document.onmouseup=function(ev){
                        document.onmousemove=null;
                        document.onmouseup=null;
                        var ev=ev||event;
                        if(ev.clientX<downX){
                                startMove(obj,{left:-(scrwidth-Roadwidth.clientWidth)})
                        }else{
                                
                                startMove(obj,{left:0})
                        }
                        
                };
                return 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){
                        var iCur=0;
                                iCur=parseInt(getStyle(obj,attr));

                        var iSpeed=(json[attr]-iCur)/8;
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        
                        if(iCur!=json[attr]){
                                bStop=false;
                        }
                        obj.style[attr]=iCur+iSpeed+"px";
                }
                
                if(bStop){
                        clearInterval(obj.timer);
                        if(fn){fn();}
                }
        },30);
}

</script>




</head>

<body>


<p id="show">
        <p id="drag">
                
        </p>
</p>


</body>
</html>

PHP中文网2902 days ago472

javascript - 网页设计中想让左边往右边拖动的时候越来越慢最后拖不动，现在只实现了左到右，右到左该如何设计?

reply all(1)I'll reply