功能强大的图片放大镜效果

2010-03-10 18:07:15 作者:http://www.dynamicdrive.com 来源:查看 | 【
演示1:default power: 2x. Range: 2x to 7x. Magnifier size: 100px by 100px

演示2:default power: 2x. Range: 1x to 5x. Magnifier size: 75px by 75px):

有时候我们需要把图片局部放大了观看 ,Image Power Zoomer非常简单的解决了这个问题,调用这个js文件后,网页上的所有图片都可以实现在鼠标滑过时进行放大,只需要在图片上添加一个指定的class即可,更牛的是你可以通过在图片上使用鼠标滚轮来放大和所有图片的局部,非常棒的脚本

查看全部代码 View Code

下载
点击这里下载脚本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>


同时使用多个参数的时候,中间使用逗号隔开

下载"功能强大的图片放大镜效果"

  • 本地下载
  • 本地下载2

相关资源