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 学习笔记(六)
Dec 31 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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分页显示制作详细讲解
2006/12/05 PHP
php的大小写敏感问题整理
2011/12/29 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python3.0 字典key排序
2008/12/24 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python使用re模块验证危险字符
2020/05/21 Python
QML用PathView实现轮播图
2020/06/03 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
运动会解说词50字
2014/01/18 职场文书
趣味体育活动方案
2014/02/08 职场文书
科学发展观标语
2014/10/08 职场文书
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS