右下角浮窗&动画效果

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