右下角浮窗&动画效果

2015-07-17 11:07:57

CSS

 1 #goreg {
 2     width: 70px;
 3     position: fixed;
 4     bottom: 20px;
 5     right: 25px; 
 6     z-index: 100; 
 7     opacity:0.4; 
 8     text-align: center;
 9 } 
10 #goreg a {
11     text-decoration:none; 
12     width: 70px;
13     height: 70px;
14     display: inline-block;
15     background-color: #e0e4e5; 
16     padding-top: 20px; 
17     color: black; 
18     line-height:30px; 
19     overflow: hidden;
20 } 
21 #goreg a:hover {
22     background-color: #ccc;
23 }

js

1         var str = '<div id="goreg"><a href="/q2a/register" target="_blank">提醒注册</a></div>';
2         $("body").append(str);
3         $("#goreg a").animate({"width":"90","height":"70"},100);
4         $("#goreg a").animate({"width":"80","height":"70"},100);
5         $("#goreg a").animate({"width":"70","height":"70"},100);
6         $("#goreg a").animate({"width":"75","height":"70"},100);
7         $("#goreg a").animate({"width":"73","height":"70"},100);
8         $("#goreg a").animate({"width":"70","height":"70"},100);

 

posted @ 2015-07-17 11:21  myD  阅读(468)  评论(0)  编辑  收藏  举报