javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
更新時間:2009年04月07日 22:55:49 作者:
一般頁面的的圖片為了布局考慮,顯示大小都小于實際大小。
鼠標(biāo)在圖片上移動時,在旁邊展示一個跟此圖片顯示大小一樣的層。并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個層中。
qsoft.PopBigImage.v0.35.demo.rar
新特性:
1、不需要onload加載和指定id了,在img中加個標(biāo)記就好,第一鼠標(biāo)進入時動態(tài)生成顯示層
2、可以隨意調(diào)整,右邊的展示層的大小了。
qsoft.PopBigImage
version:0.35
author: kimmking@163.com
date: 2009年3月26日 15:20:50
功能描述:
一般頁面的的圖片為了布局考慮,顯示大小都小于實際大小。
鼠標(biāo)在圖片上移動時,在旁邊展示一個跟此圖片顯示大小一樣的層。
并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個層中。
v0.1:實現(xiàn)了IE下的鼠標(biāo)滑動小圖動態(tài)展示對應(yīng)的放大局部圖的功能。
v0.2:實現(xiàn)了Firefox的兼容支持,修改了IE下傳遞偏移0,0時有空隙的對不齊問題。
v0.3:實現(xiàn)了鼠標(biāo)第一次進入圖片時動態(tài)創(chuàng)建顯示層。提供了一個靜態(tài)創(chuàng)建方法。
v0.35:加入了對google chrome瀏覽器的支持。
參數(shù)描述:
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參數(shù)
在頁面加載時初始化的話使用false參數(shù)
用法:
1、頁面加載后統(tǒng)一預(yù)先加載,在頁面上添加JavaScript腳本
window.onload = function(){
new qsoft.PopBigImage("orig",20,0,2,2).render();
//或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render();
}
或是
2、鼠標(biāo)第一次進入圖片時才加載本圖片的顯示層,在img標(biāo)簽中添加
onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
下載地址 http://www.dbjr.com.cn/codes/12597.html
演示地址:http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage.v0.35.html
新特性:
1、不需要onload加載和指定id了,在img中加個標(biāo)記就好,第一鼠標(biāo)進入時動態(tài)生成顯示層
2、可以隨意調(diào)整,右邊的展示層的大小了。
qsoft.PopBigImage
version:0.35
author: kimmking@163.com
date: 2009年3月26日 15:20:50
功能描述:
一般頁面的的圖片為了布局考慮,顯示大小都小于實際大小。
鼠標(biāo)在圖片上移動時,在旁邊展示一個跟此圖片顯示大小一樣的層。
并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個層中。
v0.1:實現(xiàn)了IE下的鼠標(biāo)滑動小圖動態(tài)展示對應(yīng)的放大局部圖的功能。
v0.2:實現(xiàn)了Firefox的兼容支持,修改了IE下傳遞偏移0,0時有空隙的對不齊問題。
v0.3:實現(xiàn)了鼠標(biāo)第一次進入圖片時動態(tài)創(chuàng)建顯示層。提供了一個靜態(tài)創(chuàng)建方法。
v0.35:加入了對google chrome瀏覽器的支持。
參數(shù)描述:
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參數(shù)
在頁面加載時初始化的話使用false參數(shù)
用法:
1、頁面加載后統(tǒng)一預(yù)先加載,在頁面上添加JavaScript腳本
window.onload = function(){
new qsoft.PopBigImage("orig",20,0,2,2).render();
//或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render();
}
或是
2、鼠標(biāo)第一次進入圖片時才加載本圖片的顯示層,在img標(biāo)簽中添加
onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
下載地址 http://www.dbjr.com.cn/codes/12597.html
演示地址:http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage.v0.35.html
相關(guān)文章
javascript 火狐(firefox)不顯示本地圖片問題解決
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個即可解決,用替換的方法實現(xiàn)firefox支持得的路徑格式2008-07-07JS圖片瀏覽組件PhotoLook的公開屬性方法介紹和進階實例代碼
這次接著來介紹PhotoLook(前文介紹的組件)現(xiàn)在可供使用的屬性和方法,接著展示一個叫前文不一樣的例子2010-11-11非常不錯的 子鼠 滑動圖片效果 Javascript+CSS
一個效果如果沒有一個合理的布局,是很難作出來的,所以布局是非常重要的基礎(chǔ)! 下邊的效果,是試著假設(shè)在布局我無法改的情況下,能過外邊的CSS或Javascript來實現(xiàn)一個滑動圖片效果!2009-04-04