javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持


Posted in Javascript onApril 07, 2009

qsoft.PopBigImage.v0.35.demo.rar
新特性:
1、不需要onload加载和指定id了,在img中加个标记就好,第一鼠标进入时动态生成显示层
2、可以随意调整,右边的展示层的大小了。

qsoft.PopBigImage
version:0.35
author: kimmking@163.com
date: 2009年3月26日 15:20:50
功能描述:
一般页面的的图片为了布局考虑,显示大小都小于实际大小。
鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。
并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
v0.1:实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
v0.2:实现了Firefox的兼容支持,修改了IE下传递偏移0,0时有空隙的对不齐问题。
v0.3:实现了鼠标第一次进入图片时动态创建显示层。提供了一个静态创建方法。
v0.35:加入了对google chrome浏览器的支持。
参数描述:
origImageId: 要绑定的img对象的id
dx:展示大图相对于绑定的img对象右方的x轴偏移量
dy:展示大图相对于绑定的img对象上方的y轴偏移量
mx:展示层的宽
mx在0到1之间时,取大图的宽*mx的值与小图的宽中的较大者
mx在1到10之间时,取小图的宽*mx的值与大图的宽中的较小者
mx大于10时,确保mx在大小图的宽之间,超出的话,取边界值
my:展示层的高
参照mx的值
bflag:create方法中渲染完后是否将展示层显示出来,
在onmouseover事件中使用true参数
在页面加载时初始化的话使用false参数
用法:
1、页面加载后统一预先加载,在页面上添加JavaScript脚本
window.onload = function(){
new qsoft.PopBigImage("orig",20,0,2,2).render();
//或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render();
}

或是
2、鼠标第一次进入图片时才加载本图片的显示层,在img标签中添加
onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
下载地址 https://3water.com/codes/12597.html
演示地址:http://img.3water.com/online/PopBigImage/qsoft.PopBigImage.v0.35.html

Javascript 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
vue实现跨域的方法分析
May 21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 #Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 #Javascript
javascript 兼容鼠标滚轮事件
Apr 07 #Javascript
javascript 有趣而诡异的数组
Apr 06 #Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 #Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 #Javascript
javascript 获取图片颜色
Apr 05 #Javascript
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php 团购折扣计算公式
2011/11/24 PHP
php创建session的方法实例详解
2015/01/27 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
调试php程序的简单步骤
2019/10/04 PHP
Prototype String对象 学习
2009/07/19 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
python http基本验证方法
2018/12/26 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
电脑销售顾问自荐信
2014/01/29 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
药店采购员岗位职责
2014/09/30 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
教师节随笔
2015/08/15 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
javascript的var与let,const之间的区别详解
2022/02/18 Javascript