罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 399|回复: 0

JavaScript实现酷炫的鼠标拖尾特效

[复制链接]

740

主题

650

帖子

712

积分

社区达人

积分
712
发表于 2022-1-11 17:29:06 来自手机 | 显示全部楼层 |阅读模式
看完这个保证你有手就行,制作各种好看的小尾巴!


全部代码如下,看注释可以轻易看懂
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><style>    /*div样式*/    #main{        width: auto;height: 1500px;margin: 0;background-color: black;    }</style></head><body>        <div id="main"></div> <script>    //==========鼠标星球尾巴JS代码============    //========函数:获取当前鼠标的坐标=========     function getMousePosition(event) {         var x = 0;//x坐标         var y = 0;//y坐标         //documentElement 返回一个文档的文档元素。         doc = document.documentElement;         //body 返回文档的body元素         body = document.body;         //解决兼容性         if (!event) event = window.event;         //解决鼠标滚轮滚动后与相对坐标的差值         //pageYoffset是Netscape特有         if (window.pageYoffset) {             x = window.pageXOffset;             y = window.pageYOffset;         } else {//其他浏览器鼠标滚动             x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)                 - (doc && doc.clientLeft || body && body.clientLeft || 0);             y = (doc && doc.scrollTop || body && body.scrollTop || 0)                 - (doc && doc.clientTop || body && body.clientTop || 0);         }         //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标         x += event.clientX;         //得到的x加上当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标         y += event.clientY;         //返回x和y         return {'x': x, 'y': y};     }     //========函数:获取当前鼠标的坐标=========     //=====生成从minNum到maxNum的随机数=====    function randomNum(minNum,maxNum){        switch(arguments.length){            case 1:                return parseInt(Math.random()*minNum+1,10);            case 2:                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);            default:                return 0;        }    }    //=====生成从minNum到maxNum的随机数======    //======给整个文档绑定一个鼠标移动事件======    document.onmousemove = function(event){        // 在页面创建一个标签,(这里是创建一个自定义标签styleImg )        var styleImg = document.createElement("div");        //获取随机数1-5,根据随机数来设置标签的样式        var r = randomNum(1,5);        switch (r) {            case 1:                //设置图片的路径,根据不同的路径就可以更改成不同的样式                styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"                break;            case 2:                styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"                break;            case 3:                styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"                break;            case 4:                styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"                break;            case 5:                styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"                break;        }        // 由于要设置动画,设置left 和top,因此,必须要设置定位        styleImg.style.position = 'absolute'        // 设置标签的初始位置,即鼠标的当前位置        var x = getMousePosition(event).x;        var y = getMousePosition(event).y;        // 设置styleImg的坐标            styleImg.style.top = y +"px";        styleImg.style.left = x + "px";        //绑定testDiv为当前鼠标小尾巴生效的区域        var testDiv = document.getElementById("main");        // 将新建的标签加到页面的 body标签中        testDiv.appendChild(styleImg);        // 在文档中有超出的地方就会不显示,所以尽量绑定到页面的div中        // 设置溢出隐藏,为了防止鼠标在移动的过程中会触发上下滚动条        testDiv.style.overflow = 'hidden';        //            var count = 0;            //setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式        var time = setInterval(function(){        // 设置定时器 ,让每一次生成的标签在指定的周期内修改相应的透明度                count += 5;            styleImg.style.opacity = (100-count)/100 ;        }, 30)        // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。        // 设置延时定时器, 在一定的时间后清除上面的定时器,让创建的标签不再进行变化        setTimeout(function(){            // 使用 clearInterval() 来停止执行setInterval函数            clearInterval(time);            // 删除创建的标签            testDiv.removeChild(styleImg);        },250)    }    </script></body></html>
复制代码
ps:以上代码参考了多篇不同的文献后自己敲的,没有面向VC写博客哦!
最后把图片素材送给你们吧,只要在上面代码中做简单的修改,便可以实现其他样式的小尾巴 








到此这篇关于JavaScript实现酷炫的鼠标拖尾特效的文章就介绍到这了,更多相关JavaScript鼠标拖尾特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/233457.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(36663)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(20853)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(19844)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(14887)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(14190)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(13339)2019-11-9 巨胸肥臀大长腿,嫩模糯美子真人COS不知火舞福利污图

(11694)2019-8-7 湖北电力网上缴费,支付宝绑定户号的初始密码是什么?

(11344)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

(10131)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(9969)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

最新发表

[无理取闹]2022-8-18 德媒述评:“屋顶”成中国光伏发展新蓝海

[开心每一天]2022-8-18 港媒:中国完善期货市场法律框架

[zhanwenfang]2022-8-18 港媒报道:中国多地出台政策鼓励生育

[jiantengxie]2022-8-18 现场视频!东部战区飞行员俯瞰澎湖列岛

[Mandy1008]2022-8-18 东部战区位台岛周边海空域组织多军兵种联合战备警巡和实战化演练

[ulteawx]2022-8-18 俄媒:俄吊销捷克和保加利亚企业军机维修许可证

[不要问我]2022-8-18 俄国防部:一架英国侦察机侵犯俄领空遭驱离

[曾磊]2022-8-18 俄媒:斯洛伐克向乌克兰提供多门自行榴弹炮

[不要问我]2022-8-18 外媒:新西兰将向英国派遣120名军事人员协助培训乌军人

[hylin]2022-8-18 法媒:以军空袭叙境内目标致多人死伤

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2022-8-18 22:46 , Processed in 0.125853 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表