JS实现简单的图片查看效果

最新推荐文章于 2022-09-30 20:17:59 发布

萧逸才

最新推荐文章于 2022-09-30 20:17:59 发布

阅读量7.2k

点赞数 3

分类专栏： jquery 前端文章标签：图片 javascript

本文链接：https://blog.csdn.net/xyc_csdn/article/details/68204872

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

用js实现了一个简单的图片查看效果。主要功能:
1、点击图片后打开遮罩并在遮罩中显示图片，大小已做好限制，不会因为图片太大而导致出现滚动条；
2、鼠标放上图片后可以滚动放大或缩小图片；
注意:需要jquery.js和jquery.mousewheel.js的支持。

js(pic-view.js)代码如下:

$(function () {
    $("body").delegate(".pic-view", "click", function () {
        //容器
        var $container = $("<div></div>");
        $container.attr("id", "pic_view_container");
        //遮罩层
        var $mask = $("<div></div>")
        $mask.attr("id", "pic_view_mask");
        $mask.attr("title", "点击空白处关闭");
        $mask.css("position", "absolute");
        $mask.css("top", 0);
        $mask.css("bottom", 0);
        $mask.css("left", 0);
        $mask.css("right", 0);
        $mask.css("width", "100%");
        $mask.css("height", "100%");
        $mask.css("background", "#000");
        $mask.css("opacity", 0.7);
        $mask.css("cursor", "pointer");
        //图片
        var $img = $("<img/>");
        var url = $(this).attr("src");
        $img.attr("id", "pic_view_img");
        $img.attr("src", url);
        $img.attr("title", "滚动放大/缩小");
        $img.css("position", "absolute");
        $img.css("top", "50%");
        $img.css("left", "50%");
        $img.css("cursor", "pointer");
        //组装
        $container.append($mask);
        $container.append($img);
        $("body").append($container);   //显示
        //重置图片大小
        resetPicSize(0.1);
        //绑定滚动鼠标改变图片大小
        onMouseWheel();
        //绑定关闭视图方法
        hidePic();
    });
});

/**
 * 鼠标滚动放大/缩小图片
 */
function onMouseWheel() {
    $("#pic_view_img").bind("mousewheel", function (event, delta) {
        $mask = $("#pic_view_mask"), $img = $(this);
        var dir = delta > 0 ? "up" : "down";
        var m_width = $mask.width();
        var m_height = $mask.height();
        var i_width = $img.width();
        var i_height = $img.height();
        if (dir == "up") {  //放大
            i_width = i_width * 1.1;
            i_height = i_height * 1.1;
            if (i_width < m_width && i_height < m_height) {
                $img.width(parseInt(i_width));
                $img.height(parseInt(i_height));
                $img.css("margin-top", -parseInt(i_height / 2));
                $img.css("margin-left", -parseInt(i_width / 2));
            }
        } else {    //缩小
            i_width = i_width * 0.9;
            i_height = i_height * 0.9;
            if (i_width >= 100 && i_height >= 100) {
                $img.width(parseInt(i_width));
                $img.height(parseInt(i_height));
                $img.css("margin-top", -parseInt(i_height / 2));
                $img.css("margin-left", -parseInt(i_width / 2));
            }
        }
    });
}
/**
 * 点击图片时，重置图片大小
 * @param offset
 */
function resetPicSize(offset) {
    $mask = $("#pic_view_mask"), $img = $("#pic_view_img");
    var m_width = $mask.width();
    var m_height = $mask.height();
    var i_width = $img.width();
    var i_height = $img.height();
    if (m_width <= 0 || m_height <= 0 || i_width <= 0 || i_height <= 0 || offset <= 0) {
        return;
    }
    var scale = 1;
    while (i_width >= m_width || i_height >= m_height) {
        i_width = i_width * (scale - offset);
        i_height = i_height * (scale - offset);
    }
    $img.width(parseInt(i_width));
    $img.height(parseInt(i_height));
    $img.css("margin-top", -parseInt(i_height / 2));
    $img.css("margin-left", -parseInt(i_width / 2));
}
/**
 * 关闭视图
 */
function hidePic() {
    $("#pic_view_mask").click(function () {
        $("#pic_view_container").remove();
    });
}

html代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .pic-view {
            margin: 5px;
            max-width: 200px;
        }
    </style>
</head>
<body>
<div id="box">
    <img class="pic-view" src="1.png"/>
    <img class="pic-view" src="2.png"/>
    <img class="pic-view" src="3.jpg"/>
    <img class="pic-view" src="4.jpg"/>
</div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="pic-view.js"></script>
</body>
</html>

以上只是一个简单的效果，提供一个简单的思路......

萧逸才

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现简单的图片查看效果

用js实现了一个简单的图片查看效果。主要功能: 1、点击图片后打开遮罩并在遮罩中显示图片，大小已做好限制，不会因为图片太大而导致出现滚动条； 2、鼠标放上图片后可以滚动放大或缩小图片；注意:需要jquery.js和jquery.mousewheel.js的支持。js(pic-view.js)代码如下:$(function () { $("body").delegate(
复制链接

扫一扫

专栏目录