欢迎光临
我们一直在努力

【WordPress美化教程】之鼠标点击页面出现富强自由等文字特效

【WordPress美化教程】之鼠标点击页面出现富强自由等文字特效

2020-08-06分类:网站教程评论(0)

教程开始

AFT为大家收集了四种实现方式。

找到主题的footer.php并将以下内容整体复制进去并保存

type=“text/javascript”>/* 鼠标特效 */vara_idx=0;jQuery(document).ready(function($){$(“body”).click(function(e){vara=newArray(“富强”,“民主”,“文明”,“和谐”,“自由”,“平等”,“公正”,“法治”,“爱国”,“敬业”,“诚信”,“友善”);var$i=$().text(a[a_idx]);a_idx=(a_idx+1)%a.length;varx=e.pageX,y=e.pageY;$i.css({“z-index”:999999999999999999999999999999999999999999999999999999999999999999999,“top”:y20,“left”:x,“position”:“absolute”,“font-weight”:“bold”,“color”:“ff6651”});$(“body”).append($i);$i.animate({“top”:y180,“opacity”:0},1500,function(){$i.remove();});});});

第二种和第一种的感觉差别没有太大,就是在文字方面做了一些改变

type=“text/javascript”>/* 鼠标特效 */vara_idx=0;jQuery(document).ready(function($){$(“body”).click(function(e){vara=newArray(“❤富强❤”,“❤民主❤”,“❤文明❤”,“❤和谐❤”,“❤自由❤”,“❤平等❤”,“❤公正❤”,“❤法治❤”,“❤爱国❤”,“❤敬业❤”,“❤诚信❤”,“❤友善❤”);var$i=$().text(a[a_idx]);a_idx=(a_idx+1)%a.length;varx=e.pageX,y=e.pageY;$i.css({“z-index”:999999999999999999999999999999999999999999999999999999999999999999999,“top”:y20,“left”:x,“position”:“absolute”,“font-weight”:“bold”,“color”:“rgb(“+~~(255*Math.random())+“,”+~~(255*Math.random())+“,”+~~(255*Math.random())+“)”});$(“body”).append($i);$i.animate({“top”:y180,“opacity”:0},1500,function(){$i.remove();});});});

第三种,字体颜色随机,大小循环变小变大

type=“text/javascript”>/* 鼠标特效 */$(function(){vara_idx=0,b_idx=0;c_idx=0;jQuery(document).ready(function($){$(“body”).click(function(e){vara=newArray(“欢迎您”,“么么哒”,“你真好”,“棒棒哒”,“真可爱”,“你最美”,“喜欢你”,“真聪明”,“爱你哦”,“好厉害”,“你真帅”,“祝福你”),b=newArray(“09ebfc”,“ff6651”,“ffb351”,“51ff65”,“5197ff”,“a551ff”,“ff51f7”,“ff518e”,“ff5163”,“efff51”),c=newArray(“12”,“14”,“16”,“18”,“20”,“22”,“24”,“26”,“28”,“30”);var$i=$().text(a[a_idx]);a_idx=(a_idx+1)%a.length;b_idx=(b_idx+1)%b.length;c_idx=(c_idx+1)%c.length;varx=e.pageX,y=e.pageY;$i.css({“z-index”:999,“top”:y20,“left”:x,“position”:“absolute”,“font-weight”:“bold”,“font-size”:c[c_idx]+“px”,“color”:b[b_idx]});$(“body”).append($i);$i.animate({“top”:y180,“opacity”:0},1500,function(){$i.remove();});});});var_hmt=_hmt||[];})

第四种、数字点击特效

分享到:更多(0)
标签:wordpress
上一篇本站福利小工具下一篇【WordPress美化教程】之实现复制弹出提示框

评论抢沙发

有人回复时邮件通知我
评论提交中…
提交评论
昵称昵称 (必填)邮箱邮箱 (必填)网址网址

赞(0)
未经允许不得转载:梦马网络 » 【WordPress美化教程】之鼠标点击页面出现富强自由等文字特效
分享到

评论 抢沙发

登录

找回密码

注册