360度旋转tab标签切换

1、新建html文档。

2、书写hmtl代码。

<section class="container">

  <div class="clearfix">

    <article class="main">

      <div id="flipbox">Hello! I'm a flip-box! :)</div>

      <div id="flipPad"> <a href="" class="left" >left</a> <a href="" class="top" >top</a> <a href="" class="bottom" rel="tb">bottom</a> <a href="" class="right" >right</a> <a href="" class="revert">revert!</a> </div>

    </article>

  </div>

</section>

3、书写css代码。

@font-face { font-family: 'ChunkFive Regular'; src: url('Chunkfiv.eot'); src: local('ChunkFive Regular'), local('ChunkFive'), url('Chunkfiv.txt') format('woff'), url('Chunkfiv.svg') format('svg'), url('Chunkfiv.otf') format('opentype'); }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

body { background-color: #eaf1f4; font-size: 67.5%; font-family: Helvetica, Tahoma, Verdana, sans-serif; }

a { color: #1e90ff; }

.container { width: 900px; margin: 0 auto; }

.container header { font-family: 'ChunkFive Regular', Arial, sans-serif; font-size: 6em; color: #527699; margin: 25px 0; text-shadow: 2px 2px 1px #aabfd4; }

.container header .subtitle { font-size: 0.3em; color: #aabfd4; height: 100%; vertical-align: top; padding-left: 15px; text-shadow: none; }

.container header .subtitle .version { font-size: 0.75em; font-family: Helvetica, Tahoma, Verdana, sans-serif; padding-left: 15px; vertical-align: top; }

.container header div.aboutMe { font: 12px/15px Helvetica, Tahoma, Verdana, sans-serif; text-shadow: 1px 1px 1px #ffffff; margin-top: 5px; }

.container article.main { float: left; width: 70%; }

.container article.main p { font-size: 1.3em; color: #999999; margin: 5px 0 20px; }

.container article.main p pre { font-family: monospace; font-size: 15px; margin: 10px; display: block; color: #333333; }

.container article.main .usage { margin-top: 50px; }

.container aside { float: right; width: 25%; }

.container aside #dependencies { margin-bottom: 25px; }

.container aside #license { font-size: 1.1em; color: #666666; margin-bottom: 25px; }

.container aside #compat { font-size: 1.1em; color: #666666; margin-bottom: 25px; }

.container aside #thanksTo { margin-bottom: 25px; font-size: 1.1em; color: #999999; line-height: 1.5em; }

.container aside #thanksTo .others { color: #1e90ff; }

.container aside #notes { color: #999999; font-size: 0.9em; line-height: 1.5em; margin-bottom: 25px; }

.container footer { clear: both; margin: 25px 0; }

.container h3 { font-family: 'ChunkFive Regular', Tahoma, Helvetica; font-size: 2em; color: #aabfd4; font-weight: normal; text-transform: uppercase; padding-top: 20px; text-shadow: 1px 1px 1px #ffffff; }

.container ul.options strong { font-family: monospace; font-size: 1.2em; }

.container li { list-style: none; font-size: 1.2em; margin: 7px 0; }

.container li strong { display: block; }

#flipbox { width: 500px; height: 200px; line-height: 200px; background-color: #ff9000; font-family: 'ChunkFive Regular', Tahoma, Helvetica; font-size: 2.5em; color: #ffffff; text-align: center; }

#flipPad { margin: 15px 0; width: 500px; text-align: center; }

#flipPad a { padding: 5px 15px; background: #1e90ff; border: 2px solid #1e90ff; border-radius: 2px; color: #ffffff; font-weight: bold; text-decoration: none; font-size: 1em; font-family: Helvetica, Tahoma, Verdana, sans-serif; line-height: 30px; height: 30px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 1px 1px 2px #999999; -webkit-box-shadow: 1px 1px 2px #999999; -webkit-transition-duration: 1s; }

#flipPad a:hover { background-color: #ff9000; border: 2px solid #ff9000; }

#flipPad .revert { background-color: #ff9000; border: 2px solid #ff9000; display: none; }

4、书写并添加js代码。

<script src="js/jquery-ui-1.7.2.custom.min.js"></script>

<script src="js/jquery.flip.min.js"></script>

<script>

$(function(){

$("#flipPad a:not(.revert)").bind("click",function(){

var $this = $(this);

$("#flipbox").flip({

direction: $this.attr("rel"),

color: $this.attr("rev"),

content: $this.attr("title"),//(new Date()).getTime(),

onBefore: function(){$(".revert").show()}

})

return false;

});

$(".revert").bind("click",function(){

$("#flipbox").revertFlip();

return false;

});

var changeMailTo = function(){

var mArr = ["@","smashup","luca",".it"];

$("#email").attr("href","mailto:"+mArr[2]+mArr[0]+mArr[1]+mArr[3]);

}

$(".downloadBtn").click(function(){

pageTracker._trackPageview('download_flip');

});

setTimeout(changeMailTo,500);

});

</script>

5、代码整体结构。

6、查看效果。