实现点击单张图片,鼠标移动上去,两种状态下可放大

实现点击单张图片时要求可放大

1.官网jquery压缩版引用地址:
　3.1.1版本:
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   3.0.0版本:
　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
　2.1.4版本:
　　<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

2.百度压缩版引用地址:

　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
3.微软压缩版引用地址:
　　<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
亲测都可用,谷歌的不太好用,便不再加进去.

点击图片变大

                <div class="right col-sm-9">
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/1.JPG" alt="" style="margin-top: 25px;">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/2.JPG" alt="" style="margin-top: 34px;">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/3.JPG" alt="" style="margin-top: 34px;">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/4.JPG" alt="" style="margin-top: 34px;">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/5.jpg" alt="" style="margin-top: 34px;">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/6.jpg" alt="">
                    </div>
                    <div class="box col-sm-4">
                        <img class="img-responsive" src="/Theme/default/image/7.jpg" alt="" style="margin-top: 34px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="model" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.46);display: none;z-index: 999"></div>
    <div id="imgmodel" style="width: auto;height: auto;position: fixed;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);display: none;z-index: 1000">
        <img style="width: 150%;height: 150%;" src=""/>
    </div>
    <script type="text/javascript">
        $(".right .box img").click(function () {
            $("#model,#imgmodel").css("display","block");
            $("#imgmodel").find("img").attr("src",$(this).attr("src"))
        })
        $("#model").click(function(){
            $("#model,#imgmodel").css("display","none");
        })
        $("#imgmodel").click(function(){
            $("#model,#imgmodel").css("display","none");
        })
    </script>

鼠标移动上去，图片放大

<div class="model" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.1);display: none;z-index: 999"></div>  
<div class="imgmodel" style="width: auto;height: auto;position: fixed;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);display: none;z-index: 1000">  
    <img style="width: 150%;height: 150%;" src=""/>
    <span class="closed">X</span>  
</div>   
<script>  
    $(".product_box").mouseover(function(e){
      var timer,thate = e;
      return function(thate){
        if(timer)clearTimeout(timer);
        timer = setTimeout(function(){
          if(thate.target.nodeName.toLowerCase()==="img"){
            $(".model,.imgmodel img").attr("src",thate.target.src)
            $(".model,.imgmodel").css("display","block"); 
          }
        },400)
      }
    }())

    $(".imgmodel .closed").click(()=>{
      $(".model,.imgmodel").css("display","none"); 
    })
</script>