javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持

2019-11-21 01:25:21

字體：大中小

來源：轉載

供稿：網友

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);"
下載地址 //m.survivalescaperooms.com/codes/12597.html
演示地址：http://img.VeVB.COm/online/PopBigImage/qsoft.PopBigImage.v0.35.html

上一篇：javascript 表格排序和表頭浮動效果(擴展SortTable)

下一篇：常用JS代碼實例小結第1/2頁