เอฟเฟกต์นี้ทำได้ไม่ยาก สิ่งสำคัญคือ การกำหนดตำแหน่งและสัดส่วน
จับตำแหน่งเมาส์ กำหนดพื้นที่ตำแหน่งเมาส์ และเหตุการณ์ onmouseover เหตุการณ์ onmousemove เหตุการณ์ onmouseout
กำหนดสัดส่วนของภาพขนาดใหญ่ สัดส่วนของภาพตัดที่แสดงบนภาพขนาดเล็กควรมีความแม่นยำ 2 เท่าหรือ 4 เท่า
คำนึงถึงความกว้างเป็นหลัก รูปภาพ m.jpg ที่ฉันมีคือ 1440X900....
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>เอฟเฟกต์แว่นขยาย</title>
<style type="text/css">
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
#smallimg{width:360px;float:left;position:relative;border:1px สีแดงทึบ;}
#smallimg img{ความกว้าง:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{width:100px;height:100px;พื้นหลัง:#fff;cursor:move;position:absolute;border:1px solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}
</สไตล์>
</หัว>
<ร่างกาย>
<div id="smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<script type="text/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var Smallimg = $("smallimg");
var showimg = $("showimg");//กรองรูปภาพ
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = ความสูงสูงสุด = 0;
smallimg.onmouseover = ฟังก์ชั่น () {
showimg.style.display = "บล็อก";
bigimg.style.display = "อินไลน์";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//ตัวแปรสองตัวข้างต้นระบุถึงพื้นที่ที่อนุญาตให้ showimg ทำงาน
-
smallimg.onmousemove = ฟังก์ชั่น (e) {
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var ซ้าย = e.clientX - smallimg.offsetLeft - show_half;
//วิธีคำนวณเพื่อให้ได้ตำแหน่ง showimg ที่ย้ายอยู่ในปัจจุบันคือพิกัดของเมาส์ - พิกัดของคอนเทนเนอร์ด้านนอกสุด - ความกว้าง (ความสูง) ของกล่อง/2
ด้านบน = ด้านบน<0?0:ด้านบน>maxHeight?maxHeight:ด้านบน;
ซ้าย = ซ้าย<0?0:ซ้าย>maxWidth?maxWidth:ซ้าย;
showimg.style.top = ด้านบน + "px";
showimg.style.left = ซ้าย + "px";
bigimg.style.พื้นหลัง = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
-
smallimg.onmouseout = ฟังก์ชั่น(){
showimg.style.display = "ไม่มี";
bigimg.style.พื้นหลัง = "";
bigimg.style.display = "ไม่มี"
-
</สคริปต์>
</ร่างกาย>
</html>