前端开发 翻牌效果

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

思路:
最基本的思路:点击一张图片时,该张图片就要隐藏掉,把下方的图片显示出来。
效果:翻牌的效果,以图片中轴为基准,实现旋转的翻牌。
方法:
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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>翻牌效果</title>
    <style>
        .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(http://www.w3cfuns.com/data/attachment/album/201411/15/004225fb4lw4zz91zw7bbw.jpg) no-repeat;
        }
        .draw ul li#gt2 .default {
            background: url(http://www.w3cfuns.com/data/attachment/album/201411/15/004228cip9ryvgovxigrxg.jpg) no-repeat;
        }
        .draw ul li#gt3 .default {
            background: url(http://www.w3cfuns.com/data/attachment/album/201411/15/004227bf1rmg1f1mhrgd1r.jpg) no-repeat;
        }
        .draw ul li#gt4 .default {
            background: url(http://www.w3cfuns.com/data/attachment/album/201411/15/004226x0muttuvrmzmlwu0.jpg) no-repeat;
        }
        .draw ul li img {
            position: absolute;
            left: 200px;
            width: 0;
            height: 266px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class=”draw”>
        <ul>
            <li id=”gt1″>
                <div class=”default”></div>
                <img alt=”” src=”http://www.w3cfuns.com/data/attachment/album/201411/15/004231ani3mdginmmgef13.jpg” />
            </li>
            <li id=”gt2″>
                <div class=”default”></div>
                <img alt=”” src=”http://www.w3cfuns.com/data/attachment/album/201411/15/004233zu78apz7s70oi79i.jpg” />
            </li>
            <li id=”gt3″>
                <div class=”default”></div>
                <img alt=”” src=”http://www.w3cfuns.com/data/attachment/album/201411/15/004235mi5i0iiei99e5vha.jpg” />
            </li>
            <li id=”gt4″>
                <div class=”default”></div>
                <img alt=”” src=”http://www.w3cfuns.com/data/attachment/album/201411/15/004238z1annq1ajm141nni.jpg” />
            </li>
        </ul>
    </div>
    <script src=”http://f3.v.veimg.cn/f2e/gallery/jquery/1.9.1/jquery.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            $(‘.draw ul li’).click(function () {
                $(‘.default’, this).animate({ width: 0, left: 300 }, 200);
                $(‘img’, this).animate({ width: 400, left: 0 }, 300);
            });
        });
    </script>
</body>
</html>

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

» 本文来自:前端开发者 » 《前端开发 翻牌效果》
» 本文链接地址:https://www.rokub.com/4861.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!