演示2:default power: 2x. Range: 1x to 5x. Magnifier size: 75px by 75px):
有时候我们需要把图片局部放大了观看 ,Image Power Zoomer非常简单的解决了这个问题,调用这个js文件后,网页上的所有图片都可以实现在鼠标滑过时进行放大,只需要在图片上添加一个指定的class即可,更牛的是你可以通过在图片上使用鼠标滚轮来放大和所有图片的局部,非常棒的脚本
下载
点击这里下载脚本ddpowerzoomer.js
在网页<head>区添加以下代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img#gallerya').addpowerzoom({magnifiersize:[100,100]})
$('img.gallery').addpowerzoom({powerrange:[2,5]})
})
</script>
在网页<body>区添加以下代码
<img class="gallery" border="0" src="beach.jpg" style="width:339px;height:225px">
只需要在图片上添加一个class=gallery 即可使图片拥有放大镜
在Head区域我们通过jQuery调用 addpowerzoom(options) 函数:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
</script>
如果使用的是$('#myimage')带有#符号的,表示是通过图片的ID来控制图片是否有放大镜的
如果使用的是$('myimage')则是通过图片的class来控制的
addpowerzoom() 函数的参数使用
defaultpower: value
默认的放大倍数,比如 defaultpower=3表示放大3倍,
$('#myimage').addpowerzoom({defaultpower:3}) //default power: 3x original image
该值必须为大于等于1的整数,默认为1
powerrange: [lowvalue, highvalue]
表示鼠标在图片上使用滚轮时的放大范围,如:
$('#myimage').addpowerzoom({powerrange: [2, 10]}) //Possible range: 2x to 10x magnification
表示放大范围是2-10倍
magnifiersize: [width, height]
放大镜自身的宽和高
$('#myimage').addpowerzoom({magnifiersize:[120, 120]}) //Set size of magnifier to 120px by 120px
表示放大镜的宽为120px,高为120px
下面的范例同时定义了三个参数:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({defaultpower:1, powerrange:[1,5], magnifiersize:[100,100]})
})
</script>
同时使用多个参数的时候,中间使用逗号隔开




