前端常见功能案例实现

喵_美

已于 2024-07-09 15:33:14 修改

阅读量290

点赞数 9

分类专栏：案例文章标签：前端 javascript

于 2024-07-09 15:32:54 首次发布

本文链接：https://blog.csdn.net/qq_34708564/article/details/140297054

版权

案例专栏收录该内容

27 篇文章 0 订阅

订阅专栏

图片排序

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
  <title>冒泡排序</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  li {
    list-style: none;
  }

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

  /*-----------------------*/
  .wrap {
    margin: 100px auto;
    width: 1100px;
    height: 600px;
    border: 1px solid #bbb;
  }

  .wrap ul {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    flex-flow: wrap;
  }

  .wrap ul li {
    width: 200px;
    height: 240px;
    margin-bottom: 20px;
    border: 1px solid #bbb;
  }

  ul li img {
    display: block;
    width: 180px;
    height: 180px;
    margin: 10px auto;
  }

  div>p:first-child {
    display: inline-block;
    text-indent: 10px;
  }

  div>p:nth-child(2) {
    display: inline-block;
    position: relative;
    float: right;
    bottom: 5px;
    right: 5px;
    height: 40px;
    width: 40px;
    line-height: 60px;
    font-weight: bold;
    color: red;
  }

  .btn-box {
    /* float: right; */
    bottom: 120px;
    position: absolute;
    right: 60px;
    /* margin-right: 30px; */
    text-align: right;
  }

  .btn-box button {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
  }
</style>

<body>
  <div class="wrap">
    <ul class="box">
      <li>
        <img src="img/1.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>6.5</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/2.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>9</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/3.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>8.9</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/4.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>10</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/5.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>15</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/6.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>5.6</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/7.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>7.9</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/8.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>8.8</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/9.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>13</span>$</p>
        </div>
      </li>
      <li>
        <img src="img/10.jpg" alt="">
        <div>
          <p>粉色玫瑰浪漫系列</p>
          <p><span>16</span>$</p>
        </div>
      </li>
    </ul>
    <div class="btn-box">
      <button class="random">随机</button>
      <button class="toBig">价格从小到大</button>
      <button class="toSmall">价格从大到小</button>
    </div>
  </div>
  <script src="../js/common.js"></script>
  <script>
    var oBox = $('.box')
    var oLi =  $$('.box > li')
    var oBtn = $('.btn-box')
    var aChild = oBox.children;
    var childLen = aChild.length;
    var aSpan = $$('span')
    var tempArr = [];
    var priceArr = []

    initPos()

    btnMap = {
      random: function (e) {
        priceArr.sort(function (a, b) {
          return a[1]*Math.random() - b[1]*Math.random() * 1
        })
        priceSort()
      },
      toBig: function (e) {
        priceArr.sort(function (a, b) {
          return a[1] - b[1]
        })
        priceSort()
      },
      toSmall: function (e) {
        priceArr.sort(function (a, b) {
          return b[1] - a[1]
        })
        priceSort()
      },
    }

    oBtn.addEventListener('click', function (e) {
      if(e.target.tagName.toLowerCase() === 'button' && typeof btnMap[e.target.className] === 'function') {
        btnMap[e.target.className](e)
      }
    }, false)

    function initPos() {
      for (var i = 0; i < childLen; i++) {
        (function (idx) {
          tempArr.push([aChild[idx].offsetLeft, aChild[idx].offsetTop])
          priceArr.push([i, aSpan[i].innerText])
          setTimeout(function () {
            aChild[idx].style.position = 'absolute';
            aChild[idx].style.left = tempArr[idx][0] + 'px'
            aChild[idx].style.top = tempArr[idx][1] + 'px'
          }, 0)
        })(i)
      }
    }

    function priceSort() {
      priceArr.forEach(function (item, idx) {
        oLi[item[0]].style.left = tempArr[idx][0] + 'px'
        oLi[item[0]].style.top = tempArr[idx][1] + 'px'
      })
    }
  </script>
