给你的网站添加点击特效

附上站内一直在使用的鼠标点击特效,代码不多部署也是非常的简单,废话不多说,具体如下:

富强明主点击特效:

<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": 9999999999999999999999999999999999999999,  
                "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>  
    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>

代码部署教程:

部署到自己的网站非常的简单,几乎是支持所有的站点,一般情况下只要将复制好的代码粘贴到</body>之前就行了。如果是WordPress网站直接添加到footer.php文件的</body>之前就OK了。代码中的字体以及属性均可以自定义设置,因为上面附上另种不同效果的代码,大家选一个喜欢的给自己的网站装饰下看看效果吧!如果添加后未生效请尝试清理CDN缓存或者浏览器缓存就可以了。


—— 本页内容已结束,喜欢请分享 ——
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 共1条

请登录后发表评论

    • 头像Wobiny0