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实现div的显示和隐藏的小例子
Jun 25 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 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
留言板翻页的实现详解
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
PHP Mysql编程之高级技巧
2008/08/27 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
web前端开发也需要日志
2010/12/09 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python通过post提交数据的方法
2015/05/06 Python
对pandas中apply函数的用法详解
2018/04/10 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python的faker库用法
2019/11/28 Python
python爬虫用mongodb的理由
2020/07/28 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
女大学生个人求职信
2013/12/09 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
审计主管岗位职责
2014/01/31 职场文书
保护环境演讲稿
2014/05/10 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python