当前位置：首页 -> 网页设计 -> 其他相关 -> 奇妙的Javascript图片放大镜

奇妙的Javascript图片放大镜

时间： 2021-07-31 作者：daque

在flash中咱们用蒙板加上少许大略的剧本便可实行一个动静的图片夸大镜。此刻咱们只用javascript贯串css谈话也不妨简单做出这个功效。

创造思绪：“夸大镜”后有一幅后台图，它是“夸大了”的图的本来。咱们经过挪动“夸大镜”时符合安排后台图的场所，使它表露的恰巧是须要要夸大的局部。功效演练：

创造办法：

　　１）先筹备两幅实质沟通尺寸各别的图片，这边咱们找了一个400×300像素的缩略图http://edu.chinaz.com/get/website/website_other/small_hill.gif，一个800×600像素的大图big_hill.gif。而后再筹备一个“夸大镜”的图片，提防它中央局部必需是通明的，这边咱们筹备了一个绿色的方框 http://edu.chinaz.com/get/website/website_other/viewer.gif。

　　２）编写如次的代码：

　　以次是两幅图的代码，都它们动作层。第一幅是缩略图，第二幅是“夸大镜”，开始将它的后台移到不看来的场合；个中“ onclick="moveme=!moveme" ”表白历次点击它都变换“moveme”的布尔值。 <img src="http://edu.chinaz.com/get/website/website_other/small_hill.gif" id="bglayer" style="position:absolute; left:150px; top:50px;"> <img src="http://edu.chinaz.com/get/website/website_other/viewer.gif" id="myviewer" onclick="moveme=!moveme" onmousemove="viewit(this)"style="left:0;top:0;background-repeat:no-repeat;background-position:2000px 2000px;position:absolute;">

[page_break]以次是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; //该布尔值确定“夸大镜”能否随鼠标挪动，初始值为否<br> function viewit(obj){ if (moveme){ //以次两式遏制“夸大镜”的挪动： obj.style.left = event.x + parseint(document.body.scrollleft) - parseint(obj.width)/2; obj.style.top = event.y +parseint(document.body.scrolltop) - parseint(obj.height)/2; //以次几行安排当“夸大镜”挪动时其后台图的场所，使个中心移到缩略图的某点时，其后台图上相映的点也挪动到个中心。 //个中nx，ny指大图宽和高辨别是小图的几倍，bgx，bgy是后台图当移到的x,y坐标。

nx = parseint(document.all.getsize.width) / parseint(document.all.bglayer.width); bgx = (-1)*(nx-1)*(event.x -arseint(document.all.bglayer.style.left) +parseint(document.body.scrollleft)) -parseint(obj.style.left) +parseint(document.all.bglayer.style.left); ny = parseint(document.all.getsize.height) / parseint(document.all.bglayer.height); bgy = (-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); obj.style.backgroundposition = bgx+" "+bgy; } } //--></script>

奇妙的Javascript图片放大镜

相关推荐

推荐下载

热门阅览

最新排行