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

最新推荐文章于 2022-12-20 17:30:40 发布

热爱前端的小君同学

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37815596/article/details/80980780

前端专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种使用jQuery实现图片点击放大效果的方法。通过简单的HTML结构和jQuery脚本，当用户点击小图时，可以在一个覆盖层中展示放大的图片。此外，还提供了鼠标悬停时图片放大的另一种实现方式。

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

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>

注意：上面这段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;
}