javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
更新時(shí)間:2009年04月07日 22:55:49 作者:
一般頁面的的圖片為了布局考慮,顯示大小都小于實(shí)際大小。
鼠標(biāo)在圖片上移動(dòng)時(shí),在旁邊展示一個(gè)跟此圖片顯示大小一樣的層。并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個(gè)層中。
qsoft.PopBigImage.v0.35.demo.rar
新特性:
1、不需要onload加載和指定id了,在img中加個(gè)標(biāo)記就好,第一鼠標(biāo)進(jìn)入時(shí)動(dòng)態(tài)生成顯示層
2、可以隨意調(diào)整,右邊的展示層的大小了。
qsoft.PopBigImage
version:0.35
author: kimmking@163.com
date: 2009年3月26日 15:20:50
功能描述:
一般頁面的的圖片為了布局考慮,顯示大小都小于實(shí)際大小。
鼠標(biāo)在圖片上移動(dòng)時(shí),在旁邊展示一個(gè)跟此圖片顯示大小一樣的層。
并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個(gè)層中。
v0.1:實(shí)現(xiàn)了IE下的鼠標(biāo)滑動(dòng)小圖動(dòng)態(tài)展示對(duì)應(yīng)的放大局部圖的功能。
v0.2:實(shí)現(xiàn)了Firefox的兼容支持,修改了IE下傳遞偏移0,0時(shí)有空隙的對(duì)不齊問題。
v0.3:實(shí)現(xiàn)了鼠標(biāo)第一次進(jìn)入圖片時(shí)動(dòng)態(tài)創(chuàng)建顯示層。提供了一個(gè)靜態(tài)創(chuàng)建方法。
v0.35:加入了對(duì)google chrome瀏覽器的支持。
參數(shù)描述:
origImageId: 要綁定的img對(duì)象的id
dx:展示大圖相對(duì)于綁定的img對(duì)象右方的x軸偏移量
dy:展示大圖相對(duì)于綁定的img對(duì)象上方的y軸偏移量
mx:展示層的寬
mx在0到1之間時(shí),取大圖的寬*mx的值與小圖的寬中的較大者
mx在1到10之間時(shí),取小圖的寬*mx的值與大圖的寬中的較小者
mx大于10時(shí),確保mx在大小圖的寬之間,超出的話,取邊界值
my:展示層的高
參照mx的值
bflag:create方法中渲染完后是否將展示層顯示出來,
在onmouseover事件中使用true參數(shù)
在頁面加載時(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)第一次進(jìn)入圖片時(shí)才加載本圖片的顯示層,在img標(biāo)簽中添加
onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
下載地址 http://chabaoo.cn/codes/12597.html
演示地址:http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage.v0.35.html
新特性:
1、不需要onload加載和指定id了,在img中加個(gè)標(biāo)記就好,第一鼠標(biāo)進(jìn)入時(shí)動(dòng)態(tài)生成顯示層
2、可以隨意調(diào)整,右邊的展示層的大小了。
qsoft.PopBigImage
version:0.35
author: kimmking@163.com
date: 2009年3月26日 15:20:50
功能描述:
一般頁面的的圖片為了布局考慮,顯示大小都小于實(shí)際大小。
鼠標(biāo)在圖片上移動(dòng)時(shí),在旁邊展示一個(gè)跟此圖片顯示大小一樣的層。
并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個(gè)層中。
v0.1:實(shí)現(xiàn)了IE下的鼠標(biāo)滑動(dòng)小圖動(dòng)態(tài)展示對(duì)應(yīng)的放大局部圖的功能。
v0.2:實(shí)現(xiàn)了Firefox的兼容支持,修改了IE下傳遞偏移0,0時(shí)有空隙的對(duì)不齊問題。
v0.3:實(shí)現(xiàn)了鼠標(biāo)第一次進(jìn)入圖片時(shí)動(dòng)態(tài)創(chuàng)建顯示層。提供了一個(gè)靜態(tài)創(chuàng)建方法。
v0.35:加入了對(duì)google chrome瀏覽器的支持。
參數(shù)描述:
origImageId: 要綁定的img對(duì)象的id
dx:展示大圖相對(duì)于綁定的img對(duì)象右方的x軸偏移量
dy:展示大圖相對(duì)于綁定的img對(duì)象上方的y軸偏移量
mx:展示層的寬
mx在0到1之間時(shí),取大圖的寬*mx的值與小圖的寬中的較大者
mx在1到10之間時(shí),取小圖的寬*mx的值與大圖的寬中的較小者
mx大于10時(shí),確保mx在大小圖的寬之間,超出的話,取邊界值
my:展示層的高
參照mx的值
bflag:create方法中渲染完后是否將展示層顯示出來,
在onmouseover事件中使用true參數(shù)
在頁面加載時(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)第一次進(jìn)入圖片時(shí)才加載本圖片的顯示層,在img標(biāo)簽中添加
onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);"
下載地址 http://chabaoo.cn/codes/12597.html
演示地址:http://img.jb51.net/online/PopBigImage/qsoft.PopBigImage.v0.35.html
相關(guān)文章
SuperSlide2實(shí)現(xiàn)圖片滾動(dòng)特效
SuperSlide2,實(shí)現(xiàn)圖片滾動(dòng),感覺很強(qiáng)大,這里只是簡單的演示其中一種類型,想看更多類型的話,可以去http://www.superslide2.com 查看,2014-06-06javascript 火狐(firefox)不顯示本地圖片問題解決
在Firefox一直不能用js做出圖片預(yù)覽的效果,下面這個(gè)即可解決,用替換的方法實(shí)現(xiàn)firefox支持得的路徑格式2008-07-07JS圖片瀏覽組件PhotoLook的公開屬性方法介紹和進(jìn)階實(shí)例代碼
這次接著來介紹PhotoLook(前文介紹的組件)現(xiàn)在可供使用的屬性和方法,接著展示一個(gè)叫前文不一樣的例子2010-11-11鼠標(biāo)移動(dòng)到一張圖片時(shí)變?yōu)榱硪粡垐D片
鼠標(biāo)移動(dòng)到一張圖片時(shí)變?yōu)榱硪粡垐D片...2006-12-12非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
一個(gè)效果如果沒有一個(gè)合理的布局,是很難作出來的,所以布局是非常重要的基礎(chǔ)! 下邊的效果,是試著假設(shè)在布局我無法改的情況下,能過外邊的CSS或Javascript來實(shí)現(xiàn)一個(gè)滑動(dòng)圖片效果!2009-04-04