js弹性拖动

View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML XMLNS:ELEMENT>
<html>
<head>
<title>::drag::</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
    margin:0px;
    background-color:#5f9fff;
    overflow:hidden;
}
#center{
    background-color:#efefef;
}
#ct_frame{
    position:absolute;
    top:0px;
    left:0px;
}
</style>
</head>
<body>
<div id="center"></div>
</body>
</html>

<script type="text/javascript">
var ct = document.getElementById("center");
var oX = 0;
var oY = 0;
var dX = 0;
var dY = 0;
var eBut = -1;
var delay = 1;
(function(){
    var x = document.body.clientWidth;
    var y = document.body.clientHeight;
    ct.style.position = "absolute";
    ct.style.top = "0px";
    ct.style.left = "0px";
    ct.style.width = x + "px";
    ct.style.height = y + "px";;
})();
window.onmousedown = function(event){
    eBut = event.button;
    if(eBut == 2){
        oX = event.clientX;
        oY = event.clientY;
    } else {
        return 0;
    }
    eButDown = true;
};
window.onmouseup = function() {
    eBut = -1;
    delay = 1;
    //ct.style.top = "500px";
    //ct.style.left = "500px";
    var fx = ct.offsetLeft;
    var fy = ct.offsetTop;
    goBack(fx,fy);
};
window.onmousemove = function(event) {
    if(eBut == 2){
        dx = event.clientX - oX;
        dy = event.clientY - oY;
        ct.style.left = (0 + dx / delay) + "px";
        ct.style.top = (0 + dy / delay) + "px";
        delay += 0.2;
    } 
};
document.oncontextmenu = function(){
    return false;
};
function goBack(x,y) {
    var stepX = (0 - x) / 5;
    var stepY = (0 - y) / 5;
    var sx = new Array();
    var sy = new Array();
    var index = 0;
    for(var i = 2;i >= -2;i--) {
        sx[index] = stepX + (i * (stepX / 5));
        sy[index] = stepY + (i * (stepX / 5));
        index++;
    }
    var count = 0;
    var timer = window.setInterval(function(){
        ct.style.left = (ct.offsetLeft + sx[count]) + "px";
        ct.style.top = (ct.offsetTop + sy[count]) + "px";
        count++;
        if(count >= 5){
            ct.style.left = "0px";
            ct.style.top = "0px";
            window.clearInterval(timer);
        }
    },10);
}
</script>

转载于:https://www.cnblogs.com/suninnight/archive/2012/08/28/2660337.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值