部落格園滑鼠點選特效程式碼

樣式效果

滑鼠點擊出現煙花和"富強", "民主", "文明", "和諧"... 特效

使用方法

1.在自己的部落格園中找到管理->設定頁面
2.在頁尾 HTML 程式碼中插入

<!--滑鼠點選特效-->
<script type="text/javascript">
      //定義獲取詞語下標
      var a_idx = 0;
      jQuery(document).ready(function ($) {
        //點選body時觸發事件
        $("body").click(function (e) {
          //需要顯示的詞語
          var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業", "誠信", "友善");
          //設定詞語給span標籤
          var $i = $("<span/>").text(a[a_idx]);
          //下標等於原來下標+1  餘 詞語總數
          a_idx = (a_idx + 1) % a.length;
          //獲取滑鼠指標的位置，分別相對於文件的左和右邊緣。
          //獲取x和y的指標座標
          var x = e.pageX, y = e.pageY;
          //在滑鼠的指標的位置給$i定義的span標籤新增css樣式
          $i.css({
            "z-index": 999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": rand_color()
          });
          // 隨機顏色
          function rand_color() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
          }
          //在body新增這個標籤
          $("body").append($i);
          //animate() 方法執行 CSS 屬性集的自定義動畫。
          //該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。
          //詳情請看http://www.w3school.com.cn/jquery/effect_animate.asp
          $i.animate({
            //將原來的位置向上移動180
            "top": y - 180,
            "opacity": 0
            //1500動畫的速度
          }, 1500, function () {
            //時間到了自動刪除
            $i.remove();
          });
        });
      })
      ;
</script>
 

參考連結
部落格頁面滑鼠點選特效