<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>
分享到:
相关推荐
jquery jqzoom插件制作图片放大镜图片窗口放大显示 jquery jqzoom插件制作图片放大镜图片窗口放大显示
NULL 博文链接:https://htj1231825.iteye.com/blog/908368
NULL 博文链接:https://mr-zhong.iteye.com/blog/1618321
本文实例讲述了基于...jqzoom插件实现图片放大镜效果。 图1.1jqzoom插件实现图片放大镜效果 1、引入jqurty和jqzoom插件 [removed][removed] [removed][removed] 2、应用官方网站给定的样式 /*jQzoom*/ .jqzoom{
主要介绍了图片放大镜jquery.jqzoom.js的使用另附放大镜图标,需要的朋友可以参考下
NULL 博文链接:https://liuzidong.iteye.com/blog/1152132
jquery图片放大镜插件,包含demo。
通过简单的一个html页面和引用插件,实现查看图片时,放大图片,是图片更加清晰.
今天在jquery插件中看到一个jqzoom插件,感觉效果不错,就移植到了wordpress中来 在IE6,IE7,firefox,safari中测试通过 解压后把jqzoom文件夹上传到plugin目录下,后台开启即可 使用方法:在需要此效果的文章里...
此资源为jquery插件jqzoom,用于实现图片局部放大功能,既我们通常所说的图片放大镜功能。类似淘宝的那种效果
* JQZoom Evolution 1.0.1 - Javascript Image magnifier * * Copyright (c) Engineer Renzi Marco(www.mind-projects.it) * * $Date: 12-12-2008 * * ChangeLog: * * $License : GPL,so any change to ...
jquery插件 模拟的图片放大器效果 jqzoom Magnify
jquery放大效果的插件,很方便。。。。。。。
个人把常用的一些jquery插件做了一个demo,里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery...
一款不错的jQuery的图片放大器插件,类似京东商城图片放大!
jqzoom v2.0 基于jQuery的图片放大插件,以前发过1.0版本的,2.0比1.0功能扩展了更多,功能更强大,也是目前使用最顺手的一个版本,压缩包内附带有官方实例,使用方法什么的通过代码应该就能看得懂,jqzoom被广泛...
jquery插件jqzoom放大镜,动态获取json数据
89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款非常不错的jQuery+div大气新闻图片切换插件代码(AnythingSlider)下载 92. 基于...
内容索引:脚本资源,jQuery,jQzoom,图片...网页打开的时候加载的是小图片,显示最终这么大效果的是大图片,这一切是用jQzoom插件来控制,就像是在放大一张图片一样,效果逼真,非常适合应用到一些产品展示类的网站中。