1. 程式人生 > >JS特效教程:給網站新增滑鼠點選彈出指定漢字特效

JS特效教程:給網站新增滑鼠點選彈出指定漢字特效

網站新增滑鼠點選彈出指定漢字特效,就是滑鼠點選站點任何位置,都會隨機彈出我們指定的一組漢字中的一個。比如指定“文明,自由,民主,公正,和諧”等,點選滑鼠時就會隨機顯示這一組的某個詞語,見下圖:

JS特效教程:給網站新增滑鼠點選彈出指定漢字特效 建站經驗 第1張

給網站新增滑鼠點選彈出指定漢字特效的操作辦法

這個特效不單單適用於 WordPress 部落格網站,其他的網站包括但不限於 zblog、HTML 構建的網站都可以實現,只需要將以下 JS 程式碼新增到頁尾的 </body> 標籤的前面即可。

  1. <script type="text/javascript">
  2. /* 滑鼠特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("天真","富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善");
  7.         var $i = $("<span/>").text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9.         var x = e.pageX,
  10.         y = e.pageY;
  11.         $i.css({
  12.             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
  13.             "top": y - 20,
  14.             "left": x,
  15.             "position": "absolute",
  16.             "font-weight": "bold",
  17.             "color": "#ff6651"
  18.         });
  19.         $("body").append($i);
  20.         $i.animate({
  21.             "top": y - 180,
  22.             "opacity": 0
  23.         },
  24.         1500,
  25.         function() {
  26.             $i.remove();
  27.         });
  28.     });
  29. });
  30. </script>

其中 Array("天真","富強", "民主", "文明", "和諧", "自由", "平等", "公正" ,"法治", "愛國", "敬業", "誠信", "友善")裡面的漢字可以隨便修改組合,也可以適當增加或刪除,一切隨意就好。還有,如果覺得點選彈出的漢字往上跑得太快的話,你可以將以上程式碼中的 1500 改為 3000 或者更大的數值即可。