效果图

显示3秒,透明度从1到0

实现原理:z-index属性,opacity属性,jquery动画

1.定义css

1 /*** 悬浮提示 ***/  2         .tips {
    3             position: absolute;  4             font-size: 12px;  5             background: black;  6             z-index: 2;  7             overflow: hidden;  8             filter: alpha(opacity=50);  9             opacity: 0.5; 10             top: 0; 11             -moz-border-radius: 7px; 12             -webkit-border-radius: 7px; 13             border-radius: 5px; 14             background: black; 15             color: white; 16             opacity: 0.7; 17             left: 20%; 18             top: 80%; 19 } 20         .tips span {
   21             position: absolute; 22             text-align: center; 23             overflow: hidden; 24             width: 200px; 25             height: 20px; 26 }

2.定义显示的js

1 $(".tips").remove();  2             var tipsDiv = document.createElement('div');  3  4             tipsDiv.className = "tips";  5             tipsDiv.style.width = 200 + 'px';  6             tipsDiv.style.height = 20 + 'px';  7             document.body.appendChild(tipsDiv);  8             var tipsSpan = document.createElement('span');  9 10             tipsDiv.appendChild(tipsSpan); 11             $(".tips>span").html(content); 12             $(".tips").show(); 13             $(".tips").animate({
   14                 opacity : "1" 15 16             }, 0).animate({
   17                 opacity : "0" 18             }, 3000);