樂于分享
好東西不私藏

給你的網站添加“富強民主”點擊特效

玩網站也有一年多了,之前的滿腔熱血研究到深夜的日子也一去不復返了,一方面是折騰多了也膩歪,另一方面目前已經脫離校園開始漫長的打工之路,打理網站的時間可謂是越來越少,目前非常勉強保持著每日更新頻率,更新方面大不如前大家就多多體諒了。最近有很多建站的朋友問我一些網站特效,由于工作原因不能及時的回復,這里趁著難得的周末附上站內一直在使用的鼠標點擊特效,代碼不多部署也是非常的簡單,又是廢話一堆這里直接上硬菜吧!

富強明主點擊特效:

演示效果:

代碼部分:

<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緩存或者瀏覽器緩存就可以了。

 

本站文章均為手工撰寫未經允許謝絕轉載:夜雨聆風 » 給你的網站添加“富強民主”點擊特效
支付寶掃碼打賞 微信打賞

如果文章對您有幫助,歡迎移至上方按鈕打賞……

評論 搶沙發

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

×
訂閱圖標按鈕
群星闪耀注册