News sliding effect implementation code at the bottom of JS (imitation of Vanke)-JS Tutorial-php.cn

News sliding effect implementation code at the bottom of JS (imitation of Vanke)

巴扎黑

Release： 2017-09-04 09:54:11

Original

1630 people have browsed it

This article introduces you to the JS imitating the news sliding effect code at the bottom of Vanke through a piece of example code. Friends who need it can refer to it

No more nonsense, I will directly post the code for you. The specific code is as follows 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>

Copy after login

The above is the detailed content of News sliding effect implementation code at the bottom of JS (imitation of Vanke). For more information, please follow other related articles on the PHP Chinese website!