Code d'implémentation de l'effet de glissement en bas de JS (imitation de Vanke)-js tutoriel-php.cn

Code d'implémentation de l'effet de glissement en bas de JS (imitation de Vanke)

巴扎黑

Libérer： 2017-09-04 09:54:11

original

1699 Les gens l'ont consulté

Cet article vous présente la nouvelle code d'effet coulissant en bas de JS imitant Vanke à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer

Plus de bêtises, je posterai directement le. code pour vous. Le code spécifique est le suivant Description :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>仿万科的底部的新闻滑动特效</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #subject {
      position: relative;
      width: 80%;
      height: 165px;
      background: skyblue;
      margin: 200px auto;
      overflow: hidden;
    }
    #subject > ul > li {
      position: absolute;
      float: left;
      list-style: none;
      width: 40%;
      height: 165px;
      font-size: 48px;
      text-align: center;
      color: #fff;
      line-height: 165px;
      transition: 0.5s;
    }
    .item1 {
      background: orange;
      left: 0;
      z-index: 1;
    }
    /*hover:item1*/
    #subject.state-1 .item2,
    .item2 {
      background: deepskyblue;
      left: 40%;
      z-index: 2;
    }
    /*hover:item2*/
    #subject.state-4 .item2,
    #subject.state-3 .item2,
    #subject.state-2 .item2 {
      left: 20%;
    }
    /*hover:item3*/
    #subject.state-4 .item3,
    #subject.state-3 .item3 {
      left: 40%;
    }
    /*hover:item4*/
    #subject.state-4 .item4{
      left: 60%;
    }
    #subject.state-1 .item3,
    .item3 {
      background: mediumseagreen;
      left: 60%;
      z-index: 3;
    }
    #subject.state-3 .item4,
    #subject.state-2 .item4,
    #subject.state-1 .item4,
    .item4 {
      background: pink;
      left: 80%;
      z-index: 4;
    }
  </style>
</head>
<body>
<p id="subject" class="wrapper">
  <ul>
    <li class="item item1">1</li>
    <li class="item item2">2</li>
    <li class="item item3">3</li>
    <li class="item item4">4</li>
  </ul>
</p>
<script>
  $(function () {
    $(&#39;.item&#39;).hover(function () {
      if ($(this).hasClass(&#39;item1&#39;)) {
        $(&#39;#subject&#39;).removeClass().addClass(&#39;state-1&#39;);
      }
      if ($(this).hasClass(&#39;item2&#39;)) {
        $(&#39;#subject&#39;).removeClass().addClass(&#39;state-2&#39;);
      }
      if ($(this).hasClass(&#39;item3&#39;)) {
        $(&#39;#subject&#39;).removeClass().addClass(&#39;state-3&#39;);
      }
      if ($(this).hasClass(&#39;item4&#39;)) {
        $(&#39;#subject&#39;).removeClass().addClass(&#39;state-4&#39;);
      }
    });
    $(&#39;#subject&#39;).mouseleave(function () {
      $(&#39;#subject&#39;).removeClass();
    });
  });
</script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!