jquery与jQzoom实现图片放大效果

阳光穿透心脏的1/2处 2022-08-05 15:15 269阅读 0赞

前段时间在网店看到物体图片放大的功能，我一直再猜这是怎么实现的，直到今天才知道原来是jquery与jQzoom结合的效果。

下面是从官网抠过来的文字：

1.引用js

2.引用css  
   <link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

3.图片和链接放置

images/BIGIMAGE.JPG 应该是指放大的清晰实物图片

images/SMALLIMAGE.JPG 应该是指小的实物图片

4.实现放大效果

$(document).ready(function()\{  
      $(".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")  
                                                preload: 1    , // preload of images :1 by default  
lens:1  // lens over the image   1 by default  
\});  
\});

整体呈现

\--------------------------------------------------------

<html>  
<head><title>jqzoom</title>  
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>  
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>  
<link rel="stylesheet"  type="text/css" href="css/jqzoom.css">

\});

</script>

</head>

<body>

更多例子请参考：[http://www.mind-projects.it/projects/jqzoom/demos.php\#demo1][http_www.mind-projects.it_projects_jqzoom_demos.php_demo1]  
                        注意差别，网站用的是zoomWidth和zoomHeight，最新文档给的是xzoom和yzoom

[http://www.happinesz.cn/archives/555/][http_www.happinesz.cn_archives_555]

[http_www.mind-projects.it_projects_jqzoom_demos.php_demo1]: http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
[http_www.happinesz.cn_archives_555]: http://www.happinesz.cn/archives/555/