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中使用inline函数的问题
Mar 08 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
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
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
php中apc缓存使用示例
2013/12/25 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Python中is与==判断的区别
2017/03/28 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python异常触发及自定义异常类解析
2019/08/06 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
语文教学感言
2014/02/06 职场文书
文秘自荐信
2014/06/28 职场文书
社区综治工作汇报
2014/10/27 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
党员反邪教心得体会
2016/01/15 职场文书
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js