找回密码
当前位置：前端开发者 > jQuery > 正文

前端jQuery实现百叶窗效果

2018-10-09 分类：jQuery 阅读(1734) 评论(0)

手机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

赞(0)
前端开发者 » 前端jQuery实现百叶窗效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论