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入门之事件、cookie、定时等
Oct 21 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
php中用foreach来操作数组的代码
2011/07/17 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JQuery基础语法小结
2015/02/27 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
简单了解django文件下载方式
2020/02/10 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python 实现进度条的六种方式
2021/01/06 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
放飞蜻蜓反思
2014/02/05 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
六查六看心得体会
2014/10/14 职场文书
党员剖析材料范文
2014/12/18 职场文书
罗马假日观后感
2015/06/08 职场文书
2015最新民情日记范文
2015/06/26 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书