欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例

 更新時(shí)間：2020年07月03日 15:22:00   作者：奔跑的太陽花  
這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

九宮格算法核心：

  • 利用控件索引index計(jì)算出控件所在的行數(shù)和列數(shù)；
  • 利用控件計(jì)算出left距離；
  • 利用控件計(jì)算出top距離；
  • 寫特效時(shí)需要用到定位

公式：

行 row=parseInt(i/cols);

列 col=parseInt(i%cols);

i是當(dāng)前的盒子，cols是總列數(shù)，

代碼示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>九宮格</title>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      #top{
        margin-top:30px;
        margin-bottom: 20px;
        margin-left:20px;
      }
      #bottom{
        position: relative;
      }
      #bottom .content{
        width: 220px;
        height: 360px;
        background-color: skyblue;
        margin: 0 0 15px 15px;
        padding: 5px;
      }
      .content img{
        width: 220px;
        height: 308px;
      }
      #bottom .content p:last-child{
        font-size: 15px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="top">
      <button>排成三列</button>
      <button>排成四列</button>
      <button>排成五列</button>
    </div>
    <div id="bottom">
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
    </div>
    <script>
      window.onload=function(){
        var top=document.getElementById("top");
        var btns=top.getElementsByTagName("button");
        var content=document.getElementById("bottom");
        // console.log(content.children);
        //console.log(btns);
        //定義變量標(biāo)識(shí)盒子的寬度和高度
         var cssW=220;
         var cssH=360;
         var marginXY=15;
         //監(jiān)聽按鈕點(diǎn)擊事件
        btns[0].onclick=function(){
          getContent(3);
        }
        btns[1].onclick=function(){
          getContent(4)
        }
        btns[2].onclick=function(){
          getContent(5);
        }
        function getContent(cols){
          var cols;
          //遍歷
          for(var i=0;i<content.children.length;i++){
            var currentCont=content.children[i];
            //console.log(currentCont);
            //盒子所在的行
            var row=parseInt(i/cols);
            //盒子所在的列
            var col=parseInt(i%cols);
            //console.log("盒子在第" +row+ "行,""在第" +col+ "列");
            currentCont.style.position="absolute";
            currentCont.style.left=col*(cssW+marginXY)+"px";
            currentCont.style.top=row*(cssH+marginXY)+"px";
         }
        }
      }
    </script>
  </body>
</html>

九宮格（用原生js實(shí)現(xiàn)）

1、本文的九宮格是用原生的js實(shí)現(xiàn)的；

2、實(shí)現(xiàn)的九宮格效果是：可交換1-9的任意方格，且將方格拖拽至大盒子外松開后可自動(dòng)回到拖拽之前的位置。

3、代碼如下：

html代碼：

<ul id="box">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

css代碼：

body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{
  margin:0;
  padding:0;
}
html {
  overflow: hidden;
}
ul {
  list-style: none;
}
#box {
  position: relative;
  margin: 20px auto;
  width: 640px;
  height: 640px;
  border: 1px solid #eee;
}
#box li {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  background: #eee;
}
#box .active {
  z-index: 1;
  color: #fff;
  background: blue;
}

js代碼：

