011 client系列案例

一：Client系列

1.说明

　　clientWidth：不包括边框的可视区的宽

　　clientHeight：可视区的高，不包括边框

　　clientLeft：左边框的宽度

　　clientTop：上面框的宽度

2.示例-图片跟着鼠标飞

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img {
 8             position: absolute;
 9         }
10     </style>
11 </head>
12 <body>
13     <img src="image/tianshi.gif" alt="" id="img">
14     <script>
15         //文档的鼠标移动事件
16         document.onmousemove=function (e) {
17             e=window.event||e;
18             document.getElementById("img").style.left=e.clientX+"px";
19             document.getElementById("img").style.top=e.clientY+"px";
20         }
21     </script>
22 </body>
23 </html>

　　但是存在一个问题，如果将heigh加大的时候，滑动鼠标，图片会上移，离开鼠标

　　问题：

　　　　clientY：可视区域的纵坐标

　　解决：

　　　　pageY: 相对于页面顶部的坐标

　　　　但是，这种在谷歌与火狐中可以使用，但是在IE8中不能使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body {
 8             height: 2000px;
 9         }
10         img {
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     <img src="image/tianshi.gif" alt="" id="img">
17     <script>
18         //文档的鼠标移动事件
19         document.onmousemove=function (e) {
20             e=window.event||e;
21             document.getElementById("img").style.left=e.pageX+"px";
22             document.getElementById("img").style.top=e.pageY+"px";
23         }
24     </script>
25 </body>
26 </html>

　　继续解决：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body {
 8             height: 2000px;
 9         }
10         img {
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16     <img src="image/tianshi.gif" alt="" id="img">
17     <script>
18         //文档的鼠标移动事件
19         document.onmousemove=function (e) {
20             e=window.event||e;
21             document.getElementById("img").style.left=e.clientX+getscroll().left+"px";
22             document.getElementById("img").style.top=e.clientY+getscroll().top+"px";
23         }
24 
25         function getscroll() {
26             return {
27                 top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
28                 left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
29             };
30         }
31     </script>
32 </body>
33 </html>

　　效果：

　　

二：案例

1.拖拽案例

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4   <meta charset="UTF-8">
  5   <title></title>
  6   <style>
  7     .login-header {
  8       width: 100%;
  9       text-align: center;
 10       height: 30px;
 11       font-size: 24px;
 12       line-height: 30px;
 13     }
 14 
 15     * {
 16       padding: 0px;
 17       margin: 0px;
 18     }
 19 
 20     .login {
 21       width: 512px;
 22       position: absolute;
 23       border: #ebebeb solid 1px;
 24       height: 280px;
 25       left: 50%;
 26       right: 50%;
 27       background: #ffffff;
 28       box-shadow: 0px 0px 20px #ddd;
 29       z-index: 9999;
 30       margin-left: -250px;
 31       margin-top: 140px;
 32       display: none;
 33     }
 34 
 35     .login-title {
 36       width: 100%;
 37       margin: 10px 0px 0px 0px;
 38       text-align: center;
 39       line-height: 40px;
 40       height: 40px;
 41       font-size: 18px;
 42       position: relative;
 43       cursor: move;
 44       -moz-user-select: none; /*火狐*/
 45       -webkit-user-select: none; /*webkit浏览器*/
 46       -ms-user-select: none; /*IE10*/
 47       -khtml-user-select: none; /*早期浏览器*/
 48       user-select: none;
 49     }
 50 
 51     .login-input-content {
 52       margin-top: 20px;
 53     }
 54 
 55     .login-button {
 56       width: 50%;
 57       margin: 30px auto 0px auto;
 58       line-height: 40px;
 59       font-size: 14px;
 60       border: #ebebeb 1px solid;
 61       text-align: center;
 62     }
 63 
 64     .login-bg {
 65       width: 100%;
 66       height: 100%;
 67       position: fixed;
 68       top: 0px;
 69       left: 0px;
 70       background: #000000;
 71       filter: alpha(opacity=30);
 72       -moz-opacity: 0.3;
 73       -khtml-opacity: 0.3;
 74       opacity: 0.3;
 75       display: none;
 76     }
 77 
 78     a {
 79       text-decoration: none;
 80       color: #000000;
 81     }
 82 
 83     .login-button a {
 84       display: block;
 85     }
 86 
 87     .login-input input.list-input {
 88       float: left;
 89       line-height: 35px;
 90       height: 35px;
 91       width: 350px;
 92       border: #ebebeb 1px solid;
 93       text-indent: 5px;
 94     }
 95 
 96     .login-input {
 97       overflow: hidden;
 98       margin: 0px 0px 20px 0px;
 99     }
100 
101     .login-input label {
102       float: left;
103       width: 90px;
104       padding-right: 10px;
105       text-align: right;
106       line-height: 35px;
107       height: 35px;
108       font-size: 14px;
109     }
110 
111     .login-title span {
112       position: absolute;
113       font-size: 12px;
114       right: -20px;
115       top: -30px;
116       background: #ffffff;
117       border: #ebebeb solid 1px;
118       width: 40px;
119       height: 40px;
120       border-radius: 20px;
121     }
122 
123 
124   </style>
125 </head>
126 <body>
127   <div class="login-header">
128     <a id="link" href="javascript:void(0);">点击，弹出登录框</a>
129   </div>
130   <div id="login" class="login">
131     <div id="title" class="login-title">登录会员
132       <span>
133         <a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
134       </span>
135     </div>
136     <div class="login-input-content">
137       <div class="login-input">
138         <label>用户名：</label>
139         <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
140       </div>
141       <div class="login-input">
142         <label>登录密码：</label>
143         <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
144       </div>
145     </div>
146     <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
147   </div><!--登录框-->
148   <div id="bg" class="login-bg"></div><!--遮挡层-->
149 
150   <script>
151 
152     //获取超链接,注册点击事件,显示登录框和遮挡层
153     document.getElementById("link").onclick = function (e) {
154       document.getElementById("login").style.display = "block";
155       document.getElementById("bg").style.display = "block";
156       e.stopPropagation();
157     };
158 
159     //获取关闭,注册点击事件,隐藏登录框和遮挡层
160     document.getElementById("closeBtn").onclick = function () {
161       document.getElementById("login").style.display = "none";
162       document.getElementById("bg").style.display = "none";
163       e.stopPropagation();
164     };
165 
166     //按下鼠标,移动鼠标,移动登录框
167     document.getElementById("title").onmousedown = function (e) {
168       //获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
169       var spaceX = e.clientX - document.getElementById("login").offsetLeft;
170       var spaceY = e.clientY - document.getElementById("login").offsetTop;
171       //移动的事件
172       document.onmousemove = function (e) {
173         //新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
174         var x = e.clientX - spaceX+250;
175         var y = e.clientY - spaceY-140;
176         document.getElementById("login").style.left = x + "px";
177         document.getElementById("login").style.top = y + "px";
178 
179       }
180     };
181 
182     document.onmouseup=function () {
183       document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
184     };
185 
186     document.onclick=function () {
187       document.getElementById("login").style.display="none";
188       document.getElementById("bg").style.display = "none";
189     };
190 
191   </script>
192 <!--  <script>-->
193 
194 <!--    // 点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框-->
195 <!--    document.getElementById("link").onclick=function (e) {-->
196 <!--      document.getElementById("login").style.display="block";-->
197 <!--        //下面的两个是阻止事件冒泡的-->
198 <!--        window.event.cancelBubble=true;-->
199 <!--        e.stopPropagation();-->
200 <!--      };-->
201 <!--      document.onclick=function () {-->
202 <!--        document.getElementById("login").style.display="none";-->
203 <!--        console.log("隐藏了");-->
204 <!--      };-->
205 <!--  </script>-->
206 
207 </body>
208 </html>

　　效果：

　　

2.程序

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4   <meta charset="UTF-8">
  5   <title>哈哈</title>
  6   <style>
  7     * {
  8       margin: 0;
  9       padding: 0;
 10     }
 11 
 12     .box {
 13       width: 350px;
 14       height: 350px;
 15       margin: 100px;
 16       border: 1px solid #ccc;
 17       position: relative;
 18     }
 19 
 20     .big {
 21       width: 400px;
 22       height: 400px;
 23       position: absolute;
 24       top: 0;
 25       left: 360px;
 26       border: 1px solid #ccc;
 27       overflow: hidden;
 28       display: none;
 29     }
 30 
 31     .mask {
 32       width: 175px;
 33       height: 175px;
 34       background: rgba(255, 255, 0, 0.4);
 35       position: absolute;
 36       top: 0px;
 37       left: 0px;
 38       cursor: move;
 39       display: none;
 40     }
 41 
 42     .small {
 43       position: relative;
 44     }
 45   </style>
 46 </head>
 47 <body>
 48 <div class="box" id="box">
 49   <div class="small"><!--小层-->
 50     <img src="images/small.png" width="350" alt=""/>
 51     <div class="mask"></div><!--遮挡层-->
 52   </div><!--小图-->
 53   <div class="big"><!--大层-->
 54     <img src="images/big.jpg" width="800" alt=""/><!--大图-->
 55   </div><!--大图-->
 56 </div>
 57 <!--导入外部的js文件-->
 58 <script src="common.js"></script>
 59 <script>
 60 
 61   //获取需要的元素
 62   var box = my$("box");
 63   //获取小图的div
 64   var small = box.children[0];
 65   //遮挡层
 66   var mask = small.children[1];
 67   //获取大图的div
 68   var big = box.children[1];
 69   //获取大图
 70   var bigImg = big.children[0];
 71 
 72   //鼠标进入显示遮挡层和大图的div
 73   box.onmouseover = function () {
 74     mask.style.display = "block";
 75     big.style.display = "block";
 76   };
 77   //鼠标离开隐藏遮挡层和大图的div
 78   box.onmouseout = function () {
 79     mask.style.display = "none";
 80     big.style.display = "none";
 81   };
 82 
 83   //鼠标的移动事件---鼠标是在小层上移动
 84   small.onmousemove = function (e) {
 85     //鼠标此时的可视区域的横坐标和纵坐标
 86     //主要是设置鼠标在遮挡层的中间显示
 87     var x = e.clientX - mask.offsetWidth / 2;
 88     var y = e.clientY - mask.offsetHeight / 2;
 89     //主要是margin的100px的问题
 90     x = x - 100;
 91     y = y - 100;
 92     //横坐标的最小值
 93     x = x < 0 ? 0 : x;
 94     //纵坐标的最小值
 95     y = y < 0 ? 0 : y;
 96     //横坐标的最大值
 97     x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
 98     //纵坐标的最大值
 99     y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
100     //为遮挡层的left和top赋值
101     mask.style.left = x + "px";
102     mask.style.top = y + "px";
103 
104     //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
105     //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
106 
107     //大图的横向的最大移动距离
108     var maxX = bigImg.offsetWidth - big.offsetWidth;
109 
110     //大图的纵向的最大移动距离
111     //var maxY = bigImg.offsetHeight - big.offsetHeight;
112 
113     //大图的横向移动的坐标
114     var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
115     //大图的纵向移动的坐标
116     var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);
117 
118     //设置图片移动
119     bigImg.style.marginLeft = -bigImgMoveX + "px";
120     bigImg.style.marginTop = -bigImgMoveY + "px";
121 
122   };
123 </script>
124 
125 
126 </body>
127 </html>

　　效果:

　　

　　

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/juncaoit/p/11330986.html