使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
2012-04-10 22:09
896 查看
在线演示
本地下载
今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的jQuery Flip插件来实现特效。
HTML代码
这里我们使用socialwrapper来包装每一个需要展示的网站,如下:<div class="socialwrapper"> <div class="social"> <img id="img" src="img/weibo.png" /> <div class="desc"><a href="http://weibo.com/gbin1" target="_blank">http://weibo.com</a></div> </div> </div>
以上代码中我们包含了执行翻转的元素social,其中包含了logo图片和网站详细介绍。
CSS代码
.socialwrapper{ width:200px; height:200px; float:left; margin:5px; position:relative; cursor:pointer; } .social{ background: #303030; height: 100%; margin: 0px; text-align: center; width:100%; margin: 0px; position:absolute; border: 1px solid #505050; border-radius: 5px 5px 5px 5px; }
上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。
.social:hover { border:1px solid #505050; -moz-box-shadow:0 0 20px #AAA inset; -webkit-box-shadow:0 0 20px #AAA inset; box-shadow:0 0 20px #AAA inset; }
以上代码定义了鼠标悬浮的特效,这里我们使用box-shadow属性来设置边框阴影效果。
.social .desc{ color: #fff; font-size: 20px; height: 200px; line-height: 200px; margin: 0 auto; min-height: 200px; min-width: 200px; text-align: center; width: 200px; float:left; position: absolute; background: #404040; display:none; font-size:14px; font-weight: 600; font-family: "Microsoft Yahei"; padding:0; text-shadow: 2px 2px 1px #606060; }
以上代码定义了详细信息内容,这里使用了text-shadow来定义一个字体的阴影效果。
jQuery代码
$(function(){ $(".social").toggle(function(){ var me = $(this); me.flip({ direction:'lr', speed: 300, color:'#505050', onEnd: function(){ me.find("img").toggle(); me.find(".desc").toggle(); } }); },function(){ var me = $(this); me.flip({ direction:'rl', speed: 300, color:'#303030', onEnd: function(){ me.find("img").toggle(); me.find(".desc").toggle(); } }); }); });
jQuery代码比较简单,调用flip插件的方法,执行翻转效果,并且toggle图片和描述内容。
选项说明:
direction:代表翻转方向,这里是先左向右(Left to Right),然后,右向左(Right to Left)
speed:翻转速度
onBefore, onAnimation, onEnd:分别执行动画开始前,执行一半和结束后的回调函数
content:翻转后的内容
color:翻转后的颜色
具体的选项,请参考:http://lab.smashup.it/flip/
相关文章推荐
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- 操作CSS3过渡使用jQuery创建一个拖放文本效果
- 看着使用three.js制作的网站效果自己用css3写了一个小demo
- 使用Jquery随机删除一个顺序列表中某个子元素的方法,保持效果统一性
- 一个简单的支持排序的双栏列表(使用jquery)
- jQuery Howto: 如何快速创建一个AJAX的"加载"的图片效果
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
- 使用 ASP.NET MVC 创建一个任务列表应用程序
- 使用jQuery和CSS3的全屏搜索效果
- 在jquery用一个按钮实现全选/全不选的效果(attr和prop的区别使用)
- jQuery某网站品牌列表效果
- Android Training - 使用碎片创建一个动态UI(1) - 使用android支持库
- jQuery编程挑战#013:使用jQuery生成图片的水平翻转动画效果
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用
- 使用jQuery插件sidr来创建一个隐藏式的边栏菜单
- 使用jQuery插件创建常规模态窗口登陆效果