今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的来实现特效。
HTML代码
这里我们使用socialwrapper来包装每一个需要展示的网站,如下:
- <div class="socialwrapper">
- <div class="social">
- <img id="img" src="img/weibo.png" />
- <div class="desc"><a href="" target="_blank">http://weibo.com
</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:翻转后的颜色
阅读(858) | 评论(0) | 转发(0) |