當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从零开始学 Web 之 BOM（四）client系列

發布時間：2025/6/15 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始学 Web 之 BOM（四）client系列小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大家好，這里是「從零開始學 Web 系列教程」，并在下列地址同步更新......

github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
博客園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/

在這里我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、client 系列

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#dv {width: 300px;height: 200px;border: 20px solid purple;margin-top: 50px;margin-left: 100px;}#dv2 {width: 100px;height: 50px;border: 15px solid #e88e1d;margin-top: 20px;margin-left: 30px;}</style> </head> <body> <div id="dv"><div id="dv2"></div> </div> <script src="common.js"></script> <script>console.log(my$("dv").clientWidth); // 300console.log(my$("dv").clientHeight); // 200console.log(my$("dv").clientLeft); // 20console.log(my$("dv").clientTop); // 20console.log(my$("dv2").clientWidth); // 100console.log(my$("dv2").clientHeight); // 50console.log(my$("dv2").clientLeft); // 15console.log(my$("dv2").clientTop); // 15 </script> </body> </html>

clientWidth：可視區域的寬度（不含邊框）

clientHeight：可視區域的高度（不含邊框）

clientLeft：左邊框的寬度

clientTop：上邊框的寬度

clientX：可視區域的橫坐標

clientY：可視區域的縱坐標

1、案例：圖片跟著鼠標移動最終版

之前圖片跟著鼠標移動的案例有些bug，就是IE8不支持。

在IE8 下沒有事件參數，但是有 window.event 可以代替。

