开发者社区开发与运维文章正文

右下角浮窗&动画效果

2015-07-17 1048

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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.

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 }

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