[size=medium]
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>
参考：
[url]http://af8991.iteye.com/blog/813540[/url]
[/size]
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>
参考：
[url]http://af8991.iteye.com/blog/813540[/url]
[/size]
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
