Efek ini tidak sulit. Kuncinya adalah mengatur posisi dan proporsi.
Menangkap posisi mouse, menentukan area posisi mouse, dan event onmouseover, event onmousemove, event onmouseout
Atur proporsi gambar besar. Proporsi potongan gambar yang ditampilkan pada gambar kecil harus akurat, sebaiknya 2 kali atau 4 kali.
Terutama memperhatikan lebarnya. Gambar m.jpg yang saya miliki di sini adalah 1440X900....
Copy kode kodenya sebagai berikut:
<!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">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8">
<title>Efek kaca pembesar</title>
<gaya tipe="teks/css">
*{margin:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px merah pekat;}
#smallimg img{lebar: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;}
</gaya>
</kepala>
<tubuh>
<div id="kecilimg">
<img src="jq/m.jpg"/>
<div id="showimg"></div>
</div>
<div id="bigimg"></div>
<skrip tipe="teks/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//Filter gambar
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = fungsi(){
showimg.style.display = "blok";
bigimg.style.display = "sebaris";
show_half = showimg.offsetHeight/2;
maxWidth = smallimg.clientWidth - showimg.offsetWidth;
maxHeight = smallimg.clientHeight - showimg.offsetHeight;
//Dua variabel di atas menunjukkan area dimana showimg diperbolehkan untuk aktif.
};
smallimg.onmousemove = fungsi(e){
var e=window.event?window.event:e;
var num=bigimg.clientWidth/showimg.clientWidth;
var Top = e.clientY - smallimg.offsetTop - show_half;
var Kiri = e.clientX - smallimg.offsetLeft - show_half;
//Cara perhitungan untuk mendapatkan posisi showimg yang sedang dipindahkan adalah koordinat mouse - koordinat wadah terluar - lebar (tinggi) kotak/2
Atas = Atas<0?0:Atas>maxHeight?maxHeight:Atas;
Kiri = Kiri<0?0:Kiri>maxWidth?maxWidth:Kiri;
showimg.style.top = Atas + "px";
showimg.style.left = Kiri + "px";
bigimg.style.background = "url("+small_url+") -"+Kiri*angka+"px -"+Atas*angka+"px tanpa pengulangan";
};
smallimg.onmouseout = fungsi(){
showimg.style.display="tidak ada";
bigimg.style.latar belakang="";
bigimg.style.display="tidak ada"
};
</skrip>
</tubuh>
</html>