元素惯性滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:0;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var iSpeedX=0;
var iSpeedY=0;
var lastX=0;
var lastY=0;
var timer=null;
let sudu = 0.8;
oDiv.onmousedown=function(ev){
var oEvent=ev || event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
clearInterval(timer);
document.onmousemove=function(ev){
var oEvent=ev || event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
iSpeedX=oEvent.clientX-lastX;
iSpeedY=oEvent.clientY-lastY;
lastX=oEvent.clientX;
lastY=oEvent.clientY;
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oDiv.releaseCapture && oDiv.releaseCapture();
startMove();
}
oDiv.setCapture && oDiv.setCapture();
return false;
}
function startMove(){
clearInterval(timer);
timer=setInterval(function(){
iSpeedY+=3;
var t=oDiv.offsetTop+iSpeedY;
var l=oDiv.offsetLeft+iSpeedX;
if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
iSpeedY*=-sudu;
iSpeedX*=sudu;
}
if(t<0){
t=0;
iSpeedY*=-sudu;
iSpeedX*=sudu;
}
if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
iSpeedX*=-sudu;
iSpeedY*=sudu;
}
if(l<0){
l=0;
iSpeedX*=-sudu;
iSpeedY*=sudu;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
if(Math.abs(iSpeedX)<1)iSpeedX=0;
if(Math.abs(iSpeedY)<1)iSpeedY=0;
if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
clearInterval(timer);
}
document.title=i++;
},30);
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
拖拽,摩擦,甩动元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS惯性拖拽</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:100px;height:100px;position:absolute;left:0;top:0;border:1px solid #000;}
.box{width:10px;height:10px;background:green; position:absolute;left:0;top:0;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function(ev){
var speedX=0,speedY=0;
var lastX=0,lastY=0;
var oEvt=ev||event;
var disX=oEvt.clientX-oDiv.offsetLeft;
var disY=oEvt.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvt=ev||event;
oDiv.style.left=oEvt.clientX-disX+'px';
oDiv.style.top=oEvt.clientY-disY+'px';
speedX = oDiv.offsetLeft-lastX
speedY = oDiv.offsetTop-lastY
lastX=oDiv.offsetLeft
lastY=oDiv.offsetTop
console.log(lastX,speedX);
};
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
move(oDiv,speedX,speedY);
};
return false;
};
function move(obj,speedX,speedY){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speedX*=0.95
speedY*=0.95
obj.style.left=obj.offsetLeft+speedX+'px';
obj.style.top=obj.offsetTop+speedY+'px';
if(Math.abs(speedX)<1) speedX=0;
if(Math.abs(speedY)<1) speedY=0;
if(speedX==0&&speedY==0){
clearInterval(obj.timer);
}
console.log(speedX,speedY);
},30);
}
};
</script>
</head>
<body>
<div id="div1"><img style="width:100%" src="cc.png" alt=""></div>
</body>
</html>