JQuery的放大镜效果，效果很好，调用也很简单，是一个小巧而实用的插件.
INSTRUCTIONS1)Simply include the jqzoom.css in your page.
(在你的页面加载jqzoom.css)
link href="your_path/jqzoom.css" rel="stylesheet" type="text/css" media="screen"
2)Include jQzoom and jQuery code
(在你的页面加载jqzoom.ss、jquery.jqzoom.js)
<script src="your_path/jquery.js" type="text/javascript"></script>
<script src="your_path/jquery.jqzoom.js" type="text/javascript"></script>
3)Now create a container(div is better!!) for the image or images you would like to zoom and assign to it the “
jqzoom” class.Specify for each image,the
jqimg attribute,to wich you are going to assign the big image path. （
现在把jqzoom赋给你要显示的图片，要分别设置每一张图片，alt路径代表你对应的放大的图片的位置）
<p class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg" /></p>
4)Load the plugin at window load
（加载 plugin）
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
$(".jqzoom").jqueryzoom();
});
</script>
You can also specify some
options:（ 你也可以指定一些选择）
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //宽
yzoom: 300, //高
offset: 40, //与原图的距离
position: "right", //预览显示的停靠位置,可以改为左边(left)等其他地方
preload:1 // by default preload of big images is 1
lens:1 // by default the lens is 1
});
});
</script>
5)Sit and wait for people to tell you that what you have done is really cool!!!!:-)
This costed to me a little job and struggles,so if you want future support for
jqzoom,donate something with
Paypal,before downloading it.
演示： http://www.mind-projects.it/blog/jqzoom_v10 http://www.niushirt.com/Product/Pro_Read.php?vid=185
下载： http://www.mind-projects.it/blog/wp-content/jqzoom_v2.2.rar
[
本帖最后由 gongjb9 于 2008-5-5 18:59 编辑 ]
