impetus.min.js 为任何对象增添动力，一款拖动插件-BFW插件库

impetus.min.js 为任何对象增添动力，一款拖动插件

impetus.min.js 为任何对象增添动力，一款拖动插件。它就像iscroll，除了不滚动，支持鼠标和触摸事件。

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["impetus.min"], function() {
                var dotEl = document.getElementById('Dot');
                var dotParent = dotEl.offsetParent;

                var dotImpetus = new Impetus({
                    source: dotEl,
                    initialValues: [dotParent.offsetWidth/2 - 25, 45],
                    boundX: [0, dotParent.offsetWidth - dotEl.offsetWidth],
                    boundY: [0, dotParent.offsetHeight - dotEl.offsetHeight],
                    update: function(x, y) {
                        this.style.left = x + 'px';
                        this.style.top = y + 'px';
                    }
                });

                new Impetus({
                    source: '#Cube',
                    multiplier: 0.7,
                    update: function(x, y) {
                        this.style.transform = this.style.webkitTransform = 'translateZ(-120px) rotateY('+x+'deg) rotateX('+(-y)+'deg)';
                    }
                });

            });
        });
    </script>
    <style>
        .demo-area {
		position: relative;
		padding: 3em 0;
		height: 235px;
		background-color: #999;
		-webkit-user-select: none;
		   -moz-user-select: none;
			-ms-user-select: none;
				user-select: none;
	}
	.dot {
		position: absolute;
		left: 0;
		top: 0;
		width: 50px;
		height: 50px;
		/*margin: -25px 0 0 -25px;*/
		border-radius: 50px;
		background-color: #FFF;
		border: 2px solid #222;
		z-index: 1;
	}
	.demo-perspective {
	    height: 100%;
	    position: relative;
		-webkit-perspective: 400px;
				perspective: 400px;
	}
	.cube {
		-webkit-transform: translateZ(-120px);
				transform: translateZ(-120px);
		-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
		position: absolute;
		width: 150px;
		height: 150px;
		margin: -20px 0 0 -75px;
		top: 110px;
		left: 50%;
	}
	.cube > div {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #AAA;
		background-color: #F8F8F8;
		box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.3);
		border: 1px solid #111;
		opacity: 0.4;
	}
	.cube-front {
		-webkit-transform: translateZ(75px);
				transform: translateZ(75px);
	}
	.cube-back {
		-webkit-transform: rotateX(-180deg) translateZ(75px);
				transform: rotateX(-180deg) translateZ(75px);
	}
	.cube-top {
		-webkit-transform: rotateX(90deg) translateZ(75px);
				transform: rotateX(90deg) translateZ(75px);
	}
	.cube-bottom {
		-webkit-transform: rotateX(-90deg) translateZ(75px);
				transform: rotateX(-90deg) translateZ(75px);
	}
	.cube-left {
		-webkit-transform: rotateY(-90deg) translateZ(75px);
				transform: rotateY(-90deg) translateZ(75px);
	}
	.cube-right {
		-webkit-transform: rotateY(90deg) translateZ(75px);
				transform: rotateY(90deg) translateZ(75px);
	}
    </style>
</head>
<body>
    <div class="demo-area">
        <div id="Dot" class="dot"></div>
        <div class="demo-perspective">
            <div id="Cube" class="cube">
                <div class="cube-front"></div>
                <div class="cube-back"></div>
                <div class="cube-top"></div>
                <div class="cube-bottom"></div>
                <div class="cube-left"></div>
                <div class="cube-right"></div>
            </div>
        </div>
    </div>
</body>
</html>

官网 https://chrisbateman.github.io/impetus/