window.onload = function () {
  var oBox = document.getElementById('box');
  var aLi = oBox.children;
 
  for(var i = 0; i < aLi.length; i++) {
    // 布局
    aLi[i].style.left = 210 * (i % 3) + 10 + 'px';
    aLi[i].style.top = 210 * Math.floor(i / 3) + 10 + 'px';
 
    // 添加拖拽功能
    aLi[i].index = i;
    aLi[i].onmousedown = function (ev) {
            var e = ev || window.event;
            var iX = e.clientX - this.offsetLeft;
            var iY = e.clientY - this.offsetTop;
            if(this.setCapture) {
              this.setCapture();
            }
            var oThat = this;
 
      // 添加class名稱
      this.className = 'active';
      document.onmousemove = function (ev) {
        var e = ev || window.event;
        var iL = e.clientX - iX;
        var iT = e.clientY - iY;
 
        oThat.style.left = iL + 'px';
        oThat.style.top = iT + 'px';
 
        // 交換位置的條件
        for(var j = 0; j < aLi.length; j++) {
          if(oThat != aLi[j]
            && oThat.offsetLeft + oThat.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
            && oThat.offsetTop + oThat.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2
            && oThat.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
            && oThat.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2) {
              var iCurIndex = oThat.index;
              // 交換位置
              aLi[j].style.left = 210 * (iCurIndex % 3) + 10 + 'px';
              aLi[j].style.top = 210 * Math.floor(iCurIndex / 3) + 10 + 'px';
 
              // 交換下標(biāo)
              oThat.index = aLi[j].index;
              aLi[j].index = iCurIndex;
              break;
          }
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
 
        if(oThat.releaseCapture) {
          oThat.releaseCapture();
        }
 
        // 去掉class名稱
        oThat.className = '';
 
        // 重置當(dāng)前拖拽元素的位置
        oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px';
        oThat.style.top = 210 * Math.floor(oThat.index / 3) + 10 + 'px';
      };
 
      return false;
    };
  }
};

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 分享ES6?20個(gè)經(jīng)常使用技巧

    分享ES6?20個(gè)經(jīng)常使用技巧

    這篇文章主要分享ES6?20個(gè)經(jīng)常使用技巧，作用是使JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開發(fā)語言，具體使用詳情需要的小伙伴可以參考下面文章內(nèi)容
    2022-06-06
  • 詳解webpack es6 to es5支持配置

    詳解webpack es6 to es5支持配置

    這篇文章主要介紹了詳解webpack es6 to es5支持配置 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • axios請(qǐng)求參數(shù)的三種方式示例詳解

    axios請(qǐng)求參數(shù)的三種方式示例詳解

    這篇文章主要介紹了axios請(qǐng)求參數(shù)的三種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-07-07
  • js 程序執(zhí)行與順序?qū)崿F(xiàn)詳解

    js 程序執(zhí)行與順序?qū)崿F(xiàn)詳解

    JavaScript是一種描述型腳本語言，由瀏覽器進(jìn)行動(dòng)態(tài)的解析與執(zhí)行，瀏覽器對(duì)于不同的方式有不同的解析順序，詳細(xì)介紹如下，感興趣的朋友可以參考下哈
    2013-05-05
  • ES6解構(gòu)賦值的功能與用途實(shí)例分析

    ES6解構(gòu)賦值的功能與用途實(shí)例分析

    這篇文章主要介紹了ES6解構(gòu)賦值的功能與用途,結(jié)合實(shí)例形式分析了ES6結(jié)構(gòu)賦值針對(duì)函數(shù)參數(shù)、賦值、json等相關(guān)操作使用技巧,需要的朋友可以參考下
    2017-10-10
  • 微信小程序canvas實(shí)現(xiàn)手寫簽名

    微信小程序canvas實(shí)現(xiàn)手寫簽名

    這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • javascript 獲取元素樣式必殺技

    javascript 獲取元素樣式必殺技

    這篇文章主要介紹了javascript 獲取元素樣式必殺技,需要的朋友可以參考下
    2014-05-05
  • Openlayers繪制聚合標(biāo)注

    Openlayers繪制聚合標(biāo)注

    這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)聚合標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • ES6通過babel轉(zhuǎn)碼使用webpack使用import關(guān)鍵字

    ES6通過babel轉(zhuǎn)碼使用webpack使用import關(guān)鍵字

    這篇文章主要介紹了es6通過babel轉(zhuǎn)碼還需要使用webpack才可以使用import關(guān)鍵字嗎的相關(guān)資料,需要的朋友可以參考下
    2016-12-12
  • Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版

    Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版

    這篇文章主要為大家詳細(xì)介紹了Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版，結(jié)合導(dǎo)航條和下拉菜單進(jìn)行改進(jìn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-09

最新評(píng)論