前端开发 翻牌效果

前端高级开发视频|前端开发做单个页面|前端开发用低压还是标压处理器

思路：
最基本的思路：点击一张图片时，该张图片就要隐藏掉，把下方的图片显示出来。
效果：翻牌的效果，以图片中轴为基准，实现旋转的翻牌。
方法：
1、定义一个 class=”draw” 的 div 容器，该 div 里面包含一个有4个 li 的 ul 列表。（你喜欢几个都行，计算好距离就好。）
2、每个 li 都有自己的 id ，里面再定义一个 div 容器，起一个统一的 class ，在这里我取 class=”default”，然后在这个 div 之后，再定义一个 img ，img引入图片。
3、设置每个元素的 css 属性。本例子中，最外面的父容器 .draw 的宽度为 width:1000px; 高度为 height:400px;
4、每个 li 宽度为 400px; 高度为266px; 且要 左浮动：float：left； 设置外边距为： margin：0 25px; 当然还要加上： display:inline; position:relative; cursor:pointer。
5、给每个 li 里面的 div 都设置一个背景图片：background：url(……..) no-repeat;
li 里面的 div 的宽度也为：400px; 高度为：266px;
这里的 div 使用绝对定位：position:absolute; 设置 left：0；z-index:2;
要注意的是：这里的 left 要设置为 0；
6、给 li 里面的 img 标签设置 width:0; height:266px; position:absolute; left:200px; z-index:1;

注意：第6点中的 left:200px; 是通过400/2得出来的。这个200px的作用就是，当图片显示时，在图片的宽度变成400px的过程中，将图片从 left:200px 移动到 left:0 的位置，就有一个
图片是从中间往两边伸展的效果了。这才是最根本的。

到这里，css 就设置完了。附上完整的css代码：

[code].draw{ background-color:#green; border-radius:5px; width:1000px; height:400px; margin:0 auto;}
.draw ul{padding:22px 0;}
.draw ul li{width:400px; height:310px; margin:0 50px; float:left; display:inline; position:relative; cursor:pointer;}
.draw ul li .default{ width:400px; height:266px; position:absolute; left:0; z-index:2;}
.draw ul li#gt1 .default{background:url(../img/1.jpg) no-repeat;}
.draw ul li#gt2 .default{background:url(../img/2.jpg) no-repeat;}
.draw ul li#gt3 .default{background:url(../img/3.jpg) no-repeat;}
.draw ul li#gt4 .default{background:url(../img/4.jpg) no-repeat;}
.draw ul li img{ position:absolute; left:200px; width:0; height:266px; z-index:1;}[/code]

html代码：

[code]<div class=”draw”>
<ul>
<li id=”gt1″><div class=”default”></div><img alt=”” src=”img/img1.jpg” /></li>
<li id=”gt2″><div class=”default”></div><img alt=”” src=”img/img2.jpg” /></li>
<li id=”gt3″><div class=”default”></div><img alt=”” src=”img/img3.jpg” /></li>
<li id=”gt4″><div class=”default”></div><img alt=”” src=”img/img4.jpg” /></li>
</ul>
</div>[/code]

由于是用 jquery 写的，js代码就两行，如下：

[code]$(function(){
$(‘.draw ul li’).click(function(){
$(‘.default’,this).animate({width:0, left:300},200);
$(‘img’,this).animate({width:400,left:0},300);
});
});[/code]

到这里，整个过程就结束了。
欢迎拍砖。

附上完整的运行代码：

代码片段 1

web前端开发页面大小|前端页面开发语言|前端页面开发相关书籍