几个常用的 点击图片放大的 js代码"/>
html 几个常用的 点击图片放大的 js代码
html 几个常用的 点击图片放大的 js代码
源码下载地址：
①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[在线预览：.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(固定位置)[在线预览：.html]：
<style>/*图片放大层样式(自己修改)*/.divZoom {display: none;border: 5px solid #c0c0c0;top: 27%;left: 3%;width: 90%;position: absolute;}</style><script src=".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(当前位置)[在线预览：.html]：
<style>/*图片放大层样式(自己修改)*/.divZoom {display: none;border: 5px solid #c0c0c0;/*top: 27%;*/left: 3%;width: 90%;position: absolute;}</style><script src=".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(当前点击的图片)[在线预览：.html]：
<!DOCTYPE html>
<html xmlns="">
<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文件地址：.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);});
});这样⑤的代码精简为[在线预览：.html]：
<!DOCTYPE html>
<html xmlns="">
<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>
源码下载地址：
更多推荐
html 几个常用的 点击图片放大的 js代码
发布评论