js滑动提示效果

12/6/2015来源:Javascript教程人气:930

js代码 漂亮的动画效果;在靠右上角:背景颜色为红,字体颜色为白色  滑动 变大 上移  缓慢渐变消失

 1     function tishi() {
 2 
 3             $("#tishi").attr("style", "border: 1px solid #000;position: absolute; z-index: 10; width:200px; height: 30px;color:white;background-color:Red;border-radius:25px;-moz-border-radius:25px; text-align:center;left:70%; top:10%; display: none");
 4 
 5             $("#tishi").show().animate({
 6                 width: '300px',
 7                 height: '37px',
 8                 top: '-=10px'
 9               , opacity: '0.8'
10             }, "slow");
11             $("#tishi").show().animate({
12                 top: '-=10px'
13               , opacity: '0.6'
14 
15             }, "slow");
16             $("#tishi").show().animate({
17                 top: '-=10px'
18               , opacity: '0.4'
19             }, "slow");
20             $("#tishi").show().animate({
21                 top: '-=10px'
22               , opacity: '0.2'
23             }, "slow");
24             $("#tishi").show().animate({
25                 top: '-=10px'
26                , opacity: '0.0'
27             }, "slow");
28         }

前台代码,写在body里:

1 <div id="tishi" style="border: 1px solid #000;position: absolute; z-index: 10; width:200px; height: 30px;color:white;background-color:Red;border-radius:25px;
2 -moz-border-radius:25px; /* 老的 Firefox */text-align:center;left:70%; top: 10%; display: none">请完善信息</div>