html 几个常用的点击图片放大的 js代码

最新推荐文章于 2024-10-13 20:55:11 发布

djk8888

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量3.4k

点赞数 2

分类专栏： html JS代码 jquery

本文链接：https://blog.csdn.net/djk8888/article/details/117227753

版权

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

本文介绍了五种使用JavaScript（特别是jQuery）实现HTML图片点击放大的代码示例，包括Zoomify、imgBox、jQuery固定位置、jQuery当前位置以及jQuery当前点击图片的放大效果。每个示例都提供了在线预览链接和源码下载地址，方便开发者直接使用或参考。

摘要由CSDN通过智能技术生成

html 几个常用的点击图片放大的 js代码

源码下载地址：https://download.csdn.net/download/djk8888/19033807

①zoomify[在线预览：http://djk8888.byethost32.com/zoom/zoomify.html]：

<img class="zoomify" src="images/img1.jpg" alt="">

<script src="js/jquery.min.js"></script>
<script src="js/zoomify.min.js"></script>
<script>
$(function() {
	$('.zoomify').zoomify();
});
</script>

②imgbox[在线预览：http://djk8888.byethost32.com/zoom/imgbox/index.html]：

<a id="example1" href="images/4006876523_289a8296ee.jpg"><img src="images/4006876523_289a8296ee_m.jpg" /></a>
<a id="example2" href="images/3793633099_3e1e53e4ac_o.jpg"><img src="images/3793633099_4f9c3e08b3_m.jpg" /></a>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.imgbox.pack.js"></script>
<script>
$(function(){
	$("#example1").imgbox();
	$("#example2").imgbox({
		'speedIn'		: 0,
		'speedOut'		: 0,
		'alignment'		: 'center',
		'overlayShow'	: true,
		'allowMultiple'	: false
	});
});
</script>

③jQuery(固定位置)[在线预览：http://djk8888.byethost32.com/zoom/index.html]：

    <style>
        /*图片放大层样式(自己修改)*/
        .divZoom {
            display: none;
            border: 5px solid #c0c0c0;
            top: 27%;
            left: 3%;
            width: 90%;
            position: absolute;
        }
    </style>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //图片放大缩小
        function zoom(src) {
            if (src == null || $.trim(src) == "") {
                $("#divZoom").hide();
                return;
            }
            $("#imgZoom").attr("src", src);//绑定图片地址
            $("#divZoom").show(250);//弹出图片放大层
            $("html,body").animate({ scrollTop: "0px" }, 250);//滚动
        }
        //关闭图片放大层
        $(function () {
            $("#divZoom").click(function () {
                $("#divZoom").hide(250);
            });
        });
    </script>

    <img width="200" height="100" src="img/1.jpg" onclick='zoom("img/1.jpg")' /><br />
    <img width="200" height="100" src="img/2.jpg" onclick='zoom("img/2.jpg")' /><br /> 

    <div id="divZoom" class="divZoom">
        <img id="imgZoom" style="width:100%;" />
    </div>

④jQuery(当前位置)[在线预览：http://djk8888.byethost32.com/zoom/index2.html]：

    <style>
        /*图片放大层样式(自己修改)*/
        .divZoom {
            display: none;
            border: 5px solid #c0c0c0;
            /*top: 27%;*/
            left: 3%;
            width: 90%;
            position: absolute;
        }
    </style>

 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //图片放大缩小
        function zoom(src, id) {
            if (src == null || $.trim(src) == "") {
                $("#divZoom").hide();
                return;
            }
            //var left = $('#img' + id).position().left;
            var top = $('#img' + id).position().top;
            $("#divZoom").css("top", top);//定位
            $("#imgZoom").attr("src", src);//绑定图片地址
            $("#divZoom").show(250);//弹出图片放大层
            $("html,body").animate({ scrollTop: top - 25 }, 200);//滚动
        }
        //关闭图片放大层
        $(function () {
            $("#divZoom").click(function () {
                $("#divZoom").hide(250);
            });
        });
    </script>

<img id="img1" width="200" height="100" src="img/1.jpg" onclick='zoom("img/1.jpg","1")' /><br />
<img id="img2" width="200" height="100" src="img/2.jpg" onclick='zoom("img/2.jpg", "2")' /><br />

<div id="divZoom" class="divZoom">
    <img id="imgZoom" style="width:100%;" />
</div>

⑤jQuery(当前点击的图片)[在线预览：http://djk8888.byethost32.com/zoom/index3.html]：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            //放大
            $(".img").click(function () { 
                $("#divZoom").hide(200);

                var img = $(this);
                var top = img.position().top;
                var left = img.position().left;
                var src = img[0].src;

                $("#divZoom").css("top", top);//绑定图片地址
                $("#divZoom").css("left", left);//绑定图片地址
                $("#imgZoom").attr("src", src);//绑定图片地址  

                $("#divZoom").show(200);//弹出图片放大层
                $("html,body").animate({ scrollTop: top }, 200);//滚动
            });
            //关闭
            $("#divZoom").click(function () {
                $("#divZoom").hide(200);
            });
        });
    </script>
</head>
<body>
    <img src="img/1.jpg" width="150" height="100" class="img" /><br />
    <img src="img/2.jpg" width="150" height="100" class="img" /><br />
    <img src="img/3.jpg" width="150" height="100" class="img" /><br />

    <div id="divZoom" class="divZoom">
        <img id="imgZoom" style="width:100%;" />
    </div>
    <style type="text/css">
        .divZoom {
            display: none;
            position: absolute;
            width: 95%;
        }
    </style>
</body>
</html>

把⑤的代码用js文件封装了一下，如下：

[js文件地址：http://djk8888.byethost32.com/zoom/js/imgZoom.js]

$(function () {
    //添加弹出层
    $("body").append('<div id="divZoom" class="divZoom"><img id="imgZoom" style="width:100%;" /></div>');
    //弹出层样式，可修改
    $("body").append('<style type="text/css">.divZoom {display: none;position: absolute;width: 95%;}</style>');
    //点击图片事件，样式名称为：imgZoom，如：class="imgZoom"
    $(".imgZoom").click(function () {
        $("#divZoom").hide();//隐藏之前的弹出层
        var img = $(this);
        var top = img.position().top;
        var left = img.position().left;
        var src = img[0].src;
        $("#divZoom").css("top", top);//绑定图片地址
        $("#divZoom").css("left", left);//绑定图片地址
        $("#imgZoom").attr("src", src);//绑定图片地址  
        $("#divZoom").show(200);//弹出图片放大层
        $("html,body").animate({ scrollTop: top }, 200);//滚动
    });
    //关闭弹出层
    $("#divZoom").click(function () {
        $("#divZoom").hide(200);
    });
});

这样⑤的代码精简为[在线预览：http://djk8888.byethost32.com/zoom/index4.html]：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/imgZoom.js"></script>
</head>
<body>
    <img src="img/1.jpg" width="150" height="100" class="imgZoom" /><br />
    <img src="img/2.jpg" width="150" height="100" class="imgZoom" /><br />
    <img src="img/3.jpg" width="150" height="100" class="imgZoom" /><br />
</body>
</html>

源码下载地址：https://download.csdn.net/download/djk8888/19033807