图片展示-放大镜效果(JQuery) _Web前端

图片显示--放大镜效果(JQuery)

http://www.itpob.cn

jQZoom allows you to realize a small magnifier window close to the image or images on your web page easily.

I decided to build this jQuery plugin to embed detailed big images in my B2B.So now in few steps you can have your jQZoom in your website,eCommerce or whatever you want.Author: Renzi Marco?,December 2007

1)Simply include the jqzoom.css in your page.(在你的页面加载jqzoom.ss)

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2)Include jQzoom and jQuery code(加载jquery.js以及jqzoom.js文件)

<script type="text/javascript" src="your_path/jquery.js"></script> <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3)Now assign the "jqzoom" class to the image or images you would like to zoom,and specify for each one,the alt attribute,to wich you are going to assign the big image path.（现在吧jqzoom赋给你要显示的图片，要分别设置每一张图片，alt路径代表你对应的放大的图片的位置）

<img src="your_path/imagename_small.jpg" class="jqzoom" alt="your_path/imagename_big.jpg">

4)Load the plugin at window load

jQuery(document).ready(function(){ $("img.jqzoom").jqueryzoom(); });

You can also specify some options:

jQuery(document).ready(function(){

$("img.jqzoom").jqueryzoom(

{ xzoom: 300, //zooming div default width(default width value is 200)

?yzoom: 300, //zooming div default width(default height value is 200)

offset: 40, //zooming div default offset(default offset value is 10)

position: "right" //zooming div position(default position value is "right") }); });

DEMO演示：http://bbs.okajax.com/demo/17/

源码下载：

文件:	jQZoom_v1.1.zip
大小:	296KB
下载:	下载