图片局部放大

最新推荐文章于 2022-10-13 05:15:00 发布

weixin_34301307

最新推荐文章于 2022-10-13 05:15:00 发布

阅读量117

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Yang-king/p/4624885.html

版权

 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" οnmοusemοve="biggen(event,this)"/>
54    <!-- <input type="text" id="text1"/>-->
55     <div id="div1">
56     </div>
57 </body>
58 </html>

转载于:https://www.cnblogs.com/Yang-king/p/4624885.html

weixin_34301307

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片局部放大

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&...
复制链接

扫一扫