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 学习笔记(十五)
Jan 28 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
js判断两个数组相等的5种方法
May 06 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定义字符串的四种方式详解
2018/02/06 PHP
什么是JavaScript
2009/08/13 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
详解如何较好的使用js
2016/12/16 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python 文件操作删除某行的实例
2017/09/04 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python如何实现int函数的方法示例
2018/02/19 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python实现快递价格查询系统
2020/03/03 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
高三政治教学反思
2014/02/06 职场文书
小学生校园广播稿
2014/09/28 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers