首頁 web前端 js教程 jquery程式碼實作滑​​鼠點擊文字特效

jquery程式碼實作滑​​鼠點擊文字特效

Feb 02, 2018 pm 01:33 PM
jquery 點選 滑鼠

今天在【幻想's Blog】看到一段比較喜歡的滑鼠點擊文字特效JS程式碼,本文主要和大家介紹一個有意思的滑鼠點擊文字特效jquery程式碼,需要的朋友可以參考下,希望能幫助到大家。

只需要將如下JS程式碼放到</body>之前即可。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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

登入後複製

不知道為啥, WordPress 可以使用的JS程式碼放到 Typecho 裡都失效了,鬱悶呀!

這個效果一般大網站就不用了,一般用於個人部落格還是不錯的。

相關推薦:

js如何實作變形金剛文字特效程式碼分享

7個典型的文字特效案例總結

5款酷炫又實用的網頁文字特效下載推薦(收藏)

#

以上是jquery程式碼實作滑​​鼠點擊文字特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧 Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧 Feb 29, 2024 pm 03:20 PM

Win11怎麼停用工作列縮圖預覽? 關閉滑鼠移動工作列圖示顯示縮圖技巧

惠普推出 Professor 1 三模輕音滑鼠:4000DPI、藍影 RAW3220,首發價 99 元 惠普推出 Professor 1 三模輕音滑鼠:4000DPI、藍影 RAW3220,首發價 99 元 Apr 01, 2024 am 09:11 AM

惠普推出 Professor 1 三模輕音滑鼠:4000DPI、藍影 RAW3220,首發價 99 元

雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架,套裝價 1549 元 雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架,套裝價 1549 元 Jul 19, 2024 am 04:17 AM

雷蛇 | 寶可夢耿鬼款無線滑鼠、滑鼠墊上架,套裝價 1549 元

VGN 聯名《艾爾登法環》鍵鼠系列產品上架:菈妮 / 褪色者定制主題,首發 99 元起 VGN 聯名《艾爾登法環》鍵鼠系列產品上架:菈妮 / 褪色者定制主題,首發 99 元起 Aug 12, 2024 pm 10:45 PM

VGN 聯名《艾爾登法環》鍵鼠系列產品上架:菈妮 / 褪色者定制主題,首發 99 元起

雷蛇滑鼠驅動在哪個資料夾 雷蛇滑鼠驅動在哪個資料夾 Mar 02, 2024 pm 01:28 PM

雷蛇滑鼠驅動在哪個資料夾

多彩推出 M900 Pro 無線遊戲滑鼠:右手人體工學造型,8K Nano 接收器,199 元起 多彩推出 M900 Pro 無線遊戲滑鼠:右手人體工學造型,8K Nano 接收器,199 元起 Mar 23, 2024 pm 05:16 PM

多彩推出 M900 Pro 無線遊戲滑鼠:右手人體工學造型,8K Nano 接收器,199 元起

雷蛇滑鼠驅動要一直開著嗎 雷蛇滑鼠驅動要一直開著嗎 Mar 02, 2024 am 09:10 AM

雷蛇滑鼠驅動要一直開著嗎

怎麼調滑鼠靈敏度 怎麼調滑鼠靈敏度 Mar 12, 2024 pm 04:15 PM

怎麼調滑鼠靈敏度

See all articles