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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP排序算法的复习和总结
2012/02/15 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python实现的自动发送消息功能详解
2019/08/15 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
openCV提取图像中的矩形区域
2020/07/21 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang