Art Text Light jQuery plugin 可以把指定區塊內的文字利用改變 CSS 屬性來做出突顯的 highlight 的效果。
套件名稱:Art Text Light jQuery plugin
套件網址:0.1.0
作者網站:http://www.artetics.com/Articles/art-text-light-jquery-plugin
套件網址:N/A
發佈日期:2011-08-16
檔案大小:4.19 KB
檔案下載:arttextlight.js
HTML 屬性說明:
檢視原始碼 JavaScript
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 | letterHighlighSpeed(選填) 描述: 每一個字 highlight 的速度(1000毫秒 = 1秒) 預設值: 50 removeHighlighSpeed(選填) 描述: 每一個字 highlight 的時間(1000毫秒 = 1秒) 預設值: 300 highlightInterval(選填) 描述: 每次 highlight 的速度(1000毫秒 = 1秒) 預設值: 2000 css1(選填) 描述: 當 highlight 時要套用的 CSS 屬性 預設值: { 'color': 'white', 'text-shadow': '1px 1px 3px #FFFFFF' } css2(選填) 描述: 當 highlight 後要套用的 CSS 屬性 預設值: { 'color': 'white', 'text-shadow': '1px 1px 3px #FFFFFF' } |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的區塊加上 artTextLight 效果 $(selector).artTextLight(options); |
使用範例:
檢視原始碼 JavaScript
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="arttextlight.js"></script> <style type="text/css"> .container { background: #666; padding: 15px; } .text { color: #000; } .text2 { color: #fff; font-size: 54px; line-height: 84px; } </style> <script type="text/javascript"> $(function(){ // 每隔 3 秒進行一次 highlight 顯示 // highlight 時顏色為 #fff $('#text').artTextLight({ highlightInterval: 3000, css1: { color: '#fff' }, css2: { color: '#000' } }); // 每隔 4 秒進行一次 highlight 顯示 // highlight 時文字顏色為 #f00, 文字陰影為 0 0 54px green // highlight 時停留 0.6 秒 $('#text2').artTextLight({ highlightInterval: 4000, removeHighlighSpeed: 600, css1: { color: '#f00', textShadow: '0 0 54px green' }, css2: { color: '#fff', textShadow: 'none' } }); }); </script> <body> <div class="container"> <span id="text" class="text">男丁格爾's 脫殼玩 http://abgne.tw</span> <br /> <span id="text2" class="text2">彭博專欄作家:蘋果為何害怕宏達電手機 甚至不讓人用?</span> </div> </body> |
老師你好:
請問套用在具有超連結的文字上,可以繼續保有超連結的功能嗎?
感謝老師
我的範例中不就是有一個是加在超連結上的嗎?