整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被卷去的高：document.body.scrollTop
網頁被卷去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。
首先我們看看效果：
實現這樣的功能需要學習以下幾點內容。
1.認識<img/><map><area/></map>基本結構
首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>圖片區域鏈接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：
<body>
<img/>
<map>
<area/>
</map>
</body> 指定要添加區域鏈接的圖片的路徑，如下：
<img src="img/image1.jpg"/>
<map>
<area/>
</map>讓<img>標簽通過<map>的名字來驅使<map>為自己工作。
需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。
第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。
示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>下面來劃分區域。
2.為圖片劃分區域的方法
<area>是用來劃分區域的標簽，area也是“”區域“”的意思。
默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。
分別添加三個形狀，示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。
為<area>添加coords屬性可以指定區域的位置和范圍。
如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：
如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：
如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如
這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：
這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？
3.使用Gimp軟件精準定位圖片區域
使用Gimp軟件可以解決這個問題。
Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。
下載地址：https://www.gimp.org/
雙擊安裝即可，注意選擇一下安裝目錄。
完成安裝之后打開，界面如下：
點擊“文件”找到“打開”：
選擇要打開的圖片名字：
點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：
打開后如圖：
把鼠標放到圖像的任意位置，看左下角：
這里就會顯示我們鼠標所在的像素坐標數值。
這樣我們就能方便地寫“poly”的coords了。
請在空閑時找一張圖片演練一下吧！
4.為區域添加鏈接
在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：
href="https://www.zhihu.com/question/284642168" 添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：
title="殲20氣動外形分析"今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。
使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
看一下這樣的效果。這里展示了四張圖片，每一個圖片都有一個倒影。當鼠標旋轉每個圖片的時候倒影會消失，并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。
·這里展示了一個空白的HTML模板，來設置一下它的背景顏色。
·bargain設置為邊距為零，內邊距也為零，背景顏色為黑色。
·再添加一個INMAX標簽，添加上圖片。這個圖片當前是沒有任何效果的，就直接的展示出來了。
·給圖片添加一個樣式，設置一個寬度為一百五十像素。這個時候發現這個圖片是靠左上角的，設置一個next布局body。
·再設置一下它的高度為一百，根據這個四口來設置高度，寬度也是。現在就可以把它在窗口的頁面上進行劇終了。
·再來設置一下它的圖片樣式。
·order top left，左上角的圓角設置成十像素，右上角也設置成十像素的圓角。
·這個時候遇到一個關鍵的問題，怎么樣去把設置成一個倒影，增加一個倒影？它有這么一個屬性，這里有設置一下它的倒影，往下的倒影讓倒影離開主要圖片的五個像素的間距，間距也就是這里的縫隙。
·再設置一下顏色，這個顏色來設置一個漸變的，這個時候是空白的，這樣子就產生了這樣的倒影。但是倒影還是太高了一點，可以給透明加一個，如果不夠可以繼續加，這樣子就差不多了，設置成八十暗一點，這樣子就有了一個倒影。
·再設置一下鼠標懸停，懸停是沒有效果的，可以給英美的標簽添加一個鼠標懸停的效果。
·然后是它的放大，放大為一點五倍，這個時候放大縮小是很生硬的，可以在這里加上零點五秒的過渡時間，但倒影還沒有消失，希望它的倒影消失一下。
·可以繼續設置一下屬性，它有一個on set，也就是恢復到默認設置。這個時候再來看一下，再給它添加外發光的效果，這樣就出現了這個效果。
·給元素多復制幾個，這個時候再來看一下，但它是挨在一起的，可以給元素設置一個外邊距，上下為零，左右為十像素，可以設置成五像素。
·這個時候再來看，這個時候會發現后邊的一張圖片會遮住前面的那張圖片，但這不是想要的，可以在over的時候把英美解的元素的層級往上走一下，這樣子設置到最高，就展現到最前面，外發光效果還是太小小了點，這樣子看起來就好看一些。
·如果圖片放大了，最好是把左下角也設置成圓角，也可以這里設置一下。再來看一下，這樣子是不是放大的時候全為圓角了。
今天的展示就到這里，謝謝大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
