赞助商翻墙jQuery & CSS 九宫格卡片翻转效果

赞助商翻墙jQuery & CSS 九宫格卡片翻转效果128
使用jQuery和CSS翻转-赞助商墙使用步骤
<div title="Click to flip" class="sponsor">    <div class="sponsorFlip">        <img alt="More about google" src="img/sponsors/google.png">    </div>     <div class="sponsorData">        <div class="sponsorDescription">            The company that redefined web search.        </div>        <div class="sponsorURL">            <a href="http://www.google.com/">http://www.google.com/ </a>        </div>    </div></div>
最外层div包含两个额外的div元素。第一个 sponsorFlip -包含公司logo。此元素上的每一次点击启动导致的翻转效果。更有趣的是sponsorData格。它隐藏与显示:没有 CSS规则,但到jQuery访问。这样我们就可以通过前端的描述和赞助公司的网址。翻转动画完成后,此div的内容动态插入到sponsorFlip。第2步 - CSS代码被分为两个部分。一些类省略了清晰度。你可以看到所有的演示所使用的样式,在下载存档styles.css。styles.css的 - 第1部分
body{    /* Setting default text color, background and a font stack */    font-size:0.825em;    color:#666;    background-color:#fff;    font-family:Arial, Helvetica, sans-serif;} .sponsorListHolder{    margin-bottom:30px;} .sponsor{    width:180px;    height:180px;    float:left;    margin:4px;     /* Giving the sponsor div a relative positioning: */    position:relative;    cursor:pointer;} .sponsorFlip{    /*  The sponsor div will be positioned absolutely with respect        to its parent .sponsor div and fill it in entirely */     position:absolute;    left:0;    top:0;    width:100%;    height:100%;    border:1px solid #ddd;    background:url("img/background.jpg") no-repeat center center #f9f9f9;} .sponsorFlip:hover{    border:1px solid #999;     /* CSS3 inset shadow: */    -moz-box-shadow:0 0 30px #999 inset;    -webkit-box-shadow:0 0 30px #999 inset;    box-shadow:0 0 30px #999 inset;}
我们正在使用CSS3插图框阴影模仿内阴影效果,你可能很熟悉,从Photoshop。写插图的阴影只能工作在Firefox,Opera和Chrome浏览器的最新版本,但主要是一种视觉上的增强,在所有浏览器中的页面完全可用。styles.css的 - 第2部分
.sponsorFlip img{    /* Centering the logo image in the middle of the .sponsorFlip div */     position:absolute;    top:50%;    left:50%;    margin:-70px 0 0 -70px;} .sponsorData{    /* Hiding the .sponsorData div */    display:none;} .sponsorDescription{    font-size:11px;    padding:50px 10px 20px 20px;    font-style:italic;} .sponsorURL{    font-size:10px;    font-weight:bold;    padding-left:20px;} .clear{    /* This class clears the floats */    clear:both;}
如前所述,的sponsorData格不是为了观赏,所以它是隐藏与显示:其目的是为了只存储数据以后提取的jQuery和显示结束时的翻转动画。第3步 - jQuery翻转的jQuery插件需要的jQuery库和jQuery UI的。因此,包括那些在页面后,我们可以移动,编写代码,将带给我们的赞助商墙。script.js
$(document).ready(function(){    /* The following code is uted once the DOM is loaded */     $('.sponsorFlip').bind("click",function(){         // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):         var elem = $(this);         // data('flipped') is a flag we set when we flip the element:         if(elem.data('flipped'))        {            // If the element has already been flipped, use the revertFlip method            // defined by the plug-in to revert to the default state automatically:             elem.revertFlip();             // Unsetting the flag:            elem.data('flipped',false)        }        else        {            // Using the flip method defined by the plugin:             elem.flip({                direction:'lr',                speed: 350,                onBefore: function(){                    // Insert the contents of the .sponsorData div (hidden                    // from view with display:none) into the clicked                    // .sponsorFlip div before the flipping animation starts:                     elem.html(elem.siblings('.sponsorData').html());                }            });             // Setting the flag:            elem.data('flipped',true);        }    }); });

也许你还喜欢