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

╰半橙微兮° 2022-05-20 01:16 228阅读 0赞

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

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.百度压缩版引用地址:

点击图片变大

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

注意：上面这段html应该紧跟在需要变大的img图片后

CSS代码

.closed {
        position: absolute;
        top: -25px;
        right: -25px;
        cursor: pointer;
        width: 35px;
        height: 35px;
        font-size: 20px;
        font-weight: bold;
        line-height: 35px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        color: #666;
        background-color: white;
    }