整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標位置
當我們給某一個盒子添加鼠標事件監聽時(click、mouseover、mouseenter、mouseout等事件), 都一定會有以下四組值：
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
event.pageY 表示鼠標指針, 到頁面頂端的距離。IE6、7、8不兼容
event.screenY 表示鼠標指針, 到屏幕頂端的距離
event.clientY 表示鼠標指針, 到視口頂端的距離(視口就是當前可視窗口)
event.offsetY 表示鼠標指針, 到盒子頂端的距離
規律：
1、當頁面沒有卷動的時候, pageY一定等價于clientY。或換句話說pageY等價于clientY+頁面卷動的值scrollTop。
2、IE678不兼容pageX、pageY
offsetX/Y指的不是距離你監聽的那個盒子左上角的距離, 而是指的你現在鼠標指針所在位置到此時最內層盒子左上角的距離。
getBoundingClientRect 用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。
event.getBoundingClientRect().left;
具體區別:
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
圖解: https://www.cnblogs.com/Abner5/p/5855274.html?utm_source=itdadao&utm_medium=referral
event.getBoundingClientRect()
圖解: https://www.cnblogs.com/Songyc/p/4458570.html
實例: 鼠標點擊特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/*cursor: none;*/
}
img{
width: 100px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var body=document.getElementsByTagName("body")[0];
//如果想點擊body那么body必須設置寬高
document.onclick=function(e){
var ev=e || window.event;//事件對象的兼容
var left=ev.clientX;
var top=ev.clientY;
var img=document.createElement("img");
img.setAttribute("src","img/eagle.png");
img.style.left=left + "px";
img.style.top=top + "px";
body.appendChild(img);
//因為拖拽圖片圖片有一種神奇的魔力 也就是我們所有的默認行為
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue=false;
}
}
</script>
</body>
</html>盒子位置
任何一個元素都有offsetParent屬性和offsetLeft、offsetTop屬性
對象.offsetParent獲得定位祖先元素, 一層一層往上找, 如果不存在就是body和絕對定位類似
對象.offsetLeft獲取到定位父元素距離左邊的值, 一層一層往上找, 如果不存在就是body
對象.offsetTop獲取到定位父元素距離上邊的值, 一層一層往上找, 如果不存在就是body
offsetWidth 盒子的寬度
offsetHeight 盒子的高度
document.documentElement.clientWidth 文檔的寬度
document.documentElement.clientHeight 文檔的高度
//可視區域寬高
//console.log(document.body.clientWidth);//個別瀏覽器
//console.log(document.documentElement.clientWidth);//高版本
var w=document.documentElement.clientWidth || document.body.clientWidth;
var h=document.documentElement.clientHeight || document.body.clientHeight;
實例1：獲取行內樣式的寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
console.log(div.style.width);//操作的都是行內
//不兼容
//高版本
console.log(window.getComputedStyle(div).width)
//低版本
console.log(div.currentStyle.width)
</script>
</body>
</html>
實例2: 獲取盒子的寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
//盒子寬高 number類型
console.log(div.offsetWidth)
console.log(div.offsetHeight)
</script>
</body>
</html>實例3: 獲取盒子的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 100px;
height: 100px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var span=document.getElementsByTagName("span")[0];
//盒子距離定位父元素(div)的位置
console.log(span.offsetLeft)
console.log(span.offsetTop)
</script>
</body>
</html>實例4: 獲取盒子的凈位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var span=document.getElementsByTagName("span")[0];
//我們在懶加載的時候就用到過凈位置
//http://jquery.cuishifeng.cn/offset.html
//凈位置就是盒子到body的位置
//console.log(span.offsetTop)
console.log(span.offsetParent);//定位復原素(div)
//他返回一個信息集合
console.log(span.getBoundingClientRect());//這個東西就可以得到span的所有位置關系
//top和left值就是我們所需要的凈位置
//我們知道我們無法直接獲取該盒子到body的位置 但是我們我們可以獲取該合資距離他有定位祖先元素的位置 那么這樣我們就可以一層一層網上找
/*body
div(定位)
span
span.offsetTop ->sapn.offsetParent
div.offsetTop*/
</script>
</body>
</html>實例5 編寫凈位置函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
/*position: relative;*/
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var span=document.getElementsByTagName("span")[0];
//方法一: 編寫自定義函數
console.log(pos(span)); //100
function pos(obj){
//用一個變量存儲盒子到頁面的初始值
var left=obj.offsetLeft;
//因為定位父盒子不確定 所以用一個變量臨時存儲 后面替換
var par=obj.offsetParent;
while(par){
left +=par.offsetLeft;
par=par.offsetParent;
}
return left;
}
//方法二: getBoundingClientRect里面包含了到頁面的left top值
console.log(span.getBoundingClientRect().left) //100
</script>
</body>
</html>拖拽三大事件
鼠標按下onmousedown
鼠標移動onmousemove
鼠標抬起onmouseup
實例: 鼠標拖拽
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我們學習了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標按下onmousedown
//鼠標移動onmousemove
//鼠標抬起onmouseup
//獲取元素
var div=document.getElementsByTagName("div")[0];
div.onmousedown=function(e){
var ev=e || window.event;
//我按下時把鼠標到盒子的位置求出來
var startX=ev.offsetX;
var startY=ev.offsetY;
//div.onmousemove=function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove=function(e){
var ev=e || window.event;
//你移動鼠標那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
//鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
div.style.left=ev.clientX - startX + "px";
div.style.top=ev.clientY - startY + "px";
//div.style.left=ev.clientX + "px";
//div.style.top=ev.clientY + "px";
}
//我們習慣把抬起也放入按下里面
document.onmouseup=function(){
document.onmousemove=null;//我抬起鼠標之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup=null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue=false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>
實例: 鼠標拖拽--防止拖出頁面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我們學習了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標按下onmousedown
//鼠標移動onmousemove
//鼠標抬起onmouseup
//獲取元素
var div=document.getElementsByTagName("div")[0];
div.onmousedown=function(e){
var ev=e || window.event;
//我按下時把鼠標到盒子(div)的位置求出來
var startX=ev.offsetX;
var startY=ev.offsetY;
//div.onmousemove=function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove=function(e){
var ev=e || window.event;
//你移動鼠標那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
var lDis=ev.clientX - startX;
var rDis=ev.clientY - startY;
if(rDis < 0){
rDis=0;
}
if(lDis < 0){
lDis=0;
}
if(lDis > document.documentElement.clientWidth-div.offsetWidth){
lDis=document.documentElement.clientWidth-div.offsetWidth;
}
if(rDis > document.documentElement.clientHeight-div.offsetHeight){
rDis=document.documentElement.clientHeight-div.offsetHeight;
}
//鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
div.style.left=lDis + "px";
div.style.top=rDis + "px";
//div.style.left=ev.clientX + "px";
//div.style.top=ev.clientY + "px";
}
//我們習慣把抬起也放入按下里面
document.onmouseup=function(){
document.onmousemove=null;//我抬起鼠標之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup=null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue=false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>特別注意：
因為圖片、文字選中是也會被拖拽, 這是一種默認行為, 所以在鼠標按下時, 我們需要清除這種默認行為。
)CSS 標準盒子模型(Box Model)
在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的
1.2Border(邊框)圍繞在內邊距和內容外的邊框
1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的
1.4Content(內容)盒子里填充的內容比如文本,圖像等
標準盒子模型
寬度為100px的div
根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px
2)DIV+CSS布局
Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等
DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both
clear屬性作用是清除浮動,其值為:1)left 2)right 3)both
d2向右浮動 float:right
因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置
d2設置為右浮動其他兩個div位置的變化:
1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示
2)d2脫離文檔流,d3自動填充到d2的位置
d1,d2全部設置為右浮動
1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖
2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置
3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮動,d3設置為右浮動
當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖
當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試
<!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>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局
注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。
所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
