这个在wp很多了啊,重点都在素材上,今天奇它论坛@老白我也分享一下自己的WordPress网站点击效果+鼠标样式美化(以7b2主题为例,其实wp通用)
一、效果演示
1.1 鼠标点击随机文字特效
1.2 鼠标样式美化
其实就是两张图片:选中链接和不选中链接两种情况对应不同图片
1.3 网页背景粒子特效
二、实现代码
2.1 点击随机文字
加在主题文件/footer.php底部,</body>之前即可
<!--网站点击文字特效-www.qitabbs.com奇它论坛--> <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": 99999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机 //"#2299DD" //固定颜色 }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
2.2 鼠标效果美化
在主题文件/style.css底部添加即可,下载下方的鼠标样式文件,而后获得地址即可
2.3 网页背景粒子特效
footer.php文件底部,同样的
<!--网页背景粒子特效 开始-www.qitabbs.com--> <script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> <!--网页背景粒子特效 结束-www.qitabbs.com-->
三、相关美化
内容太多,文末标签!
感谢分享,嘿嘿嘿嘿嘿嘿嘿