هذا التأثير ليس صعبًا. المفتاح هو ضبط الموضع والنسبة.
التقاط موضع الماوس، وتحديد منطقة موضع الماوس، وحدث onmouseover، وحدث onmousemove، وحدث onmouseout
ضبط نسبة الصورة الكبيرة يجب أن تكون نسبة الصورة المقطوعة المعروضة على الصورة الصغيرة دقيقة، ويفضل مرتين أو 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>
<نمط النوع = "نص/CSS">
*{الهامش:0;الحشو:0;}
#smallimg{width:360px;float:left;position:relative;border:1px أحمر خالص;}
#smallimg img{width:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px Solid #ccc;display:none;}
#showimg{width:100px;height:100px;background:#fff;cursor:move;position:absolute;border:1px Solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}
</نمط>
</الرأس>
<الجسم>
<div معرف = "smallimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<نوع البرنامج النصي = "نص/جافا سكريبت">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var Smallimg = $("smallimg");
var showimg = $("showimg");//تصفية الصورة
فار bigimg = $("bigimg");
var Small_url = Smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
Smallimg.onmouseover = function(){
showimg.style.display = "block";
bigimg.style.display = "inline";
show_half = showimg.offsetHeight/2;
maxWidth = Smallimg.clientWidth - showimg.offsetWidth;
maxHeight = Smallimg.clientHeight - showimg.offsetHeight;
// يشير المتغيران أعلاه إلى المنطقة التي يُسمح فيها بأن يكون showimg نشطًا.
};
Smallimg.onmousemove = وظيفة(ه){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - Smallimg.offsetTop - show_half؛
var Left = e.clientX - Smallimg.offsetLeft - show_half;
// طريقة الحساب للحصول على موضع العرض المتحرك حاليًا هي إحداثيات الماوس - إحداثيات الحاوية الخارجية - عرض (ارتفاع) الصندوق/2
Top = Top<0?0:Top>maxHeight?maxHeight:Top;
Left = Left<0?0:Left>maxWidth?maxWidth:Left;
showimg.style.top = Top + "px";
showimg.style.left = Left + "px";
bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
Smallimg.onmouseout = function(){
showimg.style.display="none";
bigimg.style.background = "";
bigimg.style.display = "لا شيء"
};
</script>
</الجسم>
</html>