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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
javascript Object与Function使用
Jan 11 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
jQuery设计思想
Mar 07 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
详解如何使用Node.js实现热重载页面
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 编程的 5个良好习惯
2009/02/20 PHP
php时区转换转换函数
2014/01/07 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python实现的分层随机抽样案例
2020/02/25 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
秋季运动会通讯稿
2014/01/24 职场文书
母校寄语大全
2014/04/10 职场文书
教师考核材料
2014/05/21 职场文书
2015年化验员工作总结
2015/04/10 职场文书
护士2015年终工作总结
2015/04/29 职场文书
靠谱的活动总结
2019/04/16 职场文书
MySQL锁机制
2021/04/05 MySQL
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Redis RDB技术底层原理详解
2021/09/04 Redis