Chinaunix首页 | 论坛 | 博客
  • 博客访问: 191741
  • 博文数量: 95
  • 博客积分: 2383
  • 博客等级: 大尉
  • 技术积分: 1135
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-09 15:14
文章分类
文章存档

2012年(84)

2011年(11)

我的朋友
最近访客

分类: Java

2012-04-10 21:53:03

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

 

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

HTML代码

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


点击(此处)折叠或打开

  1. <div class="socialwrapper">
  2.     <div class="social">
  3.         <img id="img" src="img/weibo.png" />
  4.         <div class="desc"><a href="" target="_blank">http://weibo.com

  •     </div>
  • </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. .social{
    10.     background: #303030;
    11.     height: 100%;
    12.     margin: 0px;
    13.     text-align: center;
    14.     width:100%;
    15.     margin: 0px;
    16.     position:absolute;
    17.     border: 1px solid #505050;
    18.     border-radius: 5px 5px 5px 5px;
    19. }
    上面的CSS定义了.socialwrapper和.social的样式定义。这里我们使用圆角效果。

    点击(此处)折叠或打开

    1. .social:hover {
    2.     border:1px solid #505050;
    3.     -moz-box-shadow:0 0 20px #AAA inset;
    4.     -webkit-box-shadow:0 0 20px #AAA inset;
    5.     box-shadow:0 0 20px #AAA inset;
    6. }
    以上代码定义了鼠标悬浮的特效,这里我们使用box-shadow属性来设置边框阴影效果。

    点击(此处)折叠或打开

    1. .social .desc{
    2.     color: #fff;
    3.     font-size: 20px;
    4.     height: 200px;
    5.     line-height: 200px;
    6.     margin: 0 auto;
    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: 2px 2px 1px #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:翻转后的颜色
    阅读(829) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~