王者荣耀手风琴案例

目标效果

在这里插入图片描述

  • 鼠标移入时,大图隐藏显示小图,且有淡入淡出效果

代码实现


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="./js/jquery.min.js">script>
  <style>
    * {
      
      margin: 0;
      padding: 0;
    }

    ul {
      
      list-style: none;
    }

    .wrapper {
      
      width: 900px;
      height: 90px;
      background: url("./images/bg.png") no-repeat;
      margin: 100px auto;
      box-sizing: border-box;
      padding: 10px;
    }

    .kings li {
      
      position: relative;
      float: left;
      width: 69px;
      height: 69px;
      margin: 0 10px;
    }

    .kings .small {
      
      position: absolute;
      left: 0;
      top: 0;
      width: 69px;
      height: 69px;
    }

    .kings .large {
      
      display: none;
      width: 224px;
      height: 69px;
    }


  style>
head>
<body>
    <div class="wrapper">
      <ul class="kings">
        <li>
          <a href="javascript:;">
            <img src="./images/c.png" class="large">
            <img src="./images/c1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/h.png" class="large">
            <img src="./images/h1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/l.png" class="large">
            <img src="./images/l1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/m.png" class="large">
            <img src="./images/m1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/t.png" class="large">
            <img src="./images/t1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/w.png" class="large">
            <img src="./images/w1.jpg" class="small">
          a>
        li>
        <li>
          <a href="javascript:;">
            <img src="./images/z.png" class="large">
            <img src="./images/z1.jpg" class="small">
          a>
        li>
      ul>
    div>
    <script>
      // 鼠标移入事件
      $(".kings li").mouseenter(function() {
      
        // 利用animate动画,设置当前li的宽度为224px
        // 动画效果前记得加stop()
        $(this).stop().animate({
      
          width:224
        }).find(".small").stop().fadeOut().siblings(".large").stop().fadeIn()
        // 链式编程,把小图淡出,大图淡入

        // 排他思想,把其他li快读设置为69px
        // 并且小图淡入,大图淡出
        $(this).siblings("li").stop().animate({
      
          width:69
        }).find(".small").stop().fadeIn().siblings(".large").stop().fadeOut()
      })
    script>
body>
html>

你可能感兴趣的:(jQuery,jquery,css,js,animation,html)