TShopping

 找回密碼
 註冊
搜索
查看: 1339|回復: 4

[教學] 濾鏡變換連結說明

[複製鏈接]
發表於 2008-9-23 20:15:56 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
步驟一、複製程式碼至<head></head>之間
  1. <style type="text/css">
  2. .box {font-size:9pt; font-family:tahoma; color:#000000; border:1 solid #99CC00; background:#C1E7AB; padding:5;}
  3. </style>
  4. <script language="JScript">
  5. /******** http://galaxy.channeli.net/bio028/ ********/
  6. var n = (document.layers) ? 1:0;
  7. var ie = (document.all) ? 1:0;
  8. function overTip(boxObj) {
  9. if (ie) {
  10. boxObj.style.visibility = "visible";
  11. boxObj.filters.item(0).stop();
  12. }
  13. }
  14. function outTip(boxObj) {
  15. if (ie) {
  16. boxObj.style.visibility = "visible";
  17. boxObj.filters.item(0).transition = 23;
  18. boxObj.filters.item(0).apply();
  19. boxObj.style.visibility = "hidden";
  20. boxObj.filters.item(0).play();
  21. }
  22. }
  23. </script>
複製代碼

步驟二、複製到網頁<body></body>之間
  1. <span class="tipElm" onMouseOver="overTip(kiss)" onMouseOut="outTip (kiss)">
  2. <a href="#">
  3. 將重複滑鼠移至這裡看效果</a>
  4. </span>
  5. <div id="kiss" class="box" style="position: absolute; z-index: 20; width: 259; filter: revealTrans(duration=1); visibility: hidden; left: 16; top: 130; height: 68">
  6. 這裡是說明方塊.除了文字來可以放圖檔喔!<img border="0" src="img/logo-2.gif" width="88" height="31">
  7. </div>           
複製代碼

修改事項:
  • 步驟一用CSS設定說明區塊的文字大小font-size:9pt;文字字型 font-family:tahoma;文字色彩 color:#000000; 框線色彩border:1 solid #99CC00; 背景色彩background:#C1E7AB; 區塊四邊空白padding:5
    步驟二duration=1濾鏡速度.數值越大速度越慢.不建議修改
  • 增加連結和步驟二相同但必須用不同的ID名稱.例如以下橘色部分
    <span class="tipElm">
    <a href="#">
    將重複滑鼠移至這裡看效果</a>
    </span>
    <div id="kiss" class="box" style="position: absolute; z-index: 20; width: 259; filter: revealTrans(duration=1); visibility: hidden; left: 16; top: 130; height: 68">
    這裡是說明方塊.除了文字來可以放圖檔喔!</div>

 

臉書網友討論
發表於 2012-3-1 00:46:11 | 顯示全部樓層
樓上的稍等啦  

版主招募中

發表於 2012-7-30 00:45:28 | 顯示全部樓層
嘿嘿  


發表於 2012-7-30 00:52:02 | 顯示全部樓層
好人一個 推推


發表於 2013-6-12 03:51:33 | 顯示全部樓層
不错, 了解一下。


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 03:50 , Processed in 0.062922 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表