当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持

Javascript
IE Firefox 使用自定义标签的区别
Javascript 圆角div的实现代码
js 获取网络图片的高度和宽度的实现方法(变通了下)
JavaScript 对象成员的可见性说明
JQuery困惑—包装集 DOM节点
JavaScript 三种创建对象的方法
半角全角相互转换的js函数
显示js对象所有属性和方法的函数
实现JavaScript中继承的三种方式
JavaScript 函数式编程的原理
JavaScript 定义function的三种方式小结
JavaScript 基于原型的对象(创建、调用)
层序遍历在ExtJs的TreePanel中的应用
将jQuery应用于login页面的问题及解决
document.onreadystatechange事件的用法分析
JS 仿Flash动画放大/缩小容器
javascript 定时自动切换的选项卡Tab
图片友情链接滚动 横向,带控制按钮
简单的加密css地址防止别人下载你的CSS文件的方法
图片与JavaScript配合做出个性滚动条

Javascript 中的 javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 307 ::
收藏到网摘: n/a

一般页面的的图片为了布局考虑,显示大小都小于实际大小。 鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。 qsoft.PopBigImage.v0.35.demo.rar
新特性:
1、不需要onload加载和指定id了,在img中加个标记就好,第一鼠标进入时动态生成显示层
2、可以随意调整,右边的展示层的大小了。
qsoft.PopBigImage
version:0.35
author: [email protected]
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);"
下载地址 http://www.ruanchen.com/"http://img.ruanchen.com/" style="color: #000">http://img.ruanchen.com/nline/PopBigImage/qsoft.PopBigImage.v0.35.html