window.event：谷歌， IE8 支持，但是火狐不支持。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <style> img { position: absolute; } </style> </head> <body> <img src="images/Daotin.png" id="im"> <script src="common.js"></script> <script> document.onmousemove = function (e) { // 獲取鼠標的橫縱坐標 e = window.event || e; my$("im").style.left = e.clientX + "px"; my$("im").style.top = e.clientY + "px"; console.log(window.event); } </script> </body> </html>

這個時候，如果 body 的高度/寬度變化了，可以滾動滑輪了會怎樣呢？

body {height: 5000px; }

這時候，如果鼠標不動，只滾動滑輪的話，會發現圖片會距離鼠標原點越來越遠。為什么呢？

因為當我們滾動滑輪的時候，鼠標距離頁面頂部的距離改變了，但是 clientY 是可視區域的大小，滾動滑輪的時候， clientY 的大小是沒有變的，但是鼠標距離頁面頂部的距離改變了，而圖片在 Y 軸的距離計算還是按照 clientY 計算的，所以圖片就會距離鼠標越來越遠。

那么，怎么辦呢？

事件參數 e 有連個屬性：pageX,pageY 是距離頁面頂部邊界的距離，可以直接使用，但是不幸的是，IE8 又不支持。看來，只能是鼠標移動的距離 + 滑輪卷曲出去的距離來實現了。

思路：

之前我們封裝的兼容代碼都在一個函數里面，這里我們封裝到一個對象 evt 里面。

這個 evt 對象封裝了所有瀏覽器都支持的關于 clientX,clientY 等頁面坐標的函數。

圖片跟著鼠標移動的最終版：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body {height: 5000px;}img {position: absolute;}</style> </head> <body> <img src="images/Daotin.png" id="im"> <script src="common.js"></script> <script>var evt = {// 獲取通用事件對象getEvent: function (e) {return window.event||e;},// 獲取通用ClientXgetClientX: function (e) {return this.getEvent(e).clientX;},// 獲取通用ClientYgetClientY: function (e) {return this.getEvent(e).clientY;},// 獲取通用 scrollLeftgetScrollLeft: function () {return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;},// 獲取通用 scrollTopgetScrollTop: function () {return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;},// 獲取通用 pageXgetPageX: function (e) {return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getClientX(e)+this.getScrollLeft();},// 獲取通用 pageYgetPageY: function (e) {return this.getEvent(e).pageY?this.getEvent(e).pageY:this.getClientY(e)+this.getScrollTop();}};document.onmousemove = function (e) {my$("im").style.left = evt.getPageX(e) + "px";my$("im").style.top = evt.getPageY(e) + "px";} </script> </body> </html>

2、案例：淘寶寶貝放大鏡

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*#box {*//*width: 100%;*//*height: 100%;*//*background-color: lightpink;*//*}*/.small {float: left;width: 384px;height: 240px;margin-top: 50px;margin-left: 50px;}.mask {width: 128px;height: 80px;background-color: yellow;opacity: 0.4;position: absolute;margin-top: 50px;margin-left: 50px;left: 0;top: 0;cursor: move;display: none;}.big {width: 640px;height: 400px;float: left;margin-left: 50px;overflow: hidden;display: none;}</style> </head> <body> <div id="box"><div class="small"><img src="images/dos.jpg" alt=""><div class="mask"></div></div><div class="big"><img src="images/window.jpg" alt=""></div> </div> <script src="common.js"></script> <script>// 獲取所有需要的元素var boxObj = my$("box");// 獲取 smallvar smallObj = boxObj.children[0];// 獲取 maskvar maskObj = smallObj.children[1];// 獲取 bigvar bigObj = boxObj.children[1];// 獲取 bigImgvar bigImgObj = bigObj.children[0];// 鼠標進入，顯示遮擋層和大圖smallObj.onmouseover = function () {maskObj.style.display = "block";bigObj.style.display = "block";};// 鼠標退出，隱藏遮擋層和大圖smallObj.onmouseout = function () {maskObj.style.display = "none";bigObj.style.display = "none";};// 遮擋層跟著鼠標移動，使鼠標位于遮擋層中央smallObj.onmousemove = function (e) {var x = evt.getClientX(e) - parseInt(maskObj.offsetWidth / 2)-50; // 這50是遮擋層初始偏移left的距離var y = evt.getClientY(e) - parseInt(maskObj.offsetHeight / 2)-50;// 這50是遮擋層初始偏移top的距離// 遮擋層的最小移動范圍x = x < 0 ? 0 : x;y = y < 0 ? 0 : y;// 遮擋層的最大移動范圍x = x > smallObj.offsetWidth - maskObj.offsetWidth? smallObj.offsetWidth - maskObj.offsetWidth: x;y = y > smallObj.offsetHeight - maskObj.offsetHeight? smallObj.offsetHeight - maskObj.offsetHeight: y;maskObj.style.left = x + "px";maskObj.style.top = y + "px";// 小圖移動的距離/小圖能移動的最大距離 == 大圖移動的距離/大圖能移動的最大距離// 大圖移動的距離 = 小圖移動的距離 * 大圖能移動的最大距離 / 小圖能移動的最大距離；var bigImgX = x * (bigImgObj.offsetWidth - bigObj.offsetWidth) / (smallObj.offsetWidth - maskObj.offsetWidth);var bigImgY = y * (bigImgObj.offsetHeight - bigObj.offsetHeight) / (smallObj.offsetHeight - maskObj.offsetHeight);bigImgObj.style.marginLeft = -bigImgX + "px";bigImgObj.style.marginTop = -bigImgY + "px";}; </script> </body> </html>

第一步：獲取所有需要的元素對象。

第二步：鼠標進入，離開小圖，顯示和隱藏遮擋層和大圖。

第三步：遮擋層隨著鼠標的移動而移動。

第四步：遮擋層移動的最大范圍在小圖內。

第五步：小圖移動的距離/小圖能移動的最大距離 == 大圖移動的距離/大圖能移動的最大距離，由此算出大圖移動的距離 = 小圖移動的距離 * 大圖能移動的最大距離 / 小圖能移動的最大距離。

第六步：將得到的大圖移動的距離的負值賦值給大圖即可。

3、案例：DIY 滑動欄

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box {width: 200px;height: 300px;border: 1px solid red;margin-top: 100px;margin-left: 300px;overflow: hidden;}.content {float: left;width: 180px;/*height: 900px;*/}.right {float: left;width: 20px;height: 300px;background-color: #e7e7e7;position: relative;}.bar {position: absolute;left: 0;top: 0;width: 12px;height: 50px;margin: 0 4px;background-color: #7b7b7b;/*cursor: pointer;*/}</style> </head> <body> <div id="box"><div class="content">kkkkkk溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！溫馨提示：由于廠商可能在未提前通知的情況下更改產品包裝、產地、贈品或隨機附件等。飛虎回復僅在回復當時對提問者有效，其他網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！Daotin</div><div class="right"><div class="bar"></div></div> </div> <script src="common.js"></script> <script>// 獲取所有的元素// 獲取 boxvar boxObj = my$("box");// 獲取 contentvar conObj = boxObj.children[0];// 獲取 right boxvar rightObj = boxObj.children[1];// 獲取 barvar barObj = rightObj.children[0];// 鼠標點擊bar，拖動barObj.onmousedown = function (e) {var spaceY = evt.getClientY(e) - barObj.offsetTop; // 鼠標距離bar頂部的距離document.onmousemove = function () {var y = evt.getClientY(e) - spaceY;y = y < 0 ? 0 : y;y = y < rightObj.offsetHeight - barObj.offsetHeight ? y : rightObj.offsetHeight - barObj.offsetHeight;barObj.style.top = y + "px";// 防止滑動的時候選中了文字window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();// 鼠標移動的時候，content也應該移動// bar移動的距離/ bar可以移動的最大距離 = content移動的距離/ content可以移動的最大距離var contentY = y * (conObj.offsetHeight - boxObj.offsetHeight) / (rightObj.offsetHeight - barObj.offsetHeight);conObj.style.marginTop = -contentY + "px";};};document.onmouseup = function () {document.onmousemove = null;}// 鼠標離開 </script> </body> </html>

1、獲取所有需要的元素。

2、鼠標點擊，滑動，抬起，三個事件。

3、鼠標點擊的時候獲取鼠標的位置。

4、鼠標滑動的時候計算坐標 y。由于要保證鼠標移動的時候，鼠標相對滑動條頂部的距離一定，所以需要 spaceY。還需要注意滑動條滑動的范圍。

5、鼠標抬起的時候，清除鼠標移動的事件。

6、防止滑動的時候選中了文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

7、通過比例，計算 content 內容反方向移動的距離。

二、復習

1、元素隱藏的不同方式

my$("dv").style.display = "none"; // 不占位 my$("dv").style.visibility = "hidden"; // 占位 my$("dv").style.opacity = 0; // 占位 my$("dv").style.height = 0; // 占位

總結

以上是生活随笔為你收集整理的从零开始学 Web 之 BOM（四）client系列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： dnsmasq详解手册
下一篇： Python之路--前端知识--Java