1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>图片局部放大</title>
6 <style type="text/css">
7 #img1
8 {
9 width:320px;
10 height:200px;
11 }
12 #div1
13 {
14 position:absolute;
15 top:220px;
16 left:100px;
17 width:320px;
18 height:200px;
19 background-color:#FCC;
20 background-repeat:no-repeat;
21 background-image:url(images/小黄人1.jpg);
22 }
23 </style>
24 <script type="text/javascript" language="javascript">
25 var $=function(id){return document.getElementById(id);};
26 function biggen(e,obj)
27 {
28 // topy 和 topx 表示obj对象左上角的坐标
29 var topy=obj.getBoundingClientRect().top;
30 var topx=obj.getBoundingClientRect().left;
31 // x 和 y 表示鼠标以obj对象左上角为坐标原点的坐标
32 var x=e.clientX-topx;
33 var y=e.clientY-topy;
34 // 4 表示图片的x 和 y 分别缩小的倍数
35 var truex=x-x*4;
36 var truey=y-y*4;
37 // -768 和 -400 表示向上最多移动400 向左最多移动768
38 // 原图大小为 1280 和 800 ，div大小为320 200
39 if(truex<-768)
40 {
41 truex=-768;
42 }
43 if(truey<-400)
44 {
45 truey=-400;
46 }
47 $("div1").style.backgroundPosition=truex+"px "+truey+"px";
48 }
49 </script>
50 </head>
51
52 <body>
53 <img id="img1" src="images/小黄人1.jpg" onmousemove="biggen(event,this)"/>
54 <!-- <input type="text" id="text1"/>-->
55 <div id="div1">
56 </div>
57 </body>
58 </html>
时间： 2024-10-12 20:39:19