用js做一个鼠标惯性动画

用js做一个简单的鼠标惯性动画

<style type="text/css">#div1{width: 50px;height: 50px;background: red;position: absolute;left: 0px;top: 0px;}</style>

<body><div id="div1"></div><script type="text/javascript">window.onload=function(){    //     var oDiv=document.getElementById('div1');   var oDiv=document.querySelector('#div1')console.log(oDiv) var iSpeedX=0;    var iSpeedY=0;     var lastX=0;    var lastY=0;    var timer=null;     //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。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*=-0.8;    iSpeedX*=0.8;  }     if(t<0){    t=0;    iSpeedY*=-0.8;    iSpeedX*=0.8;  }    if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    l=document.documentElement.clientWidth-oDiv.offsetWidth;   iSpeedX*=-0.8;    iSpeedY*=0.8;    }    if(l<0){    l=0;    iSpeedX*=-0.8;    iSpeedY*=0.8;  }    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=l++;    },30); }    };    </script></body>

感觉很好玩，可以自己写写看

用js做一个鼠标惯性动画相关推荐

用three.js做一个新闻联播开头动画（一）
一个好习惯,先给结论最终效果如下: 在线体验地址:点我预览代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
用js做一个数字华容道
我很喜欢华容道啊,这次用js做一个话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
用js做一个简单的秒表计时器
用js做一个简单的秒表计时器具体代码如下 <!DOCTYPE html> <html lang="en"><head><meta cha ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
CSS/SCSS 做一个心跳的动画：keyframe
CSS/SCSS 做一个心跳的动画一.心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分找到基线,横向10等分. 整个图是一个 ...
使用three.js做一个网页的相册动画
想了很久不知道有没有必要,但还是记录下来,以后说不定还会用的到,希望大家也有机会试试就先做一个简单的页面,做一下动画,放一些图片吧,以后有新东西还是会加进来的 1.先创建一个html文件,初始化代码 ...

用js做一个鼠标惯性动画

用js做一个鼠标惯性动画相关推荐

最新文章

热门文章