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 相关文章推荐
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
Javascript调试工具(下载)
2007/01/09 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
医生进修自我鉴定
2014/01/19 职场文书
表演方阵解说词
2014/02/08 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
生物科学专业自荐书
2014/06/20 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
单位实习鉴定评语
2015/01/04 职场文书
机关工会工作总结2015
2015/05/26 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2015年中秋节主持词
2015/07/30 职场文书
网络研修心得体会
2016/01/08 职场文书
工伤调解协议书
2016/03/21 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技