整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 鼠標坐標和盒子位置

          JavaScript 鼠標坐標和盒子位置

          標位置

          當我們給某一個盒子添加鼠標事件監聽時(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;
          }

          Border

          元素邊框:我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。

          按如下代碼設置Div(TsetMiddle)的Border(邊框):

          border-style:solid;
          border-width: 10px;
          border-color: aqua;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30+30了,而且可以設置其底色和線條樣式。

          Border

          Margin

          margin 控制周圍的元素區域。margin 沒有背景顏色,是完全透明的。通過margin可以控制元素與四周元素的空隙距離;

          按如下代碼設置Div(TsetMiddle)的margin(外邊距):

          margin: 30px auto;

          刷新頁面如下圖:此時TsetMiddle這個盒子的總寬度已經變成200+30(Border)+30(Margin)+30(Border)+30(Margin)了。

          Margin

          Padding

          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、可以利用盒子的各種屬性,調整其內容在父容器中的位置。


          主站蜘蛛池模板: 夜夜精品无码一区二区三区| 亚洲高清美女一区二区三区| 亚洲熟女www一区二区三区| 国产一区二区在线观看| 插我一区二区在线观看| 亚洲爆乳精品无码一区二区 | 精品国产日韩一区三区| 久久精品视频一区二区三区| 亲子乱AV视频一区二区| 国产婷婷色一区二区三区深爱网| 国产香蕉一区二区精品视频| 国产AV一区二区三区传媒| 成人精品视频一区二区三区不卡| 日韩视频在线观看一区二区| 精品国产亚洲一区二区三区在线观看| 久久无码人妻一区二区三区午夜| 久久国产精品一区免费下载| 国产在线aaa片一区二区99 | 四虎成人精品一区二区免费网站| 国产电影一区二区| 久久久久人妻精品一区二区三区| 亚洲国产成人一区二区精品区| 国精产品一区二区三区糖心| 亚洲熟女一区二区三区| 日本在线不卡一区| 亚洲香蕉久久一区二区| 中文字幕日韩精品一区二区三区| 国产精品揄拍一区二区| 日本片免费观看一区二区| 亚洲乱码av中文一区二区| 无码人妻精品一区二区三区久久久| 自拍日韩亚洲一区在线| 亚洲影视一区二区| 国产未成女一区二区三区| 国产一区内射最近更新| 亚洲高清偷拍一区二区三区| 亚洲一区二区高清| 亚洲AV美女一区二区三区| 3D动漫精品一区二区三区| 日韩在线视频不卡一区二区三区| 精品中文字幕一区在线|