</body>

</html>

多重选项卡

在这里插入图片描述

<!doctype html>
<!--文档头信息-->
<html lang="en">
<!--根标签-->

<head>
  <!--网页头部-->
  <meta charset="UTF-8">
  <!--字符编码-->
  <meta name="Generator" content="EditPlus®">
  <!--使用的编辑器-->
  <meta name="Author" content="">
  <!--作者-->
  <meta name="Keywords" content="">
  <!--关键字-->
  <meta name="Description" content="">
  <!--网页描述-->
  <title>麦兜响当当-选项卡</title>
  <style type='text/css'>
    body,
    ul,
    li,
    p,
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    #content {
      position: relative;
      width: 400px;
      margin: 50px auto;
    }

    #content img {
      display: block;
    }

    .list {
      position: absolute;
      top: 0;
      left: -80px;
    }

    .list li {
      width: 80px;
      height: 40px;
      line-height: 40px;
      background: #ccc;
      text-align: center;
    }

    .list li.on {
      background: orange;
    }

    .list li+li {
      margin-top: 1px;
    }

    #content p {
      display: none;
    }

    #content p.on {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      background: rgba(0, 0, 0, .5);
      text-align: right;
    }

    #content p span {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-left: 5px;
      background-color: #fff;
      text-align: center;
    }

    #content p span.on {
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id='content'>
    <ul class='list' id='list'>
      <li>车</li>
      <li>美食</li>
      <li>风景</li>
    </ul>
    <img width='100%' src="images/1.jpg" alt="">
    <p>
      <span class="on">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </p>
    <p>
      <span class="on">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </p>
    <p>
      <span class="on">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
    </p>
  </div>
</body>
<script src="../js/common.js"></script>
<script type="text/javascript">
  var oCon = $('#content')
  var aLi = $('.list').children
  var aP = $$('p')
  var oImg = $('img')

  var imgArr = [
    ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
    ['m1.jpg', 'm2.jpg', 'm3.jpg', 'm4.jpg', 'm5.jpg'],
    ['s1.jpg', 's2.jpg', 's3.jpg', 's4.jpg', 's5.jpg'],
  ]
  var index = 0
  var imgIndex = [0, 0, 0]

  var toggleMap = {
    init: function () {
      aLi[0].classList.add('on')
      aP[0].classList.add('on')
    },
    sort: function (e) {
      aP[index].classList.remove('on')
      aLi[index].classList.remove('on')
      index = getElementIdx(e.target)
      oImg.src = `images/${imgArr[index][imgIndex[index]]}`
      aP[index].classList.add('on')
      aLi[index].classList.add('on')
    },
    preview: function (e) {
      if(e.target.tagName.toLowerCase() === 'span') {
        aP[index].children[imgIndex[index]].classList.remove('on')
        imgIndex[index] = getElementIdx(e.target)
        oImg.src = `images/${imgArr[index][imgIndex[index]]}`
        aP[index].children[imgIndex[index]].classList.add('on')

      }
    }
  }

  oCon.addEventListener('click', function (e) {
    if(e.target.tagName.toLowerCase() === 'li') {
      toggleMap.sort(e)
    }else if (e.target.tagName.toLowerCase() === 'span') {
      toggleMap.preview(e)
    }
  }, false)

  toggleMap.init()
</script>

</html>

