点击鼠标不断跳字

本文最后修改于 592 天前,部分内容可能已经过时!

时间:2018.12.01

类型:javascript

功能:再点击鼠标是弹出字,一段时间后消失。十分有趣的鼠标特效,可以吸引流量。

关键代码:

//在网页head标签里引入jquery库
<script src="http://www.zqcnc.cn/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>

//效果代码 建议放在网页页尾
<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>
Tags:none
上一篇
打赏
下一篇

添加新评论