手把手教小白如何用css+js实现页面中图片放大展示效果

最新推荐文章于 2024-06-07 13:51:40 发布

苏小苏

最新推荐文章于 2024-06-07 13:51:40 发布

阅读量5k

点赞数 4

分类专栏： web前端文章标签： css 图片放大放大镜效果

本文链接：https://blog.csdn.net/sxs161028/article/details/75387573

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.前言
很多童鞋会在项目中遇到一些上传图片，展示图片的操作，但是图片呢有大有小，为了页面的美观，有时候我们需要将图片展示成固定宽高度，但是呢，领导就会说，我想看大图片，怎么办？想看就看呀，来来来，我教你！
2.详情
说太多也没有用，直接贴上代码。新手小白，可以直接复制代码到本地运行。需要注意一下几点

将代码中的jquery.js的库文件链接改成自己的路径
.将图片也改成自己的路径与相应的图片
好了，直接上代码，一目了然：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片放大</title>
    <style>
        table tr td img{width:60px;}
        table tr td{text-align:center; padding:5px;}
        table tr th{background:#ddd; height:36px; }
        table tr td{border-bottom:1px solid #ddd; border-left:1px solid #ddd; }
        table tr td:last-child{border-right:1px solid #ddd;}
        .bg-img{position: fixed;background-color:rgba(190,190,190,0.5);z-index:9999;}
        .tra-img{text-align:center;position:relative;top:50%;
            -webkit-transform:translateY(-50%);
            -moz-transform:translateY(-50%);
            -o-transform:translateY(-50%);
            -ms-transform:translateY(-50%);
            transform:translateY(-50%);
        }
        .zoom-in{
            cursor: -moz-zoom-in;
            cursor: -webkit-zoom-in;            
            cursor: zoom-in;
            cursor: url(../images/big.cur);
        }
        .zoom-out{
            cursor: -moz-zoom-out;
            cursor: -webkit-zoom-out;
            cursor: zoom-out;
            cursor: url(../images/small.cur);
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" width="700">
        <thead>
            <tr>
                <th>序号</th><th>图片</th><th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><img class="zoom-in" src="../images/login-bg1.png" /></td>
                <td>点击图片可放大</td>
            </tr>
            <tr>
                <td>2</td>
                <td><img class="zoom-in" src="../images/login-bg2.png" /></td>
                <td>点击图片可放大</td>
            </tr>
            <tr>
                <td>2</td>
                <td><img class="zoom-in" src="../images/login-bg3.png" /></td>
                <td>点击图片可放大</td>
            </tr>
        </tbody>
    </table>   
    <script src="../common/jquery.min.js"></script>
    <script>
        //点击图片放大
        $(document).on("click", "table tr td img", function () {
            var img_content = $(this).attr("src");
            $("body").append(
                "<div class='bg-img'>"
                + "<div class='tra-img'>"
                    + "<img src='" + img_content + "' class='zoom-out'>"
                + "</div></div>"
            );
            //bottom:'0',left:'0';会让图片从页面左下放出现，如果想从左上方出现，将bottom:'0'改成top:'0';
            $(".bg-img").animate({
                width: "100%",
                height: "100%",
                bottom: "0",
                left: "0",
            }, "normal")
        })
        //点击外层区域页面图片隐藏
        $(document).on("click", ".bg-img", function () {
            $(this).remove();
        })
    </script>
</body>
</html>

3.实现效果

图片展示
效果图

4.总结
大家在浏览器中执行的时候，会看到相应的效果，如果是低版本的浏览器，包括iE11及以下的浏览器，可以自己下载两个文件就是放大镜和放小镜的cur文件。这新话用户体验会更好！
如果有更好的方法，请告诉我！

苏小苏

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
手把手教小白如何用css+js实现页面中图片放大展示效果

1.前言很多童鞋会在项目中遇到一些上传图片，展示图片的操作，但是图片呢有大有小，为了页面的美观，有时候我们需要将图片展示成固定宽高度，但是呢，领导就会说，我想看大图片，怎么办？想看就看呀，来来来，我教你！ 2.详情说太多也没有用，直接贴上代码。新手小白，可以直接复制代码到本地运行。需要注意一下几点将代码中的jquery.js的库文件链接改成自己的路径 .将图片也改成自己的路径与
复制链接

扫一扫

专栏目录