給網站添加鼠標點擊彈出指定漢字特效

給網站添加鼠標點擊彈出指定漢字特效

網站添加鼠標點擊彈出指定漢字特效,就是鼠標點擊站點任何位置,都會隨機彈出我們指定的一組漢字中的一個。比如指定“文明,自由,民主,公正,和諧”等,點擊鼠標時就會隨機顯示這一組的某個詞語,具體點擊效果請移步『爲博客添加點擊特效』親自體驗,或見下圖:

社會主義核心價值觀

給網站添加鼠標點擊彈出指定漢字特效的操作辦法

這個特效不單單適用於 WordPress 博客網站,其他的網站包括但不限於 zblog、HTML 構建的網站都可以實現,只需要將以下 JS 代碼添加到頁腳的 標籤的前面即可。

代碼塊

將代碼放在主題的footer.php中的 <./body> 之前即可。

<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>

腳註

原文鏈接[https://www.moerats.com/archives/373/].

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章