图片点击放大缩小键盘绑定切换功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
</head>
<style>
    .box {
        overflow: hidden;
        width: 100%;
    }
    .pictrue {
        width:150px;
        height:150px;
        float: left;
    }
    .pictrue img{
        width:100%;
    }
    .du-mask{
        background: rgba(0,0,0,.5);
        width:100%;
        height:100%;
        z-index:99;
        position: absolute;
        top:0;
        left: 0;
    }
    .du-contain{
        position: absolute;
        left:0;
        top:0;
        right: 0;
        bottom: 0;
    }
    .du-main{
        position: absolute;
        top:0;
        width:auto;
        height:96%;
    }
    .du-tool{
        position: fixed;
        top:20px;
        right:50px;
        z-index: 999;
    }
    .du-tool button{
        width:70px;
        height:30px;
        text-align: center;
        margin: 0 10px;
        line-height: 30px;
        font-size: 16px;
        color: #fff;
        border: 1px solid #00A1CB;
        background: #05a8eb;
    }
    .du-tool button:hover{
        color: #fff;
        background: #0586bf;
    }
</style>
<body>
    <div class="box">
        <div class="pictrue">
            <img src="1111.JPG" alt="点击放大">
        </div>
        <div class="pictrue">
            <img src="newcar.jpg" alt="点击放大">
        </div>
        <div class="pictrue">
            <img src="close.png" alt="点击放大">
        </div>
        <div class="pictrue">
            <img src="close1.png" alt="点击放大">
        </div>
        <div class="pictrue">
            <img src="201802051306060953.jpg" alt="点击放大">
        </div>
        <div class="pictrue">
            <img src="201802051306065046.jpg" alt="点击放大">
        </div>
    </div>

<div style="margin-top: 1000px"></div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
    var pictrue=$('.pictrue');
    pictrue.click(function(){
        $('body').css('overflow','hidden');
        var index= pictrue.index(this);
        var num=pictrue.length;
        var n=1;
        $("<div class='du-mask'><div class='du-tool'><button class='du-prev'>上一张</button><button class='du-next'>下一张</button><button class='du-large'>放大</button><button class='du-small'>缩小</button><button class='du-close'>关闭</button></div><div class='du-contain'><img class='du-main'></div></div>").appendTo('body');
        var src=$(this).find('img').attr('src');
        var main= $(".du-main");
        main.attr('src',src);
        var width=main.width();
        main.css("left",($(window).width()-width)/2);
        //鼠标拖拽
        drag(main.get(0));
        function drag(aa){
            aa.onmousedown=function(e){
                ev=e||window.event;
                ox=ev.offsetX;
                oy=ev.offsetY;
                document.onmousemove=function(e){
                    ev=e||window.event;
                    aa.style.left=ev.clientX-ox+"px";
                    aa.style.top=ev.clientY-oy+"px";
                    ev.preventDefault();
                }
            };
            aa.onmouseup=function(){
                document.onmousemove=null
            };
        }

//        上一页
        $(".du-prev").click(function(){
            to_left()
        });
        //       向上一页
        function to_left(){
            if(index==0){
                console.log("已经是第一张");
            }else{
                index=index-1;
                var psrc=pictrue.eq(index).find('img').attr('src');
                main.attr('src',psrc).css("transform","scale(1,1)");
                var width=main.width();
                main.css({left:($(window).width()-width)/2,top:0});
                n=1;
            }
        }
//        下一页
        $(".du-next").click(function(){
            to_right();
        });
        //       向下一页
        function to_right(){
            if(num==(index+1)){

               console.log("已经是最后一张");

} else{ index = index + 1; var nsrc = pictrue. eq( index). find( 'img'). attr( 'src'); main. attr( 'src', nsrc).css( "transform", "scale(1,1)"); var width = main. width(); main. css({left :($( window). width() - width) / 2,top : 0}); n = 1; } } // 放大 $( ".du-large"). click( function(){ n = n + 0.2; main. css( "transform", "scale(" + n, n + ")"); drag( main. get( 0)); }); // 缩小 $( ".du-small"). click( function(){ if( n > 0.6){ n = n - 0.2; main. css( "transform", "scale(" + n, n + ")"); drag( main. get( 0)) } }); // 关闭 $( ".du-close"). click( function(){ $( '.du-mask'). remove(); $( 'body'). css( 'overflow', 'auto'); }) // 键盘绑定 $( document). keydown( function( event){ if(( event.keyCode == 37) ||( event.keyCode == 38)){ to_left(); } else if (( event.keyCode == 39) ||( event.keyCode == 40)){ to_right(); } }); });</ script></ html>

图片点击放大缩小 键盘绑定切换功能实现

猜你喜欢

图片点击放大缩小键盘绑定切换功能实现