首页 新闻 会员 周边

关于拖拽问题

0
悬赏园豆：15 [已关闭问题] 关闭于 2015-02-05 17:25

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

<!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>
<div id="show">
        <div id="drag">
                
        </div>
</div>
</body>
</html>
Mi文的主页 Mi文 | 初学一级 | 园豆：6
提问于：2015-02-02 16:26
< >
分享
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。