JavaScript放大镜的特效_建站学-个人建站指南,网页制作,网站设计,网站制作教程

给大家一个JavaScript放大镜的特效，运行下面的程序试试效果吧

<html> <head> <title>放大镜效果-建站学www.jzxue.com</title> <base href="http://www.jzxue.com/System/uploads/userup/1103/"> <script type="text/javascript"> /* *特别注意: *放大的倍数=原图的大小/小图片显示的大小 *自己查看原图片的大小，我这是 400*400 px */ //图片对象 var imgObj; //放大镜div对象 var zoomDivObj; //显示小图片的div var mainDivObj; //放大后显示图片的div var showDivObj; //放大镜的大小 var zoomSize=50; //放大镜的倍数(不能随便填) var zoomMultiple=2; //图片的路径 var imgPath="130936345148.gif"; //小图片显示的大小 var imgW=200; var imgH=200; //显示的位置 var left=100; var top=10; //放大镜div的透明度(0~100) var opacity=50; //放大镜div的颜色 var rgb="223,223,223"; function load() { if(zoomDivObj==null) createZoomDivObj(); if(mainDivObj==null) createMainDivObj(); if(showDivObj==null) createShowDivObj(); if(imgObj==null) createImgObj(); zoomDivObj.style.width=zoomSize+"px"; zoomDivObj.style.height=zoomSize+"px"; showDivObj.style.width=zoomSize*zoomMultiple+"px"; showDivObj.style.height=zoomSize*zoomMultiple+"px"; showDivObj.style.backgroundImage="url("+imgPath+")"; imgObj.src=imgPath; imgObj.style.width=imgW+"px"; imgObj.style.height=imgH+"px"; mainDivObj.style.width=imgW+"px"; mainDivObj.style.height=imgH+"px"; mainDivObj.style.left=left+"px"; mainDivObj.style.top=top+"px"; showDivObj.style.left=left+imgW+50+"px"; showDivObj.style.top=top+"px"; zoomDivObj.style.backgroundColor="rgb("+rgb+")"; //两个都要写，为了IE 和火狐的通用 zoomDivObj.style.filter="alpha(opacity="+opacity+")"; zoomDivObj.style.opacity=opacity/100; } function showZoomDiv() { if(zoomDivObj==null) createZoomDivObj(); zoomDivObj.style.visibility="visible"; } function moveZoomDiv(e) { if(zoomDivObj==null) createZoomDivObj(); var w=zoomDivObj.style.width.replace("px","")-0; var h=zoomDivObj.style.height.replace("px","")-0; if(mainDivObj==null) createMainDivObj(); var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0); var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0); window.status=mouseX+" "+mouseY; zoomDivObj.style.left=mouseX-(w/2)+"px"; zoomDivObj.style.top=mouseY-(h/2)+"px"; if(showDivObj==null) createShowDivObj(); showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px"; } function hiddenZoomDiv() { if(zoomDivObj==null) createZoomDivObj(); //zoomDivObj.style.visibility="hidden"; } function createZoomDivObj() { zoomDivObj=document.getElementById("zoom_div_id"); } function createMainDivObj() { mainDivObj=document.getElementById("main_div_id"); } function createShowDivObj() { showDivObj=document.getElementById("show_div_id"); } function createImgObj() { imgObj=document.getElementById("img_id"); } </script> </head> <body onmousemove="moveZoomDiv(event)" onload="load()"> <div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" > <img id="img_id"> <div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"></div> </div> <div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" ></div> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：admin)

搜索

热门标签:

JavaScript放大镜的特效