图片局部放大 

 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>

 

posted on 2015-07-06 17:20  零度CC  阅读(229)  评论(0)    收藏  举报

导航