js可托动的小方块

Html

Css

#div1 {
	position:absolute;
	left:0;
	top:0;
}

var oImg = document.getElementById('div1');
var disx = 0;
var disy = 0;
//声明两个点
//前一个点
var prevX = 0;
var prevY = 0;
var speedX = 0;
var speedY = 0;
//把图片的长宽初始化为0
oImg.style.width = 0;
oImg.style.height = 0;
//求图片在屏幕正中位置的距离
oImg.style.left = document.documentElement.clientWidth / 2 + 'px';
oImg.style.top = document.documentElement.clientHeight / 2 + 'px';
//定时器刚开始等于Null,为了避免开多个定时器，在开始定时器之前把之前已经开启的定时器停止，
//保持始终只有一个定时器在运行
var timer = null;

tochange(200);

//元素从无到有，掉下弹动的方法
function tochange(iTarget) {

//元素本身距离屏幕的宽度
    var offsetL = oImg.offsetLeft;
    //元素本身距离屏幕的高度
    var offsetT = oImg.offsetTop;

var timer = setInterval(function() {
        if (oImg.offsetWidth == iTarget) {
            clearInterval(timer);
        } else {
            //每隔30毫秒的宽度和高度变成10增大
            oImg.style.width = oImg.offsetWidth + 10 + 'px';
            oImg.style.height = oImg.offsetHeight + 10 + 'px';
            oImg.style.left = offsetL - oImg.offsetWidth / 2 + 'px';
            oImg.style.top = offsetT - oImg.offsetHeight / 2 + 'px';
            startMove();
        }

}, 30)
}

oImg.onmousedown = function(ev) { //事件对象数据事件发生时的一切数据
    //				console.log(ev);
    //鼠标距离元素的小段距离
    disx = ev.clientX - oImg.offsetLeft;
    disy = ev.clientY - oImg.offsetTop;

prevX = ev.clientX;
    prevY = ev.clientY;

document.onmousemove = function(ev) {
        //拖动图片
        oImg.style.left = ev.clientX - disx + 'px';
        oImg.style.top = ev.clientY - disy + 'px';
        //拖拽图片时的默认倒影
        speedX = ev.clientX - prevX;
        speedY = ev.clientY - prevY;
        //移动时更新新的位置
        prevX = ev.clientX;
        prevY = ev.clientY;

return false; //可以阻止默认事件

}
    //抬起鼠标
    document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null; //去掉移动事件
        startMove();
    }
}

//来回弹动方法
function startMove() {

//清除定时器
    clearInterval(timer);
    //定时器
    timer = setInterval(function() {
        speedY += 3;
        var L = oImg.offsetLeft + speedX;
        var T = oImg.offsetTop + speedY;

//底部回弹
        //整个屏幕的高度减去移动的高度
        if (T >= document.documentElement.clientHeight - oImg.offsetHeight) {

T = document.documentElement.clientHeight - oImg.offsetHeight;
            speedY *= -1; //*-1 1-*-1=-20
            speedY *= 0.75; //高度递减
            speedX *= 0.75; //宽度递减
        }
        //整个屏幕的宽度减去移动的宽度
        if (L >= document.documentElement.clientWidth - oImg.offsetWidth) {

L = document.documentElement.clientWidth - oImg.offsetWidth;
            speedX *= -1;
            speedX *= 0.75;
        }
        if (T < 0) {
            T = 0;
            speedY *= -1;
            speedY *= 0.75;
        }
        if (L < 0) {
            L = 0;
            speedX *= -1;
            speedX *= 0.75;
        }

oImg.style.left = L + 'px';
        oImg.style.top = T + 'px';

}, 30)
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js可托动的小方块



代码描述：js可甩动的小方块，同时带有弹性重力效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

毛线怪君

相关代码

js可托动的小方块

最新