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





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


你可能感兴趣的:(jqzoom)