浅析Web中的Tip组件实现

Tip组件下载

成都创新互联公司是一家专注于网站设计、成都网站制作与策划设计,明山网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:明山等地区。明山做网站价格咨询:13518219792

Tip是页面设计中最常见不过的组件，但要从无到有实现一个优秀的tip组件并不是一件容易的事情。本文介绍了本人编写的tip组件，并提供源码供下载。您可以直接使用，但希望您能保留代码中的作者注释。

本tip组件具有以下特性：

1、兼容各主流浏览器。

2、自适应高度。

3、有上方向和下方向两种tip。

4、只用一张背景图。

5、在现代浏览器中具有阴影和圆角效果。

6、可扩展性：可以通过扩展类来调整tip上小箭头的位置和内容的宽度。

相信读者结合源码和组件展示效果能很快领会以上所列各点的含义，这里就不赘诉了。:)

本组件展示效果如下图所示：

***粘出源码如下：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

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

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
如果有问题，可以反馈给我们。如果有问题，可以 
  
  
  
  

  
  
  
  
    反馈
  
  
  
  
    
  
  
  
  
        
  
  
  
  
        
  
  
  
  
            
  
  
  
  
            请问有什么问题要反馈吗？ 不再显示