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 相关文章推荐
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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显示搜索引擎来的关键词
2014/02/13 PHP
php fread读取文件注意事项
2016/09/24 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
<script defer> defer 是什么意思
2009/05/10 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
销售业务实习自我鉴定
2013/09/23 职场文书
药剂学专业应届生自荐信
2013/09/29 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
表扬通报怎么写
2015/01/16 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python