jquery 图片放大
点击查看图片放大效果 http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A4%A7%E9%95%9C.html
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.mmogapower.co/catalog/view/script/js/common/jquery.jqzoom-core.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mmogapower.co/catalog/view/script/css/jquery.jqzoom.css">
<body>
<div style="display: flex;justify-content:center;position:relative;top:50%;align-items:Center;">
<a class="img1" href="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/banner_christmas2.jpg" title="商品图片1" >
<img style="width:200px;" src="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/t5.jpg" />
</a>
<a class="img1" href="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png" title="商品图片2" >
<img style="width:200px;" src="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png" />
</a>
</div>
</body>
<script type="text/javascript">
$(function () {
$('.img1').jqzoom({
zoomType: 'standard',
zoomWidth:450,
zoomHeight:450,
xOffset:10,
yOffset:0,
lens:true,
imageOpacity:1.0
});
})
</script>
</html>
参数说明:zoomWidht: 小图片所选区域的宽度。
zoomHeight: 小图片所选区域的高度。
zoomType: 默认值为standard。如果设为reverse,在小图片仲,移入鼠标时,所选区域高亮,非选中区域淡灰色。
xOffset: 放大后的图片与小图片间的X(横座标)距离。
yOffset: 放大后的图片与小图片间的Y(纵座标)距离。
position: 放大后的图片相对原图片的位置,默认为"right",还可设置为"left","top","bottom"。
lens: 布尔值,表示是否显示小图片中的选中区域,默认值为"true",如果设为"false",则放大后的图片上面不会出现主题字样。
imageOpacity: 当zoomType的值为"reverse"时,用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。
preloadImages:布尔值,表示是否重新加载大图像。
preloadText: 重新加载大图像时,小图像显示的文本说明。
title: 大图像顶部是否显示<a>标签里的title。
showEffect: 大图像加载时的特效,可选值:"show"表示直接显示,"fadein"由透明度渐变载入效果。
hideEffect: 大图像隐藏特效,可选值:"hide"表示直接隐藏,"fadeout"透明度渐变隐藏。
fadeinSpeed: 当大图像的载入特效设为"fadein"时,此属性可设置特效的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。
fadtoutSpeed: 当大图像的隐藏特效设为"fadeout"时,此属性可设置特效载的时间,可选值为'fast','slow',number分别代表,快慢,毫秒数。