博客添加js鼠标点击特效代码

首页 » 技术经验 » 博客添加js鼠标点击特效代码

使用方法很简单,将代码添加到主题的头部js加载或底部js代码加载即可,我个人使用的是头部js加载,因为先加载js,可以增加可观赏性

博客添加js鼠标点击特效代码

 

<script type="text/javascript">

/* 鼠标特效 */

var a_idx = 0;

jQuery(document).ready(function($) {

$("body").click(function(e) {

var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");

var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"

});

$("body").append($i);

$i.animate({

"top": y - 180,

"opacity": 0

},

1500,

function() {

$i.remove();

});

});

});

</script>

效果如图:

博客添加js鼠标点击特效代码

未经允许不得转载:作者:云腾, 转载或复制请以 超链接形式 并注明出处 云腾博客
原文地址:《博客添加js鼠标点击特效代码》 发布于2020-04-19

分享到:
打赏

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册