這篇將會介紹,不用flash也能讓圖片或文字有漸層的效果。
這篇將會介紹,不用flash也能讓圖片或文字有漸層的效果。
不光是圖片,文字也可以^^
原文網址及Demo:http://medienfreunde.com/lab/innerfade/
加入參考
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.innerfade.js"></script>
加入Script
<script type="text/javascript"> $(document).ready( function(){ $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); }); </script>
//參數介紹
//animationtype: 顯示類型是淡出淡入,還是滑上滑下(slide) (預設是淡入淡出(fade)),
//speed: 淡入淡出的速度,單位毫秒,或是使用關鍵字如 (slow, normal 或 fast)(預設是normal),
//timeout: 動畫間隔時間 (預設是2000毫秒),
//type: 播放物件(圖片)的順序: "sequence", "random" 或是 "random_start" (預設是sequence),
//containerheight: 容器的高度,顯示区域的高度 (預設是auto)
//runningclass: 可以增加class (預設是innerfade)
圖片
<ul id="portfolio"> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html"><img src="images/whizzkids.gif" alt="Whizzkids" /></a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html"><img src="images/km.jpg" alt="Königin Mutter" /></a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html"><img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" /></a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html"><img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" /></a> </li> </ul>
完成