标签墙

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>节点操作</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: Microsoft YaHei, serif;
    }

    body {
      color: #888;
    }

    li {
      list-style: none;
    }

    .wrap {
      width: 100%;
      height: 800px;
      padding: 50px 0;
      background: linear-gradient(180deg, #92BFD9, #EFAA8E);
    }

    #box {
      display: flex;
      width: 800px;
      height: 500px;
      margin: auto;
      border: 1px solid #ddd;
    }

    #box .left {
      flex: 1;
      padding: 30px 0 0 20px;
      background-color: #fff;
    }

    #box .left>span {
      color: orange;
    }

    #box .left span.area {
      color: #888;
      cursor: pointer;
    }

    #box .left span.area:hover {
      color: orange;
    }

    #box .left ul {
      margin-top: 30px;
    }

    #box .left ul li {
      float: left;
      border: 1px solid #ddd;
      padding: 5px;
      margin: 8px;
    }

    #box .left ul li span:hover {
      color: orange;
      cursor: pointer;
    }

    #box .right {
      flex: 1;
      background-color: rgba(0, 0, 0, .5);
    }

    #box .right ul {
      margin: 30px 20px;
      color: #fff;
    }

    #box .right ul li {
      float: left;
      border: 1px solid #fff;
      padding: 2px 5px;
      margin: 0 10px 20px 0;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div id="box">
      <div class="left">
        <span>热门目的地：</span>
        <span class="area">马来西亚</span>
        <span class="area">泰国</span>
        <span class="area">三亚</span>
        <span class="area">新西兰</span>
        <span class="area">云南</span>
        <span class="area">韩国</span>
        <ul>
          <!--<li>马来西亚 <span>x</span> </li>-->
        </ul>
      </div>
      <div class="right">
        <ul>
          <!--<li>你好</li>-->
        </ul>
      </div>
    </div>
  </div>
  <script src="../js/common.js"></script>
  <script>
    var oLeft = document.querySelector('.left')
    var oLeftUl = document.querySelector('.left > ul')
    var oRightUl = document.querySelector('.right > ul')
    var aArea = document.querySelectorAll('.area')

    var areaMap = {
      checkedArr: [],
      add: function (e) {
        var checked = e.target.innerText
        if(this.checkedArr.indexOf(checked) === -1) {
          var rightStr = `<li>${checked}</li>`
          var leftStr = `<li>${checked} <span>x</span> </li>`
          oRightUl.innerHTML += rightStr
          oLeftUl.innerHTML += leftStr
          this.checkedArr.push(checked)
        }
      },
      remove: function (e) {
        var checked = e.target.parentElement
        var idx = getElementIdx(checked)
        oRightUl.children[idx].remove()
        checked.remove()
        this.checkedArr.splice(idx,1)
      }
    }

    oLeft.addEventListener('click', function (e) {
      if(e.target.className === 'area') {
        areaMap.add(e)
      }
      if(e.target.parentElement.tagName.toLowerCase() === 'li') {
        areaMap.remove(e)
      }
    }, false)
   
  </script>
</body>

</html>

放大镜

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品放大镜</title>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .product-intro {
      position: relative;
      width: 450px;
      margin: 100px 0 0 200px;
      border: 1px solid #ccc;
    }

    .preview {
      position: relative;
    }

    .enlargement {
      display: none;
      overflow: hidden;
      position: absolute;
      top: -1px;
      left: 450px;
      width: 540px;
      height: 540px;
      border: 1px solid #ccc;
    }

    .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 60%;
      background-color: rgba(228, 228, 11, 0.3);
      border: 1px solid rgba(122, 122, 122, .4);
      cursor: move;
    }

    .active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="product-intro">
    <div class="preview">
      <img src="images/m30.jpg" width="450" height="450" alt="m30">
      <div class="mask"></div>
    </div>
    <div class="enlargement">
      <img src="images/m30-big.jpg" alt="m30">
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>
    var oPrev = $('.preview')
    var oMask = $('.mask')
    var oEnlargement = $('.enlargement')
    var oEnlargementImg = $('.enlargement>img')
  
    var mouseEventMap = {
      mouseenter: function (e) {
        oMask.classList.add('active')
        oEnlargement.classList.add('active')
      },
      mouseleave: function (e) {
        oMask.classList.remove('active')
        oEnlargement.classList.remove('active')
      },
      mousemove: function (e) {
        var x = e.clientX - getPosition(oPrev).left - (oMask.offsetWidth / 2)
        var y = e.clientY - getPosition(oPrev).top - (oMask.offsetHeight / 2)
        x = Math.min(x, oPrev.offsetWidth - oMask.offsetWidth)
        x = Math.max(0, x)
        y = Math.min(y, oPrev.offsetHeight - oMask.offsetHeight)
        y = Math.max(0, y)
        oMask.style.left = x + 'px'
        oMask.style.top = y + 'px'
        var ratio= (oEnlargementImg.offsetWidth - oEnlargement.offsetWidth) / (oPrev.offsetWidth - oMask.offsetWidth)
        oEnlargementImg.style.marginTop = - ratio * y + 'px'
        oEnlargementImg.style.marginLeft = - ratio * x + 'px'  
      },
    }

    oPrev.addEventListener('mouseenter', handle, false)
    oPrev.addEventListener('mouseleave', handle, false)
    oPrev.addEventListener('mousemove', handle, false)

    function handle(e) {
      if(mouseEventMap[e.type] && typeof mouseEventMap[e.type] === 'function') {
        mouseEventMap[e.type](e)
      }
    }

  </script>
