`
piperzero
  • 浏览: 3478427 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery中的jqzoom插件

 
阅读更多


<script type="text/javascript">
window.onload = function() {
$(".jqzoom").jqueryzoom({
xzoom: 250, //设置放大 DIV 长度(默认为 200)
yzoom: 250, //设置放大 DIV 高度(默认为 200)
offset: 10, //设置放大 DIV 偏移(默认为 10)
position: "right", //设置放大 DIV 的位置(默认为右边)
preload: 1,
lens: 1
});
}
</script>

zoomWidth,表示放大框的宽
zoomHeight ,表示放大框的高
xOffset,表示离显示展示中等图片的x距离
yOffset,表示离显示中等图片的Y距离
position,表示显示的放大框在浏览器的center,还是left,还是right
lens,表示显示在中等图片的缩放位置是否显示,默认为true
alwaysOn,表示放大框是否一直显示

<html>
<head>
<title>JQzoom Demo-http://www.codefans.net</title>
<script src="../js/jquery-1.3.2.min.codefans.net.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
font-size:12px;
}
div.notes a{
color:#990000;
}

</style>
<script type="text/javascript">

$(function() {
$(".jqzoom").jqzoom();
});
</script>
</head>

<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
<img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">
</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>
<br>

<div class="notes">
<small>created by Renzi Marco</small>
<a href="http://www.mind-projects.it/projects/jqzoom/contact.php">Hire me</a><br>
<a href="http://www.mind-projects.it/projects/jqzoom">view all Demos</a>
</div>
</div>
</body></html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics