JS图片loading及放大查看效果(兼容IE,FF)

< script  language ="JavaScript" >
<!--
var  smallX  =   150 ;  // 缩略图宽度
var  bigX  =   600 ;  // 预览窗大小,可以任意设置
var  bigY  =   450 ;
var  srcX  =   - 1 ;  // 原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var  srcY  =   - 1 ;
var  border  =   5 ;  // 边框
var  smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload = function  (){   // 初始化数据
head.innerHTML = " 图片已载入 " ;
isIE = window.event ? 1 : 0 ;  // 由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
if  (srcX ==- 1   ||  srcY ==- 1 ){srcX = bigpic.width;srcY = bigpic.height;}  //  如果有一个为-1,则使用原图大小
else {bigpic.width = srcX;bigpic.height = srcY;}
smallY = srcY * smallX / srcX;  // 按比例计算出缩略图的高
viewX = bigX / srcX * smallX;  // 计算缩略图的预览窗口大小
viewY = bigY / srcY * smallY;
bl = srcX / smallX;  // 得到缩放比例
smallpic.width = smallX;  // 初始化实例属性
smallpic.height = smallY;
smallbox.style.borderWidth = border;
smallbox.style.width = smallpic.offsetWidth + border * 2 * isIE;  // (+border*2*isIE),如果是IE就加上2倍边框以修正模型差异,FF无变化
smallbox.style.height = smallpic.offsetHeight + border * 2 * isIE;  // 以下的isIE同理,修正ie盒模型bug
bigbox.style.borderWidth = border;
bigbox.style.width = bigX + border * 2 * isIE;
bigbox.style.height = bigY + border * 2 * isIE;
view.style.left = smallbox.offsetLeft  +  border;
view.style.top = smallbox.offsetTop  +  border;
view.style.width = viewX -   ! isIE * 3 + 1 ;
view.style.height = viewY -   ! isIE * 3 + 1 ;
}
function  move(e){
var  e  =  window.event ? window.event:e;  // 得到IE或FF的event
if  ( ! isIE){vX = e.pageX - border - smallbox.offsetLeft;  // 分别在FF与IE下获得相对坐标
vY = e.pageY - border - smallbox.offsetTop}
else {vX = e.offsetX;vY = e.offsetY}
vX +=- viewX / 2 ;  // 得到缩略图的预览窗位置
vY +=- viewY / 2 ;
if  (vX  <   0 ) vX  =   0 ;  // 边界判断,不能超出缩略图的范围
if  (vY  <   0 ) vY  =   0 ;
if  (vX  >  smallX  -  viewX) vX  =  smallX  -  viewX;
if  (vY  >  smallY  -  viewY) vY  =  smallY  -  viewY;
bigpico.style.marginLeft  =   -  vX  *  bl;  // 刷新预览窗口
bigpico.style.marginTop  =   -  vY  *  bl;
view.style.left  =  vX  +  smallbox.offsetLeft  +  border;  // 刷新缩略图中预览窗口
view.style.top  =  vY  +  smallbox.offsetTop  +  border;
}
// -->
</ script >
< style  type ="text/css" >
<!--
* { padding : 0 ; margin : 0 }
body { background : black }
img { display : block ; }
#smallbox { border : 1px green solid ; float : left ; width : 0 ; height : 0 ; overflow : hidden ; font-size : 0px }
#bigbox { border : 1px green solid ; width : 0px ; height : 0px ; float : left ; overflow : hidden ; font-size : 0px }
#view { border : 1px silver solid ; width : 0px ; height : 0px ; position : absolute ; font-size : 0px }
#head { text-align : center ; line-height : 40px ; font : bold 16px/40px ; color : lime }
//-->
</ style >
< div  id ="head" > 图片loading... </ div >
< div  id ="smallbox" > <!-- 缩略图窗口// -->
< img  id ="smallpic"  src ="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49455.jpg"  border ="0"  onmousemove ="move(event)" >
</ div >
< div  id ="bigbox" > <!-- 预览窗口// --> < div  id ="bigpico" > <!-- 大图片容器// -->
< img  id ="bigpic"  src ="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49457.jpg"  border ="0" >
</ div ></ div >
< div  id ="view"  onmousemove ="if (!isIE) move(event)" ></ div > <!-- 缩略图上的预览窗// -->