用js实现鼠标的小尾巴

实现效果就大概下面的图上的感觉了

//css设置样式，设置定位，让其能够移动起来
<style>html,body{width: 100%;height: 100%;}*{margin: 0;padding: 0;}#big{width: 100%;height: 100%;position: relative;}.small{position: absolute;height: 20px;width: 20px;border:3px solid pink;border-radius: 50%;}
</style><div id="big"></div>
<script>//获取divvar big = document.getElementById("big");//对div添加鼠标移动时间big.onmousemove=function(e){//对event做兼容性处理var e = event || window.event;//创建一个新的divvar div = document.createElement("div");//新的div的样式为.smalldiv.className="small";//获取鼠标移动的X轴坐标（想知道clientX与screenX等等的区别，请参考我上一篇博客），将获取的X轴坐标给新创建div的绝对定位的leftdiv.style.left = e.clientX +'px';//简单来说就是把clientY的值给top，让新的div与上面的距离与鼠标位置保持一致div.style.top = e.clientY +'px';//条件添加好了，就把创建好的div加到之前的div里面big.appendChild(div);//定义一个i和timervar i=0;var timer = null;//定时器timer= setInterval(function(){//每一次移动，就改变相应的属性i+=5;div.style.opacity = (50 - i)/50;div.style.width = (20+i) +'px';div.style.height = (20+i) +'px';},20)//在300ms后执行，并清除计时器，删除创建的divsetTimeout(function(){clearInterval(timer)big.removeChild(div)},300)}//每执行一次移动，都会触发计时器和延迟执行
</script>

用js实现鼠标的小尾巴相关推荐

用js使鼠标变成小手状
var a = document.createElement("A"); a.style.cursor="hand";
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
html5统计鼠标点击的次数,怎么实现js统计鼠标点击次数
学习前端的同学你们知道怎么JS实现在线统计一个页面内鼠标点击次数的方法吗?不知道的话跟着学习啦小编一起来学习JS实现在线统计一个页面内鼠标点击次数的方法. 本文实例讲述了JS实现在线统计一个页面内鼠标 ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
js实现鼠标放在div 悬浮显示另一个div内容链接（不占位置）
js实现鼠标放在div 悬浮显示另一个div内容链接 (不占位置) 代码如下不喜勿喷简单记录前端小知识 <div><a id="div1" href=&quo ...
微信拍一拍小尾巴生成源码
文章目录[隐藏] 源码介绍源码截图源码介绍输入想要的昵称和后缀,点击生成然后复制,返回微信粘贴替换微信群昵称. 源码截图附件下载文件名称:微信拍一拍小尾巴生成源码更新日期:2020- ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...

用js实现鼠标的小尾巴

用js实现鼠标的小尾巴相关推荐

最新文章

热门文章