</body>

</html>

楼梯导航

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动到展示区</title>
  <link rel="stylesheet" href="css/reset.css">
  <style>
    .box {
      height: 400px;
      background-color: #368;
      margin: 10px;
      text-align: center;
      line-height: 400px;
      font-size: 80px;
      font-weight: 900;
      color: #fff;
    }


    .slide-nav {
      position: fixed;
      top: 300px;
      right: 0;
      height: 500px;
      width: 45px;
      background-color: #222;
      color: #fff;
    }

    .slide-nav li {
      font-size: 20px;
      line-height: 80px;
      text-align: center;
      border-bottom: 1px solid #fff;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>

<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <ul class="slide-nav">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <script src="js/common.js"></script>
  <script>
    var oNav = $('.slide-nav')
    var aBox = $$('.box')
    var timer
    oNav.addEventListener('click', function (e) {
      if(e.target.tagName.toLowerCase() === 'li') {
        scrollMove(aBox[e.target.innerText - 1], false)
       
      }
    }, false)

    function scrollMove(ele, isTop) {
      var speed = 10
      var targetTop = ele.offsetTop
      var scrollTop
      isTop ?? true
      if(!isTop) {
        targetTop = ele.offsetTop - (window.innerHeight - ele.offsetHeight) / 2 
      }
      clearInterval(timer)
      timer = setInterval(function () {   
        var scrollTop = document.documentElement.scrollTop; 
        speed = (targetTop - scrollTop) / 10
        if(Math.abs(scrollTop - targetTop) < 10) {
          clearInterval(timer)
          document.documentElement.scrollTop = targetTop
          return false
        }
        document.documentElement.scrollTop = scrollTop + speed
      }, 1000 / 10)
    }
  </script>
</body>

</html>

吸顶导航

没吸顶
在这里插入图片描述
吸顶

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>吸顶导航</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/public.css">
  <link rel="stylesheet" href="css/header.css">
  <style>
    .cq-header {
      background-color: #222;
    }

    .cq-header.fixed {
      background-color: #fff;
      position: fixed;
    }

    .cq-header.fixed .cq-head-nav a {
      color: #222;
    }

    .fill-wrap {
      height: 490px;
      margin: 10px 0;
    }

    .bg222 {
      background-color: pink;
    }

    .bg960 {
      background-color: #960;
    }

    .bg0f5 {
      background-color: #0f5;
    }

    .bg368 {
      background-color: #368;
    }

    .fill-wrap.h80 {
      height: 80px;
    }
  </style>
</head>

<body>
  <div class="fill-wrap bg222 h80"></div>
  <div id="head" class="cq-header">
    <div class="cq-head-wrap w1160 flex flex-between">
      <div class="cq-head-logo">
        <h1>
          <span class="visib-hid">橙子</span>
          <a href="#">
            <img id="logo" src="images/logo-rev.png" width="92" height="36" alt="logo">
          </a>
        </h1>
      </div>
      <div class="cq-head-nav flex ">
        <ul class="flex ">
          <li><a href="#" class="pr10">首页</a></li>
          <li class="pull-list ">
            <ul class="pull-list-item">
              <li><a href="#">橙品牌</a></li>
              <li><a href="#">橙金融</a></li>
              <li><a href="#">橙积分</a></li>
              <li><a href="#">橙营销</a></li>
              <li><a href="#">橙福利</a></li>
            </ul>
          </li>
          <li><a href="#">橙权益</a></li>
          <li><a href="#">行业案例</a></li>
          <li><a href="#">新闻动态</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="fill-wrap bg222"></div>
  <div class="fill-wrap bg960"></div>
  <div class="fill-wrap bg0f5"></div>
  <div class="fill-wrap bg368"></div>

  <script src='js/common.js'></script>
  <script>
    var oHead = $('#head')
    var ceilTop = getPosition(oHead).top
    var oLogo = $('#logo')
    var temp 
    
    document.addEventListener('scroll', function () {
      console.log(getElementScroll())
      if(getElementScroll().top > ceilTop){
        if(!temp){
          temp = createDom()
          oHead.classList.add('fixed')
          oLogo.src ="images/logo.png"
        }
      }else{
        if(temp){
          oHead.classList.remove('fixed')
          oLogo.src ="images/logo-rev.png"
          temp.remove()
          temp = null
        }
      }
    }, false)

    function createDom () {
      var vDom = document.createElement('div')
      vDom.id = 'temp' 
      vDom.style.height = ceilTop + 'px'
      document.body.insertBefore(vDom, oHead)
      return {
        'remove': function(){
          vDom.remove();
        }
      }

    }
  </script>
</body>

</html>

无缝轮播图

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 轮播图 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {
      overflow: hidden;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .pic-list {
      width: 100%;
    }

    .pic-list li {
      float: left;
    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    .slider .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="banner">
    <ul class="pic-list">
      <li><img src="images/1.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/2.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/3.jpg" alt="" width="500" height="200"></li>
      <li><img src="images/4.jpg" alt="" width="500" height="200"></li>
    </ul>
    <div class="slider">

    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
  <script src="js/common.js"></script>
  <script>
    var oBan = $('.banner')
    var oUl = $('.pic-list')
    var aLi = oUl.children
    var picW = aLi[0].offsetWidth
    var picLen = aLi.length
    var oSliderBtn = $('.btn-wrap')
    var oSlider = $('.slider')
    var aSlider
    var index = 0
    var timer
    var slidesMap = {
      init: function () {
        setStyle(oUl, {
          width: picW * (picLen + 1) + 'px'
        })
        var str = ''
        for(var i = 0; i < picLen; i++){
          str += `<span>${i + 1}</span>`
        }
        oSlider.innerHTML = str
        aSlider = oSlider.children
        aSlider[0].classList.add('active')
        var cloneSlider = aLi[0].cloneNode(true)
        oUl.appendChild(cloneSlider)
        picLen = aLi.length
      },
      prev: function () {
        if(index === 0) {
          index = picLen - 1  
          setStyle (oUl, {
            'margin-left': - (index * picW) + 'px'
          })
        }
        index--
      },
      next: function () {
        if(index === (picLen - 1)) {
          index = 0
          setStyle (oUl, {
            'margin-left': 0 +  'px'
          })
        }
        index++
      }
    }

    slidesMap.init()
    autoSlider()
    oSliderBtn.addEventListener('click', function (e) {
      clearInterval(timer);
      if(e.target.tagName.toLowerCase() === 'span'){
        var btn = e.target
        if(slidesMap[btn.className] && typeof slidesMap[btn.className] === 'function'){
          sliderMove(slidesMap[btn.className])
        }
      }
    }, false)

    oSlider.addEventListener('mouseover', function (e) {
      clearInterval(timer);
      if(e.target.tagName.toLowerCase() === 'span') {
        sliderMove(function () {
          index = getElementIdx(e.target)
        })
      }
    }, false)

    oBan.addEventListener('mouseover', function (e) {
      clearInterval(timer)
    }, false)

    oBan.addEventListener('mouseout', function (e) {
      autoSlider()
    }, false)

    function sliderMove(callback){
      if(index === picLen - 1) {
        aSlider[0].classList.remove('active')
      }else{
        aSlider[index].classList.remove('active')
      }
      callback && callback()
      animate(oUl, {
        'margin-left': - (index * picW) + 'px'
      })
      if(index === picLen - 1) {
        aSlider[0].classList.add('active')
      }else{
        aSlider[index].classList.add('active')
      }
    }

    function autoSlider() {
      timer && clearInterval(timer);
      timer = setInterval(function () {
        sliderMove(function () {
          slidesMap.next()
        })
      }, 1000)
    }
  </script>
</body>

</html>

自定义滚动条

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      user-select: none;
      margin: 0;
      padding: 0;
    }

    .wrap {
      overflow: hidden;
      position: relative;
      width: 300px;
      height: 500px;
      margin: 100px auto;
      box-shadow: 0 0 8px #222;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      padding: 5px 20px 5px 5px;
      color: #333;
      line-height: 22px;
      font-size: 14px;
      text-align: justify;
    }

    .scroll {
      position: absolute;
      top: 0;
      right: 0;
      width: 15px;
      height: 100%;
      background-color: #ccc;
    }

    .bar {
      position: absolute;
      width: 15px;
      height: 80px;
      background-color: #444;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div class="wrap">
    <div class="content">
      浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。
      浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。
    </div>
    <div class="scroll">
      <div class="bar"></div>
    </div>
  </div>
  <script>
    var oWrap = document.querySelector('.wrap');
    var oCon = document.querySelector('.content');
    var oScroll = document.querySelector('.scroll');
    var oBar = document.querySelector('.bar');

    var scrollEventMap = {
      isDown: false,
      start: {
        y: 0,
        top: 0
      },
      ratio: 0,
      initScroll: function () {
        oBar.style.height = oWrap.offsetHeight / oCon.offsetHeight * oScroll.offsetHeight + 'px';
        this.ratio = (oCon.offsetHeight - oWrap.offsetHeight) / (oScroll.offsetHeight - oBar.offsetHeight);
      },
      mousedown: function (e) {
        this.isDown = true;
        this.start.y = e.clientY;
        this.start.top = oBar.offsetTop;
      },
      mousemove: function (e) {
        if (!this.isDown) {
          return false;
        }
        var diffY = e.clientY - this.start.y;
        var _y = diffY + this.start.top;
        scrollBar(_y, this.ratio);

      },
      mouseup: function (e) {
        if (!this.isDown) {
          return false;
        }
        this.isDown = false;
      },
      mousewheel: function (e) {
        var _y = oBar.offsetTop;
        if (e.wheelDelta > 0) {
          _y -= 2;
        } else {
          _y += 2;
        }
        scrollBar(_y, this.ratio);
      }
    }
    
    scrollEventMap.initScroll();
    oBar.addEventListener('mousedown', touchScroll, false);
    document.addEventListener('mousemove', touchScroll, false);
    document.addEventListener('mouseup', touchScroll, false);
    oWrap.addEventListener('mousewheel', touchScroll, false);

    function scrollBar(_y, ratio) {
      _y = Math.max(0, _y);
      _y = Math.min(_y, oScroll.offsetHeight - oBar.offsetHeight);
      oBar.style.top = _y + 'px';
      oCon.style.marginTop = -_y * ratio + 'px';
    }

    function touchScroll(e) {
      if (scrollEventMap[e.type] && typeof scrollEventMap[e.type] === 'function') {
        scrollEventMap[e.type](e);
      }
    }
  </script>
</body>

</html>

碰撞换位

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>碰撞监测</title>
  <style>
    * {
      user-select: none;
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
      pointer-events: none;
      /*禁止鼠标事件默认行为*/
    }

    html,
    body {
      height: 100%;

    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-around;
      position: relative;
      width: 940px;
      height: 468px;
      padding: 10px;
      box-shadow: 0 0 8px #222;
      border-radius: 6px;
    }

    .wrap .child {
      overflow: hidden;
      box-shadow: 0 0 2px #ccc;
      border-radius: 3px;
      transition: .4s linear;
    }

    .wrap .child.active {
      z-index: 999;
      box-shadow: 0 0 8px #222;
      transition: none;
    }

    .wrap .child.collision {
      transform: scale(1.05);

    }
  </style>
</head>

<body>
  <div class="wrap">
    <span class="child"><img src="images/re1.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re2.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re3.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re4.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re5.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re6.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re7.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re8.jpg" alt="" width="290" height="137"></span>
    <span class="child"><img src="images/re9.jpg" alt="" width="290" height="137"></span>
  </div>
  <script src="js/common.js"></script>
  <script>
    var oWrap = document.querySelector('.wrap')
    var aChild = document.querySelector('.wrap').children
    var childLen = aChild.length

    var eventTypeMap = {
      tempArr : [],
      collisionArr : [],
      collisionEle : null,
      vDomArr : [],
      targetEle : null,
      isDown : false,
      isMove : false,
      startPos : {
        x : 0,
        y : 0,
        left : 0,
        top : 0
      } ,
      'initPos' : function () {
        var that = this
        for (var i = 0; i < childLen; i++) {
          this.tempArr.push([aChild[i].offsetLeft, aChild[i].offsetTop]);
          (function (idx) {
            setTimeout(function () {
              setStyle(aChild[idx], {
                position : 'absolute',
                left : that.tempArr[idx][0] + 'px',
                top : that.tempArr[idx][1] + 'px',
              })
            }, 0)
          })(i)                
        } 
        for (var i = 0; i < childLen; i++) {
          this.vDomArr[i] = aChild[i];
        }
      },
      'mousedown' : function (e) {
        this.isDown = true
        this.targetEle = e.target
        this.startPos.x = e.clientX
        this.startPos.y = e.clientY
        this.startPos.left = this.targetEle.offsetLeft
        this.startPos.top = this.targetEle.offsetTop
        this.targetEle.classList.add('active')
      },
      'mousemove' : function (e) {
        if(!this.isDown){
          return false
        }
        this.collisionArr = []
        var _x = e.clientX - this.startPos.x
        var _y = e.clientY - this.startPos.y
        setStyle(this.targetEle, {
          left : _x + this.startPos.left + 'px',
          top :  _y + this.startPos.top + 'px'
        })
        for (i = 0; i < childLen; i++) {
          aChild[i].classList.remove('collision');
          if (!(this.targetEle === aChild[i])) {
            if(isCollision(this.targetEle,aChild[i])) {
              this.collisionArr.push(aChild[i])
            }
          }
        }

        if(this.collisionArr.length > 0){
          this.collisionEle = getShortDistance(this.collisionArr,this.targetEle)
          this.collisionEle.classList.add('collision')
        }

        if (this.collisionEle && !this.isMove) {
          this.isMove = true;
          var targetIdx = this.vDomArr.indexOf(this.targetEle);
          var collisionIdx = this.vDomArr.indexOf(this.collisionEle);
          this.vDomArr.splice(targetIdx, 1);
          this.vDomArr.splice(collisionIdx, 0, this.targetEle);
          translate(this.vDomArr, this.targetEle,this.tempArr);
        }
      },
      'mouseup' : function (e) {
        this.isDown = false
        this.targetEle.classList.remove('active')
        translate(this.vDomArr, null, this.tempArr);
        this.targetEle = null
      }
    }
    
    eventTypeMap.initPos()
    oWrap.addEventListener('mousedown', drawEle, false)
    document.addEventListener('mousemove', drawEle, false)
    document.addEventListener('mouseup', drawEle, false)

    function drawEle (ele) {
      if(eventTypeMap[ele.type] && typeof eventTypeMap[ele.type] === 'function'){
        eventTypeMap[ele.type](ele)
      }
    }

    function isCollision (ele1,ele2) {
      L1 = ele1.offsetLeft
      R1 = L1 + ele1.offsetWidth
      T1 = ele1.offsetTop
      B1 = T1 + ele1.offsetHeight

      L2 = ele2.offsetLeft
      R2 = L2 + ele2.offsetWidth
      T2 = ele2.offsetTop
      B2 = T2 + ele2.offsetHeight

      if(L1 > R2 || R1 < L2 || T1 > B2 || B1 < T2) {
        return false
      }else{
        return true
      }
    }

    function getShortDistance (arr,ele) {
      var disArr = [] 
      arr.forEach(function (item, idx) {
        var a = item.offsetLeft - ele.offsetLeft
        var b = item.offsetTop - ele.offsetTop
        var c = Math.sqrt(a * a + b * b)
        disArr.push({
          element : item,
          distance : c
        })
      })
      return disArr.reduce(function (acc, curr, idx) {
        if(curr.distance < acc.distance){
          acc = curr
        }
        return acc
      }).element
    }

    function translate(vDom, target,tempArr) {
      tempArr.forEach(function (item, idx, arr) {
        if (vDom[idx] !== target) {
          vDom[idx].style.top = item[1] + 'px';
          vDom[idx].style.left = item[0] + 'px';
        }
      });
      setTimeout(function () {
        eventTypeMap.isMove = false;
      }, 500);
    }
  </script>

</body>

</html>

移动蒙版层

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动蒙版层案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      position: relative;
    }

    .container {
      position: relative;
      top: 10px;
      left: 10px;
      width: 800px;
      height: 800px;
      background-color: #368;
    }

    .mask {
      position: absolute;
      width: 400px;
      height: 280px;
      padding: 20px;
      background-color: #690;
      box-shadow: 0 0 8px #222;
      cursor: move;
    }
  </style>
</head>

<body>

 
    <div class="mask">

    </div>
 

  <script src='js/common.js'></script>
  <script>
    var oMask = $('.mask')


    var eventTypeMap = {
      isDown : false,
      startPos : {
        x : 0,
        y : 0,
        left : 0,
        top : 0
      },
      targetEle : null,
      limit : {
        maxLeft :window.innerWidth - oMask.offsetWidth,
        maxTop : window.innerHeight - oMask.offsetHeight,
      },
      'mousedown': function (e) {
        this.isDown = true
        this.targetEle = e.target
        this.startPos.x = e.clientX,
        this.startPos.y = e.clientY
        this.startPos.left = getPosition(oMask).left
        this.startPos.top = getPosition(oMask).top
      },
      'mousemove': function (e) {
        if(this.isDown === true) {
          var diffX = e.clientX - this.startPos.x
          var diffY = e.clientY - this.startPos.y
          var diffLeft = this.startPos.left + diffX
          var diffTop = this.startPos.top + diffY
          diffLeft = Math.max(0, diffLeft)
          diffLeft = Math.min(this.limit.maxLeft, diffLeft)
          diffTop = Math.max(0, diffTop)
          diffTop = Math.min(this.limit.maxTop, diffTop)
          setStyle(oMask, {
            top : diffTop + 'px',
            left : diffLeft + 'px',
           
          })
          if (e.clientX < 0 || e.clientY < 0) {
            isDown = false;
          }
        }
      },
      'mouseup': function (e) {
        this.isDown = false
        this.targetEle = null
      },
    }
 
    oMask.addEventListener('mousedown' , drawEle, false)
    document.addEventListener('mousemove' , drawEle, false)
    document.addEventListener('mouseup' , drawEle, false)
    
    function drawEle (e) {
      if(eventTypeMap[e.type] && typeof eventTypeMap[e.type] === 'function') {
        eventTypeMap[e.type](e)
      }
    }
  </script>
</body>

</html>

喵_美

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端常见功能案例实现

padding: 0;left: 0;right: 0;.bar {浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。
复制链接

扫一扫

专栏目录