html⼏个常⽤的点击图⽚放⼤的js代码html ⼏个常⽤的点击图⽚放⼤的 js代码
①zoomify[在线预览：]：
<img class="zoomify" src="images/img1.jpg" alt="">
<script src="js/jquery.min.js"></script>
<script src="js/zoomify.min.js"></script>
jquery在线图片<script>
$(function() {
$('.zoomify').zoomify();
});
</script>
②imgbox[在线预览：]：
<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(固定位置)[在线预览：]：
border: 5px solid #c0c0c0;
top: 27%;
left: 3%;
width: 90%;
position: absolute;
}
</style>
<script src="libs.baidu/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" />
</div>
④jQuery(当前位置)[在线预览：]：
border: 5px solid #c0c0c0;
/*top: 27%;*/
left: 3%;
width: 90%;
position: absolute;
}
</style>
<script src="libs.baidu/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" />
</div>
⑤jQuery(当前点击的图⽚)[在线预览：]：
<!DOCTYPE html>
<html xmlns="/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" />
</div>
<style type="text/css">
.divZoom {
display: none;
position: absolute;
width: 95%;
}
</style>
</body>
</html>
把⑤的代码⽤js⽂件封装了⼀下，如下：
[js⽂件地址：]
$(function () {
//添加弹出层
$("body").append('<div id="divZoom" class="divZoom"><img id="imgZoom" /></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);
});
});
这样⑤的代码精简为[在线预览：]：
<!DOCTYPE html>
<html xmlns="/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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论