admin管理员组

文章数量:1574527

1. 上下切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下切换图片</title>
</head>
<body>
   <img name="icon" src="image/icon_01.png">
   <p></p>
   <button>上一张</button>
   <button>下一张</button>

   <script>
       // 1.全局的变量
       var maxIndex = 9;
       var minIndex = 1;
       var currentIndex = minIndex;

       // 2.拿到要操作的标签
       var img = document.getElementsByName('icon')[0];
       var pre = document.getElementsByTagName('button')[0];
       var next = document.getElementsByTagName('button')[1];
       
       // 3.监听按钮的点击
       // 3.1 上一张
       pre.onclick = function () {
           if (currentIndex == minIndex){ // 边界处理
               currentIndex = maxIndex;
           }else{ // 正常情况
               currentIndex -=1;
           }

           // 改变src
           img.src = 'image/icon_0' + currentIndex + '.png';
           console.log(img.src);
       };

       // 3.2 下一张
       next.onclick = function () {
          if (currentIndex == maxIndex){ // 边界处理
              currentIndex = minIndex;
          }else{ // 正常情况
              currentIndex +=1;
          }

           // 改变src
           img.src = 'image/icon_0'+currentIndex+'.png';
           console.log(img.src);
       }
   </script>
</body>
</html>

2. Tab选项卡

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部的样式-->
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <div id="tab">
         <!--头部-->
         <div id="tab-header">
             <ul>
                 <li class="selected">公告</li>
                 <li>规则</li>
                 <li>论坛</li>
                 <li>安全</li>
                 <li>公益</li>
             </ul>
         </div>
         <!--主要内容-->
         <div id="tab-content">
             <div class="dom"  style="display: block">
                 <ul>
                     <li>
                         <a href="#">数据七夕:金牛爱送玫瑰</a>
                     </li>
                     <li>
                         <a href="#">阿里打造"互联网监管"</a>
                     </li>
                     <li>
                         <a href="#">10万家店60万新品</a>
                     </li>
                     <li>
                         <a href="#">全球最大网上时装周</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">“全额返现”要管控啦</a>
                     </li>
                     <li>
                         <a href="#">淘宝新规发布汇总(7月)</a>
                     </li>
                     <li>
                         <a href="#">炒信规则调整意见反馈</a>
                     </li>
                     <li>
                         <a href="#">质量相关规则近期变更</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">阿里建商家全链路服务</a>
                     </li>
                     <li>
                         <a href="#">个性化的消费时代来临</a>
                     </li>
                     <li>
                         <a href="#">跨境贸易是中小企业机</a>
                     </li>
                     <li>
                         <a href="#">美妆行业虚假信息管控</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">接次文件，毁了一家店</a>
                     </li>
                     <li>
                         <a href="#">账号安全神器阿里钱盾</a>
                     </li>
                     <li>
                         <a href="#">新版阿里110上线了</a>
                     </li>
                     <li>
                         <a href="#">卖家学违禁避免被处罚</a>
                     </li>
                 </ul>
             </div>
             <div class="dom">
                 <ul>
                     <li>
                         <a href="#">为了公益high起来</a>
                     </li>
                     <li>
                         <a href="#">魔豆妈妈在线申请</a>
                     </li>
                 </ul>
             </div>
         </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    margin:0;
    padding: 0;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color: black;
}

body{
    margin: 100px;
}


#tab{
  border:1px solid #dddddd;
  width: 498px;
  height: 120px;

  /*裁剪超出部分*/
  overflow: hidden;
}

#tab-header{
    height: 38px;
    line-height: 38px;
    background-color: #F7F7F7;
    text-align: center;

    position: relative;
}

#tab-header ul{
    width: 501px;

    position: absolute;
    left:-1px;
}

#tab-header ul li{
    float: left;
    /*background-color: red;*/
    width: 98px;

    /*内填充*/
    padding: 0 1px;

    /*下线*/
    border-bottom: 1px solid #dddddd;
}

#tab-header ul li.selected{
    background-color: white;
    /*下线*/
    border-bottom: 0;

    /*内填充*/
    padding: 0;

    /*设置左右线条*/
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

#tab-content .dom{
    display: none;
}


#tab-content .dom a{
    /*background-color: red;*/
    width: 220px;
    /*左浮动*/
    float: left;
    margin:8px;
}

index.js


function $(id) {
    // 类型的比较
    return typeof id === 'string' ? document.getElementById(id): id;
}

// 当网页加载完毕是调用
window.onload = function () {
   // 拿到所有的li标签和对应的内容
    var lis = $('tab-header').getElementsByTagName('li');
    var contents = $('tab-content').getElementsByClassName('dom');
    // console.log(lis, contents);

  // 验证
    if(lis.length !== contents.length) return;

    // 遍历
    for(var i=0; i<lis.length; i++){
        // 取出每一个li标签
        var li = lis[i];
        // console.log(li);
        li.id = i;
        
        // 监听鼠标在li上面的移动
        li.onmousemove = function () {

            for(var j=0; j<lis.length; j++){
                //让所有的li标签都不被选中
                lis[j].className = '';
                contents[j].style.display = 'none';
            }

            // 设置当前对象的className
            this.className = 'selected';
            contents[this.id].style.display = 'block';


        }
    }


}

