使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

• 在线演示1
•  
• 本地下载
 

 

原文地址：http://www.gbtags.com/gb/share/5848.htm

今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表，将使用jQuery的jQuery Flip插件来实现特效。

HTML代码

这里我们使用socialwrapper来包装每一个需要展示的网站，如下：

1. <divclass="socialwrapper">
2. <divclass="social">
3. <imgid="img"src="img/weibo.png"/>
4. <divclass="desc"><ahref="http://weibo.com/gbin1"target="_blank">http://weibo.com</a></div>
5. </div>
6. </div>

 

 

以上代码中我们包含了执行翻转的元素social，其中包含了logo图片和网站详细介绍。

CSS代码

1. .socialwrapper{
2. width:200px;
3. height:200px;
4. float:left;
5. margin:5px;
6. position:relative;
7. cursor:pointer;
8. }
9.  
10. .social{
11. background:#303030;
12. height:100%;
13. margin:0px;
14. text-align: center;
15. width:100%;
16. margin:0px;
17. position:absolute;
18. border:1px solid #505050;
19. border-radius:5px5px5px5px;
20. }

 

上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。

1. .social:hover {
2. border:1px solid #505050;
3. -moz-box-shadow:0020px#AAA inset;
4. -webkit-box-shadow:0020px#AAA inset;
5. box-shadow:0020px#AAA inset;
6. }

 

以上代码定义了鼠标悬浮的特效，这里我们使用box-shadow属性来设置边框阴影效果。

1. .social .desc{
2. color:#fff;
3. font-size:20px;
4. height:200px;
5. line-height:200px;
6. margin:0auto;
7. min-height:200px;
8. min-width:200px;
9. text-align: center;
10. width:200px;
11. float:left;
12. position: absolute;
13. background:#404040;
14. display:none;
15. font-size:14px;
16. font-weight:600;
17. font-family:"Microsoft Yahei";
18. padding:0;
19. text-shadow:2px2px1px#606060;
20. }

 

以上代码定义了详细信息内容，这里使用了text-shadow来定义一个字体的阴影效果。

jQuery代码

1. $(function(){
2. $(".social").toggle(function(){
3. var me = $(this);
4. me.flip({
5. direction:'lr',
6. speed:300,
7. color:'#505050',
8. onEnd:function(){
9. me.find("img").toggle();
10. me.find(".desc").toggle();
11. }
12. });
13. },function(){
14. var me = $(this);
15. me.flip({
16. direction:'rl',
17. speed:300,
18. color:'#303030',
19. onEnd:function(){
20. me.find("img").toggle();
21. me.find(".desc").toggle();
22. }
23. });
24. });
25. });

 

 

jQuery代码比较简单，调用flip插件的方法，执行翻转效果，并且toggle图片和描述内容。

选项说明：

• direction：代表翻转方向，这里是先左向右（Left to Right），然后，右向左（Right to Left）
• speed：翻转速度
• onBefore, onAnimation, onEnd：分别执行动画开始前，执行一半和结束后的回调函数
• content：翻转后的内容
• color：翻转后的颜色

原文地址：http://www.gbtags.com/gb/share/5848.htm