前端高级开发视频|前端开发做单个页面|前端开发用低压还是标压处理器
思路：
最基本的思路：点击一张图片时，该张图片就要隐藏掉，把下方的图片显示出来。
效果：翻牌的效果，以图片中轴为基准，实现旋转的翻牌。
方法：
1、定义一个 class=”draw” 的 div 容器，该 div 里面包含一个有4个 li 的 ul 列表。(你喜欢几个都行，计算好距离就好。)
2、每个 li 都有自己的 id ，里面再定义一个 div 容器，起一个统一的 class ，在这里我取 class=”default”，然后在这个 div 之后，再定义一个 img ，img引入图片。
3、设置每个元素的
注意：第6点中的 left:200px; 是通过400/2得出来的。这个200px的作用就是，当图片显示时，在图片的宽度变成400px的过程中，将图片从 left:200px 移动到 left:0 的位置，就有一个
图片是从中间往两边伸展的效果了。这才是最根本的。
到这里，
[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]
[code]
[/code]
由于是用
[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
/p>
翻牌效果
.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(/data/attachment/album/11/15/004225fb4lw4zz91zw7bbw.jpg) no-repeat;
}
.draw ul li#gt2 .default {
background: url(/data/attachment/album/11/15/004228cip9ryvgovxigrxg.jpg) no-repeat;
}
.draw ul li#gt3 .default {
background: url(/data/attachment/album/11/15/004227bf1rmg1f1mhrgd1r.jpg) no-repeat;
}
.draw ul li#gt4 .default {
background: url(/data/attachment/album/11/15/004226x0muttuvrmzmlwu0.jpg) no-repeat;
}
.draw ul li img {
position: absolute;
left: 200px;
width: 0;
height: 266px;
z-index: 1;
}
$(function () {
$(‘.draw ul li’).click(function () {
$(‘.default’, this).animate({ width: 0, left: 300 }, 200);
$(‘img’, this).animate({ width: 400, left: 0 }, 300);
});
});
