当打开浏览器第一次点击(不要去移动)的时候，点击显示下一张图，那个相对应的大图位置有问题，
当点过几次后就不会了
我要怎么在点击的时候就算好大图相对应的位置呢
谁能帮我修正下
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 <link rel="stylesheet" type="text/css" href="style.css" />
7 <script type="text/javascript" src="miaov.js"></script>
8 </head>
9 <body>
10 <div id="div1">
11 <div class="small_pic">
12 <span class="mark"></span>
13 <span class="float_layer"></span>
14 <img src="#" width="100%" height="100%"/>
15 </div>
16 <div class="big_pic"><img src="#" /></div>
17 </div>
18 </body>
19 </html>
1 body{
2 margin:0;
3 padding:0;
4 }
5
6 #div1 {
7 width: 200px;
8 height: 200px;
9 padding: 5px;
10 border: 1px solid #ccc;
11 position: relative;
12 }
13
14 #div1 .small_pic {
15 width: 200px;
16 height: 200px;
17 background: #eee;
18 position: relative;
19 }
20 #div1 .float_layer {
21 width: 100px;
22 height: 100px;
23 border: 1px solid #000;
24 background: #fff;
25 filter: alpha(opacity: 30);
26 opacity: 0.3;
27 position: absolute;
28 top: 0;
29 left: 0;
30 display:none;
31 }
32 #div1 .mark {
33 width:100%;
34 height:100%;
35 position:absolute;
36 z-index:2;
37 left:0px;
38 top:0px;
39 background:red;
40 filter:alpha(opacity:0);
41 opacity:0;
42 }
43 #div1 .big_pic {
44 position: absolute;
45 top: -1px;
46 left: 215px;
47 width:250px;
48 height:250px;
49 overflow:hidden;
50 border:2px solid #CCC;
51 display:none;
52 }
53 #div1 .big_pic img {
54 position:absolute;
55 top: -48px;
56 left: -100px;
57 }
1 function getByClass(oParent, sClass)
2 {
3 var aEle=oParent.getElementsByTagName('*');
4 var aTmp=[];
5 var i=0;
6
7 for(i=0;i<aEle.length;i++)
8 {
9 if(aEle[i].className==sClass)
10 {
11 aTmp.push(aEle[i]);
12 }
13 }
14
15 return aTmp;
16 }
17
18 window.onload=function ()
19 {
20 var oDiv=document.getElementById('div1');
21 var oMark=getByClass(oDiv, 'mark')[0];//整个图片透明区
22 var oFloat=getByClass(oDiv, 'float_layer')[0];//移动的小框
23 var oBig=getByClass(oDiv, 'big_pic')[0];
24 var oSmall=getByClass(oDiv, 'small_pic')[0];
25
26 var iNow=0;
27 var percentX=0;
28 var percentY=0;
29
30 var dataSmall=[
31 "http://i.niupic.com/images/2015/01/07/54ac9bf45e65c.png",
32 "http://i.niupic.com/images/2015/01/07/54ac9bf6357fc.jpg",
33 "http://i.niupic.com/images/2015/01/07/54ac9bf7b496c.jpg"
34 ];
35
36 var dataBig=[
37 "http://i.niupic.com/images/2015/01/07/54ac9c0aea734.png",
38 "http://i.niupic.com/images/2015/01/07/54ac9c0531242.jpg",
39 "http://i.niupic.com/images/2015/01/07/54ac9bfb85484.jpg"
40 ];
41
42
43 oMark.onmouseover=function ()
44 {
45 oFloat.style.display='block';
46 oBig.style.display='block';
47 };
48
49 oMark.onmouseout=function ()
50 {
51 oFloat.style.display='none';
52 oBig.style.display='none';
53 };
54
55 var oImgs=oSmall.getElementsByTagName("img")[0];
56 oImgs.src=dataSmall[0];
57 var oImgb=oBig.getElementsByTagName("img")[0];
58 oImgb.src=dataBig[0];
59 dataSmall.push(dataSmall.shift());
60 dataBig.push(dataBig.shift());
61
62 function Imglocation(){
63 oImgb.style.left=-percentX*(oImgb.offsetWidth-oBig.offsetWidth)+"px";
64 oImgb.style.top=-percentY*(oImgb.offsetHeight-oBig.offsetHeight)+"px";
65 }
66
67
68 oMark.onclick=function(){
69
70 iNow++;
71
72 oImgs.src="";
73 oImgb.src="";
74
75 if(iNow>dataSmall.length){
76 iNow=1;
77 }
78
79 oImgs.src=dataSmall[iNow-1];
80 oImgb.src=dataBig[iNow-1];
81
82 Imglocation();
83
84 };
85
86 oMark.onmousemove=function (ev)
87 {
88 var oEvent=ev||event;
89 var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
90 var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
91
92 if(l<0){
93 l=0;
94 }else if(l>oMark.offsetWidth-oFloat.offsetWidth){
95 l=oMark.offsetWidth-oFloat.offsetWidth;
96 }
97
98 if(t<0){
99 t=0;
100 }else if(t>oMark.offsetHeight-oFloat.offsetHeight){
101 t=oMark.offsetHeight-oFloat.offsetHeight;
102 }
103
104 oFloat.style.left=l+'px';
105 oFloat.style.top=t+'px';
106
107 percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
108 percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
109
110 Imglocation();
111
112 };
113 };
添加回答
举报
0/150
提交
取消