常见的图片放大工具 jqzoom.js

dreamoftch

浏览: 498157 次
性别:
来自: 上海

最近访客更多访客>>

leimingchao

muyuan

123youmian

ggggoo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jqzoom

1)在页面中引入jqzoom.css

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

2)在页面中引入jquery.js和jqzoom.js

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

3)创建一个存放image的容器，可以是div或者是并且将其class设为jqzoom,将image标签添加

jqimg属性，用来存放放大的图片的路径；

<div class="jqzoom"><img alt="tupian" src="images/shoe1_small.jpg" jqimg="images/shoe1_big.jpg"></div>

或者：

<a class="jqzoom" href="http://www.baidu.com"><img alt="tupian" src="images/shoe1_small.jpg" jqimg="images/shoe1_big.jpg"></a>

4)在页面加载完成之后加载插件：

<script type="text/javascript">

$(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
}); });
</script>

OK完成。

最终代码如下：

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

<script type="text/javascript">

$(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
}); });
</script>
</head>
<body>
<div class="jqzoom"><img alt="tupian" src="images/shoe1_small.jpg" jqimg="images/shoe1_big.jpg"></div>
<a class="jqzoom" href="http://www.baidu.com"><img alt="tupian" src="images/shoe1_small.jpg" jqimg="images/shoe1_big.jpg"></a>
</body>
</html>

参考：
http://af8991.iteye.com/blog/813540

分享到：