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

Javascript
js返回当前网页的url
简明json介绍
JavaScript在IE中“意外地调用了方法或属性访问”
JS获得鼠标位置(兼容多浏览器ie,firefox)修正版
JavaScript 基础问答 四
支持多浏览器(IE、Firefox、Opera)剪切板复制函数
js 解决“options为空或不是对象”
走出JavaScript初学困境—js初学
JavaScript入门教程(6) Window窗口对象
JavaScript 快捷键设置实现代码
Extjs Ajax 乱码问题解决方案
JavaScript 实现模态对话框 源代码大全
[原创]js 日期加红代码 适用于各种cms
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
[原创]javascript 改变字体大小方法集合
javascript 单行文字向上跑马灯滚动显示
一个简单的javascript类定义例子
javascript 类定义的4种方法
javascript类继承机制的原理分析
firefox(火狐)和ie浏览器禁止右键和禁止复制的代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 489 ::
收藏到网摘: 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