jquery与jQzoom实现图片放大效果

最新推荐文章于 2020-05-13 14:08:30 发布

jbgtwang

最新推荐文章于 2020-05-13 14:08:30 发布

阅读量5.1k

点赞数

文章标签： jquery stylesheet div function image float

本文链接：https://blog.csdn.net/jbgtwang/article/details/4414002

版权

前段时间在网店看到物体图片放大的功能，我一直再猜这是怎么实现的，直到今天才知道原来是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">