淺析Web中的Tip組件實現
作者：andycja
Tip是頁面設計中最常見不過的組件，但要從無到有實現一個優秀的tip組件并不是一件容易的事情。本文介紹了本人編寫的tip組件，并提供源碼供下載。
Tip是頁面設計中最常見不過的組件，但要從無到有實現一個優秀的tip組件并不是一件容易的事情。本文介紹了本人編寫的tip組件，并提供源碼供下載。您可以直接使用，但希望您能保留代碼中的作者注釋。
本tip組件具有以下特性：
1、兼容各主流瀏覽器。
2、自適應高度。
3、有上方向和下方向兩種tip。
4、只用一張背景圖。
5、在現代瀏覽器中具有陰影和圓角效果。
6、可擴展性：可以通過擴展類來調整tip上小箭頭的位置和內容的寬度。
相信讀者結合源碼和組件展示效果能很快領會以上所列各點的含義，這里就不贅訴了。:)
本組件展示效果如下圖所示：
***粘出源碼如下：
- <!--
- 作者：andycja
- http://www.cnblogs.com/andycja/
- -->
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Tip</title>
- <style type="text/css">
- body{font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#505050;}
- /*tip*/
- .ys_tip .arrow_up,.ys_tip .arrow_down,.ys_tip .btn_close{background:url("ys_tip.gif") no-repeat scroll transparent;}
- .ys_tip{position:absolute;z-index:99;}
- .ys_tip .arrow_up{font-size:4px;display:block;width:12px;height:7px;position:relative;top:1px;z-index:99;}/*font-size:4px; for ie6*/
- .ys_tip .arrow_down{font-size:4px;display:block;width:12px;height:7px;position:relative;bottom:1px;background-position:-16px 0;}
- .ys_tip .content{zoom:1;position:relative;padding:8px 16px;border:1px solid #BEB49C;background-color:#fefbe4;
- -webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:0px 0px 2px #555;-moz-box-shadow:0px 0px 2px #555;}/*fzoom:1; for ie6*/
- .ys_tip .btn_close{position:absolute;right:3px;top:4px;width:12px;height:12px;background-position:-48px 0;}
- .ys_tip .btn_close:hover{background-position:-32px 0;}
- .ys_tip .not_show{text-decoration:underline;}
- /*feedback tip*/
- .feedback{position:relative;}
- .ys_tip_feedback{left:-108px;top:16px;width:142px;}
- .ys_tip_feedback .arrow_up{margin-left:113px;}
- /*delivery_fee tip*/
- .delivery_fee{zoom:1;position:relative;}
- .ys_tip_delivery_fee{left:-108px;bottom:15px;width:199px;}
- .ys_tip_delivery_fee .arrow_down{margin-left:113px;}
- </style>
- </head>
- <body>
- <div style="height:179px;margin-top:50px;">
- 如果有問題，可以反饋給我們。如果有問題，可以
- <span class="feedback">
- <a href="javascript:void 0;">反饋</a>
- <div class="ys_tip ys_tip_feedback">
- <span class="arrow_up"></span>
- <div class="content clearfix">
- <a class="btn_close" href="javascript:void 0;" id="closeFeedbackTip"></a>
- 請問有什么問題要反饋嗎？ <a href="javascript:void 0;" class="not_show">不再顯示</a>
- </div>
- </div>
- </span>
- 給我們。
- </div>
- <div>
- 請問關于運費的問題。請問關于運費的問題。請問關于
- <span class="delivery_fee">
- <a href="javascript:void 0;">運費</a>
- <div class="ys_tip ys_tip_delivery_fee">
- <div class="content clearfix">
- <a class="btn_close" href="javascript:void 0;"></a>
- 運費不受油價影響，也不受時間影響，只跟路程相關。計算公式如下：a*b=c <a href="javascript:void 0;" class="not_show" id="notShowFeedbackTip">不再顯示</a>
- </div>
- <span class="arrow_down"></span>
- </div>
- </span>
- 的問題。
- </div>
- </body>
- </html>
原文：http://www.cnblogs.com/andycja/archive/2011/12/28/2304236.html
【編輯推薦】
責任編輯：陳貽新
來源：
andycja的博客
