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


Posted in Javascript onApril 12, 2010

下面是完整的代码 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>
Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
js实现的网页颜色代码表全集
Jul 17 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 #Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 #Javascript
javascript URL编码和解码使用说明
Apr 12 #Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 #Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 #Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 #Javascript
javascript cookies操作集合
Apr 12 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python3实现windows下同名进程监控
2018/06/21 Python
python命令 -u参数用法解析
2019/10/24 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
2014年客服工作总结范文
2014/11/13 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
花木兰观后感
2015/06/10 职场文书
标枪加油稿
2015/07/22 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Golang 链表的学习和使用
2022/04/19 Golang
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python