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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
JQuery球队选择实例
May 18 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
解析isset与is_null的区别
2013/08/09 PHP
CI框架Session.php源码分析
2014/11/03 PHP
各种快递查询--Api接口
2016/04/26 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jQuery.each使用详解
2015/07/07 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python实现图片筛选程序
2018/10/24 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
如何用python免费看美剧
2020/08/11 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
商务主管岗位职责
2013/12/08 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
副董事长岗位职责
2014/04/02 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015年财政所工作总结
2015/04/25 职场文书
社会实践单位意见
2015/06/05 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android