在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜。现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果。 制作思路 ：“放大镜”后有一幅背景图，它是“放大了”的图的原本。我们通过移动“放大镜”时适当调整背景图的位置，使它显示的刚好是需要要放大的部分。 效果演示 ： (点这里在新窗口中查看 )制作步骤 ： <img src= "small_hill.gif" id= "bgLayer" style= "position:absolute; left:150px; top:50px;" > "viewer.gif" id= "myviewer" onclick= "moveme=!moveme" onmousemove= "viewit(this)" "left:0;top:0;background-repeat:no-repeat; background-position:2000px 2000px;position:absolute;" >
以下是JavaScript脚本: <script language="JavaScript"> <!-- var viewer_bgcolor= "#FFFFFF" ; //放大镜的背景色，建议设成和网页背景色相同。 var bigmap= "big_hill.gif" ; //大图路径 document .all .myviewer.style.backgroundImage= 'url(' + bigmap+ ')' ; document .all .myviewer.style.backgroundColor= viewer_bgcolor; //因为大图作为背景无法设定和读取它的尺寸，只好把它的一个副本作为实图，但不可见： document .write ( '<img id="getsize" style="position:absolute; left:-2000px; top:-2000px;" src="' + bigmap+ '">' ) ; var moveme= false ; //该布尔值决定“放大镜”是否随鼠标移动，初始值为否 function viewit( obj){ if ( moveme){ //以下两行控制“放大镜”的移动： = event .x+ parseInt ( document .body .scrollLeft) - parseInt ( obj.width) / 2 ; = event .y+ parseInt ( document .body .scrollTop) - parseInt ( obj.height) / 2 ; //以下几行调整当“放大镜”移动时其背景图的位置，使其中心移到缩略图的某点时，其背景图上相应的点也移动到其中心。 Nx= parseInt ( document .all .getsize.width) / parseInt ( document .all .bgLayer.width) ; = ( - 1 ) * ( Nx- 1 ) * ( event .x- parseInt ( document .all .bgLayer.style.left) + parseInt ( document .body .scrollLeft)) - parseInt ( obj.style.left) + parseInt ( document .all .bgLayer.style.left) ; = parseInt ( document .all .getsize.height) / parseInt ( document .all .bgLayer.height) ; = ( - 1 ) * ( Ny- 1 ) * ( event .y- parseInt ( document .all .bgLayer.style.top) + parseInt ( document .body .scrollTop)) - parseInt ( obj.style.top) + parseInt ( document .all .bgLayer.style.top) ; = bgx+ " " + bgy; } //--> </script> 如需引入外部Js需刷新才能执行 ]
发表于 2006-7-20 00:00:00
