今天给大家带来的是一种比较常见的特效，对于这个特效记得老早就有了，不过今天偶然在某个博客里看到了一个升级版，觉得效果也还是挺不错的，所以想要借此来分享给有需要的朋友们。
这是一个给网站中添加“富强、民主、和谐”鼠标点击特效的效果展示，当我们点击站内的任何一处都会出现“富强、民主、和谐”等字样。当然！并不是只有区区的这几个字样，我们也可以在此增减、删除，这个取决于我们自己的需要。
这个特效网上也有许多教程。其实就是一个JS，代码如下，把JS放在网站中就可以使用了。
一、使用github上的开源代码。
<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 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>第二种和第一种的感觉差别没有太大，就是在文字方面做了一些改变
<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>第三种，字体颜色随机，大小循环变小变大
<script type="text/javascript"> /* 鼠标特效 */ $(function() { var a_idx = 0, b_idx = 0; c_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("欢迎您", "么么哒", "你真好", "棒棒哒", "真可爱", "你最美", "喜欢你", "真聪明", "爱你哦", "好厉害", "你真帅", "祝福你"), b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#ff5163", "#efff51"), c = new Array("12", "14", "16", "18", "20", "22", "24", "26", "28", "30"); var $i = $("<span/>").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; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "font-size": c[c_idx] + "px", "color": b[b_idx] }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); var _hmt = _hmt || []; }) </script>第四种、数字点击特效
<script> jQuery(document).ready(function($) { var _click_count=0; $("body").bind("click",function(e){ //直接给body一个事件好了. var n=Math.round(Math.random()*100);//随机数 // var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素 var $i=$("<b>").text("+"+(++n));//添加到页面的元素 var x=e.pageX,y=e.pageY;//鼠标点击的位置 $i.css({ "z-index":99999, "top":y-15, "left":x, "position":"absolute", "color":"red" }); $("body").append($i); $i.animate( {"top":y-180,"opacity":0}, 1500, function(){$i.remove();} ); e.stopPropagation(); }); }); </script>很多人可能还不是太清楚这些代码要部署在网站哪里，我们只需要直接将代码添加到正在使用主题的footer.php文件最后一个前就可以了。
