js拖拽超炫效果

PROMULGATOR

就叫成长吧！

上海市

← jQuery Ajax传参

→ js 选中显示不同内容

相关代码

鼠标跟随火焰[炫]

js爱心鼠标跟随

鼠标跟随定点滑动效果

js鼠标跟随代码

图片跟随鼠标移动（原创）

js拖拽超炫效果

Html

Css

Js

鼠标按下拖拽试试

* {
	margin:0;
	padding:0;
}
body {
	background:#000;color: aliceblue
}
div {
	width:50px;
	height:50px;
	position:fixed;
	background-size:100%;
}

var num = 0;
var n = 0;
document.onmousedown = function() {
    this.onmousemove = function(evt) {
        var e = evt || window.evt;
        var x = e.pageX - 25;
        var y = e.pageY - 25;
        var oDiv = document.createElement('div');
        n = parseInt(num / 20);
        oDiv.style.cssText = "top: " + y + "px;left:" + x + "px;background-image:url(http://www.jq22.com/tp/06b55678-7ff6-4060-a0cd-6662ba99eec0.png)";
        document.body.appendChild(oDiv);
        num++;
        if (num >= 400) {
            num = 0;
        }
        move(oDiv, {
            width: 0,
            height: 0,
            top: y - 100
        },
        1000,
        function() {
            this.parentNode.removeChild(this);
        });
    }
    this.onmouseup = function() {
        this.onmousemove = null;
        this.onmouseup = null;
    }
}

function move(obj, mJson, time, fn) {
    var startTime = new Date();
    var startVal = {};
    for (var key in mJson) {
        startVal[key] = getStyle(obj, key);
    }
    var timer = setInterval(function() {
        var nowTime = new Date();
        var prop = (nowTime - startTime) / time;
        if (prop >= 1) {
            prop = 1;
            clearInterval(timer);
            fn && fn.call(obj);
        }
        for (var key in mJson) {
            obj.style[key] = startVal[key] + prop * (mJson[key] - startVal[key]) + 'px';
        }
    },
    13)
}

function getStyle(obj, attr) {
    if (attr == 'width') {
        return obj.clientWidth;
    } else if (attr == 'height') {
        return obj.clientHeight;
    } else if (attr == 'left') {
        return obj.offsetLeft;
    } else if (attr == 'top') {
        return obj.offsetTop;
    } else {
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
    }
}

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

立即下载

js拖拽超炫效果



代码描述：简单实用的js拖拽超炫效果

可以自己更改图片路径选择绚丽的图标，能有更好的效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js拖拽超炫效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号