3. JS实现瀑布流

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
  <div id="main">
      <div class="box">
          <div class="pic">
              <img src="images/0.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/1.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/2.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/3.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/4.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/5.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/6.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/7.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/8.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/9.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/10.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/11.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/12.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/13.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/14.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/15.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/16.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/17.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/18.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/19.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/20.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/21.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/22.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/23.jpg">
          </div>
      </div>
      <div class="box">
          <div class="pic">
              <img src="images/24.jpg">
          </div>
      </div>
  </div>
  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    margin: 0;
    padding: 0;
}

#main{
    position: relative;
}

#main .box{
    float: left;
    padding: 15px 0 0 15px;
}

#main .box .pic{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 1px #ddd;
}

#main .box .pic img{
    width: 165px;
}

index.js

/**
 * Created by apple on 15/10/31.
 */
function $(id){
    return typeof id === 'string' ? document.getElementById(id):id;
}

window.onload = function(){
    // 实现瀑布流布局
    waterFall('main', 'box');
    // 当屏幕滚动的时候动态加载图片
    window.onscroll = function(){
        // 判断是否具备加载图片的条件
        if(isLoadBox()){
           // 造数据
            var dataImg = {'data':[{'src':'0.jpg'},{'src':'2.jpg'},{'src':'1.jpg'},{'src':'5.jpg'},{'src':'6.jpg'}]};
            for(var i=0; i<dataImg.data.length; i++){
                //创建盒子
                var newBox = document.createElement('div');
                newBox.className = 'box';
                $('main').appendChild(newBox);
                // 创建里面的盒子
                var newPic = document.createElement('div');
                newPic.className = 'pic';
                newBox.appendChild(newPic);
                // 创建图片
                var newImg = document.createElement('img');
                newImg.src = 'images/' + dataImg.data[i].src;
                newPic.appendChild(newImg);
            }
            // 实现瀑布流布局
            waterFall('main', 'box');
        }
    }
}


// 实现瀑布流布局
function waterFall(parent, box){
    //----- 居中显示-----
    // 1.拿到所有的盒子
    var allBox = $(parent).getElementsByClassName(box);
    // 2.取出其中任一盒子的宽度
    var boxWidth = allBox[0].offsetWidth;
    // 3.求出当前浏览器的宽度
    var screenWidth = document.body.clientWidth;
    // 4.求出总列数
    var cols = Math.floor(screenWidth / boxWidth);
    // 让父标签居中显示
    $(parent).style.cssText = 'width:' + boxWidth * cols + 'px; margin:0 auto;';

    // ----- 定位------
    // 定义一个高度数组
    var heightArr = [];
    // 1.遍历所有的盒子,并取出第一行盒子的高度放入数组
    for(var i=0; i<allBox.length; i++){
        // 取出每一个盒子的高度
        var boxHeight = allBox[i].offsetHeight;
        if(i < cols){// 第一行
            heightArr.push(boxHeight);
        }else{ // 剩余的行
            // 取出上一行最矮盒子的高度
            var minBoxHeight = Math.min.apply(null, heightArr);
            // 取出上一行最矮盒子对应的索引
            var minBoxIndex = getMinBoxIndex(minBoxHeight, heightArr);
            // 对当前行中盒子进行定位
            allBox[i].style.position = 'absolute';
            allBox[i].style.top = minBoxHeight + 'px';
            allBox[i].style.left = boxWidth * minBoxIndex + 'px';
            // 更新高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }
}


// 遍历取出最矮盒子对应的索引
function getMinBoxIndex(value, arr){
    for(var i in arr){
        if(arr[i] == value){
            return i;
        }
    }
}

// 判断是否加载新的盒子
function isLoadBox(){
   // 取出所有的盒子
    var allBox = $('main').getElementsByClassName('box');
   // 拿到最后一个盒子
    var lastBox = allBox[allBox.length -1];
   // 求出最后一个盒子自身高度的一半 + 其头部偏离浏览器的高度
    var lastBoxDis = lastBox.offsetTop + Math.floor(lastBox.offsetHeight / 2.0);
   // 求出浏览器的高度
    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
   // 求出页面偏离浏览器的高度
    var offSetTop = document.documentElement.scrollTop;

    console.log(lastBoxDis,screenHeight,offSetTop);
   // 判断是否具备加载条件
    return lastBoxDis < screenHeight + offSetTop ? true : false;
}

本文标签： 示例简单js

版权声明：本文标题：JS 简单示例 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1727773777a1128870.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。