教程集 > jQuery > jquery 教程 > 正文关于Jqzoom的使用心得 jquery放大镜效果插件

关于Jqzoom的使用心得 jquery放大镜效果插件

发布时间：2013-08-20 编辑：jiaochengji.com

Jqzoom是基于jquery的放大镜效果插件，兼容多款浏览器，喜欢的朋友可以测试下。

Jqzoom是基于jquery的放大镜效果插件，兼容多款浏览器，喜欢的朋友可以测试下。下面是完整的代码 jqzoom打包下载地址

复制代码代码如下:

<html> 
<head> 
<title>JQzoom Demo</title> 
<script src="../js/jquery-1.3.2.min.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>

下面主要演示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>

您可能感兴趣的文章：
关于Jqzoom的使用心得 jquery放大镜效果插件
 jQuery的图片放大器插件 jQzoom
jQuery 图片放大镜效果插件jQZoom的用法举例
 jquery 实现京东商城、凡客商城的图片放大效果
 jQuery图片放大镜插件 magnifier
photoshop树滤镜使用技巧心得分享
 jQuery图片放大插件 hoverpluse
基于jquery的放大镜效果
 来自国外的14个图片放大编辑的jQuery插件整理
 基于Jquery插件开发之图片放大镜效果(仿淘宝)

上一篇：jQuery EasyUI 中文API Button使用实例下一篇：3Z版基于jquery的图片复选框(asp.net+jquery)

[关闭]

关于Jqzoom的使用心得 jquery放大镜效果插件

最近更新

浏览排行