前端jQuery实现百叶窗效果

手机web前端开发教程 前端开发教程 传智播客前端开发教程百度云

要实现把几个图片叠在一起,除了position :absolute ,还得用到z-index 值的设定,没想到今天css实现比较顺利很快就出来了四张图片层叠的效果

接下来设置动作,其实感觉这个效果应该是有规律可言,想了一会我没分析出来,为了保持兴趣,就先简单粗暴了,直接列举并实现了各个按钮的功能

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <style type=”text/css”>
        body,
        img {
            margin: 0;
            padding: 0;
        }
        #content {
            width: 1084px;
            height: 525px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        img {
            display: inline;
            position: absolute;
        }
        #i1 {
            width: 844px;
            height: 525px;
            z-index: 400;
        }
        #i2 {
            width: 904px;
            height: 525px;
            z-index: 300;
        }
        #i3 {
            width: 964px;
            height: 525px;
            z-index: 200;
        }
        #q1 {
            left: 844px;
            z-index: 400;
        }
        #q2 {
            left: 904px;
            z-index: 400;
        }
        #q3 {
            left: 964px;
            z-index: 400;
        }
        #q4 {
            left: 1024px;
            z-index: 400;
        }
        #q1,
        #q2,
        #q3 {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
        }
        #q1,
        #q2,
        #q3,
        #q4 {
            cursor: pointer;
            ]
        }
    </style>
    <script src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
        $(document).ready(function () {
            $(“#q4”).click(function () {
                $(“#q1”).stop(true, true).animate({ left: “0” }, 400);
                $(“#q2”).stop(true, true).animate({ left: “60px” }, 400);
                $(“#q3”).stop(true, true).animate({ left: “120px” }, 400);
                //$(“#small img:lt($num)”).animate({left:”-844px”},1000);
                $(“#i1,#i2,#i3”).stop(true, true).animate({ left: “-844px” }, 400);
            });
            $(“#q1”).click(function () {
                var $num3 = parseInt($(“#q3”).css(“left”));
                var $num2 = parseInt($(“#q2”).css(“left”));
                var $num1 = parseInt($(“#q1”).css(“left”));
                if ($num1 < 844) {
                    if ($num3 < 964 && $num2 < 904) {
                        $(“#q1”).stop(true, true).animate({ left: “844” }, 400);
                        $(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
                        $(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
                        $(“#i1,#i2,#i3”).stop(true).animate({ left: “0” }, 400);
                    }
                    if ($num3 >= 964 && $num2 < 904) {
                        $(“#q1”).stop(true, true).animate({ left: “844” }, 400);
                        $(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
                        $(“#i1,#i2”).stop(true, true).animate({ left: “0” }, 400);
                    }
                    if ($num3 >= 964 && $num2 >= 904) {
                        $(“#q1”).stop(true, true).animate({ left: “844” }, 400);
                        $(“#i1”).stop(true, true).animate({ left: “0” }, 400);
                    }
                } else {
                    $(“#q1”).stop(true, true).animate({ left: “0” }, 400);
                    $(“#i1”).stop(true, true).animate({ left: “-844” }, 400);
                }
            });
            $(“#q2”).click(function () {
                var $num3 = parseInt($(“#q3”).css(“left”));
                var $num2 = parseInt($(“#q2”).css(“left”));
                if ($num2 < 904) {
                    if ($num3 < 964) {
                        $(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
                        $(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
                        $(“#i2,#i3”).stop(true, true).animate({ left: “0” }, 400);
                    } else {
                        $(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
                        $(“#i2”).stop(true, true).animate({ left: “0” }, 400);
                    }
                } else {
                    $(“#q1”).stop(true, true).animate({ left: “0” }, 400);
                    //$(“#small img:lt($num)”).animate({left:”-844px”},1000);
                    $(“#i1”).stop(true, true).animate({ left: “-844px” }, 400);
                }
            });
            $(“#q3”).click(function () {
                var $num3 = parseInt($(“#q3”).css(“left”));
                if ($num3 < 964) {
                    $(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
                    $(“#i3”).stop(true).animate({ left: “0” }, 400);
                } else {
                    $(“#q1”).stop(true, true).animate({ left: “0px” }, 400);
                    $(“#q2”).stop(true, true).animate({ left: “60px” }, 400);
                    $(“#i1,#i2”).stop(true, true).animate({ left: “-844” }, 400);
                }
            });
        })
    </script>
</head>
<body>
    <div id=”content”>
        <div id=”big”>
            <img src=”http://ww3.sinaimg.cn/large/69eb024egw1eeues3e0vvj20sg0eltak.jpg” id=”i1″ />
            <img src=”http://ww2.sinaimg.cn/large/69eb024egw1eeuesc413yj20sg0elgq8.jpg” id=”i2″ />
            <img src=”http://ww3.sinaimg.cn/large/69eb024egw1eeuese6lymj20sg0eldkc.jpg” id=”i3″ />
            <img src=”http://ww2.sinaimg.cn/large/69eb024ejw1eeueq6q5ykj20sg0el78z.jpg” id=”i4″ />
        </div>
        <div id=”small”>
            <img src=”http://ww4.sinaimg.cn/large/69eb024ejw1eeuesf2ea1j201o0emmwx.jpg” id=”q1″ />
            <img src=”http://ww1.sinaimg.cn/large/69eb024ejw1eeuesfmngjj201o0ema9u.jpg” id=”q2″ />
            <img src=”http://ww2.sinaimg.cn/mw690/69eb024ejw1eeuesg6ma4j201o0em742.jpg” id=”q3″ />
            <img src=”http://ww4.sinaimg.cn/large/69eb024egw1eeues0qtnpj201o0em742.jpg” id=”q4″ />
        </div>
    </div>
</body>
</html>

实现效果之后,由于单纯用了animate 所以导致在一个按钮边一直点的话,会对之前的动画产生延迟,就是比如2 ,那么产生1向左走的效果,但如果在这个过程中一直在点2,则1 则会减缓速度,随着点击一弹一弹的向左走,这里需要添加stop(true,true)这个语句在每一animate之前, 使得再次触发事件的时候,立刻将当前动作完成。

还有一个之前遇到的CSS小问题,我明明对元素设置了margin : 0 auto ; 可是不居中的问题,上网搜了下,http://www.jb51.net/css/37662.html,这个帖子介绍

margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应居中,所以使用之前设置宽度即可~

兼容性的背景透明 http://www.cnblogs.com/luluping/archive/2010/10/12/1848360.html[code].transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}[/code]

vscode开发前端教程 web前端开发教程下载 html5前端开发教程pdf

» 本文来自:前端开发者 » 《前端jQuery实现百叶窗效果》
» 本文链接地址:https://www.rokub.com/6049.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!