点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果实现
前面我们谈到了漂浮磁力线/鼠标吸铁石特效你也可以实现,现在来聊聊点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果的实现,这两个小技巧的小心机都是吸引访客在页面的停留时间,感兴趣的朋友可以试试,这个特效只需要复制 JS 代码就可以。代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type= "text/javascript" > /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready( function ($) { $( "body" ).click( function (e) { var a = new Array( "自信" , "自强" , "坚持" , "ytkah" , "Laravel" , "Wordpress" , "公众号" , "小程序" , "ERP" , "CRM" , "帝国cms" , "Python" , "Magento" , "Dedecms" , "Linux" , "CI" , "Thinkphp" ); /* 可想而知,这里可以修改显示的字 */ var $i = $( "<span />" ).text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index" : 999999999999999999999999999999999999999999999999999999999999999999999, "top" : y - 20, "left" : x, "position" : "absolute" , "font-weight" : "bold" , "color" : "#ff6651" }); $( "body" ).append($i); $i.animate({ "top" : y - 180, "opacity" : 0 }, 1500, function () { $i.remove(); }); }); }); </script> |
保存之后就能看到博客中出现效果了。当然那些文字都是可以修改的,比如改成:富强、民主、文明...发挥自己的天才想象力吧!

加微信交流
标签:
js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
2017-03-09 微信公众号留言置顶功能上线
2017-03-09 马化腾:希望扶持更多线下实体用好小程序 满足用户需求而非刻意控制流量
2016-03-09 Slyce,这家硅谷创业公司的来头你知道吗
2015-03-09 人数超100的微信群非群主无法修改群名称了