图片滑动缩小与放大

最新推荐文章于 2021-05-30 23:06:40 发布
原创最新推荐文章于 2021-05-30 23:06:40 发布 · 541 阅读
0 ·
CC 4.0 BY-SA版权
项目专栏收录该内容
9 篇文章
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <title> CSS+jQuery动画效果 </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="铁锚">
    <style>
        body{
            z-index: 0;
            width: 100%;
        }
        .current{
            position: absolute;


        }
        .pages{
            position: absolute;
        }
        .page1{

            z-index: 1;
            width: 22%;
            height: 22%;
            top: 10%;
            margin-right: 5px;
            left: 15%;
            margin-bottom: 5px;
        }
        .page2{

            z-index: 2;
            width: 22%;
            height: 22%;
            float: left;
            left: 38%;
            top: 10%;
            margin-right: 5px;
        }
        .page3{

            width: 22%;
            height: 22%;
            left: 61%;
            float: left;
            top: 10%;
            margin-right: 5px;
        }
        .page4{

            width: 22%;
            height: 22%;
            float: left;
            top: 34%;
            left: 15%;
            margin-right: 5px;
        }
        .page5{float: left;
            z-index: 5;
            top: 34%;
            left: 38%;
            margin-right: 5px;
            width: 22%;
            height: 22%;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
// 增长 
            function increase($div,e){
                var style = $div.attr("style");
                $div.addClass("current").attr("styleold",style);
// 
                $div.stop();
                $div.animate({
                    opacity:0.9,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },200)
                        .animate({
                            opacity:1.0
                        },30);

                e.stopPropagation();
                return false;
            };
// 还原 
            function resize(e){
// 所有的都移除 
                var $page1 = $(".current.page1") ;
                $page1.stop();
                $page1.animate({
                    opacity:1.0,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },6,null,function(){
                    $page1.removeClass("current").attr("style","");
                });

                var $page2 = $(".current.page2") ;
                $page2.stop();
                $page2.animate({
                    opacity:1.0,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },6,null,function(){
                    $page2.removeClass("current").attr("style","");
                });

                var $page3 = $(".current.page3") ;
                $page3.stop();
                $page3.animate({
                    opacity:1.0,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },6,null,function(){
                    $page3.removeClass("current").attr("style","");
                });

                var $page4 = $(".current.page4") ;
                $page4.stop();
                $page4.animate({
                    opacity:1.0,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },6,null,function(){
                    $page4.removeClass("current").attr("style","");
                });
                var $page5 = $(".current.page5") ;
                $page5.stop();
                $page5.animate({
                    opacity:1.0,
                    width:"70%",
                    height: "70%",
                    top: "15%",
                    left: "15%"
                },6,null,function(){
                    $page5.removeClass("current").attr("style","");
                });

                e.stopPropagation();
                return false;
            };
//

            $(".pages").unbind("mouseover").bind("mouseover",function(e){
// 
                var $this = $(this);
                $(this).css({"z-index":"999"});
// 添加特定的 
                return increase($this,e);
            }).unbind("mouseout").bind("mouseout",function(e){
// 所有的都移除 
                return resize(e);
            });
// 
            $("body").click(function(e){
// 所有的都移除 
                return resize(e);
            });
        });
    </script>
</head>

<body>
<img src="images/1.jpg" class="pages page1">
<img src="images/2.jpg" class="pages page2">
<img src="images/3.jpg" class="pages page3">
<img src="images/4.jpg" class="pages page4">
<img src="images/5.jpg" class="pages page5">

</body>
</html>