search

Home >Web Front-end >JS Tutorial >jquery accordion focus animation

jquery accordion focus animation

韦小宝
韦小宝Original
2017-11-21 10:28:321746browse

jquery The accordion focus animation plug-in can be used directly. Students who are interested in jquery can also use it to study and sublimate our jquery Knowledge.

jquery accordion focus animation

Code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网--手风琴焦点图</title>
<style>
  *{margin:0; padding:0;}
  body,html{width:100%; height:100%;}
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .bg-box-1{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/zhibo4.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-2{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner1.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-3{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner3.jpg&#39;) no-repeat center/cover;
  }
  .bg-box-4{
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner4.jpg&#39;) no-repeat center/cover;
  }
  #wrap{
    position: absolute;
    overflow: hidden;
    top:0; left:0; right:0; bottom:0;
    margin:auto;
    width: 1000px;
    height: 400px;
  }
  #wrap > ul{
    width: 120%;
    list-style: none;
  }
  #wrap > ul > li{
    float: left;
    width: 100px;
    height: 400px;
    cursor: pointer;
  }
  #wrap > ul > li:nth-child(1){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/zhibo4.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(2){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner1.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(3){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner3.jpg&#39;) no-repeat center/cover;
  }
  #wrap > ul > li:nth-child(4){
    background: url(&#39;http://www.php.cn/tpl/Index/Static/img/banner4.jpg&#39;) no-repeat center/cover;
    width: 700px;
  } 
  #wrap > ul > li > .text{
    width: 100px;
    height: 100%;
    background: #000;
    opacity: .5;
  }
  #wrap > ul > li > .text p{
    padding: 20px 40px;
    font-family: &#39;Microsoft yahei&#39;;
    color: #fff;
  }
</style>
</head>
<body>

<div class="bg bg-box-1"></div>
<div class="bg bg-box-2"></div>
<div class="bg bg-box-3"></div>
<div class="bg bg-box-4"></div>
<div id="wrap">
  <ul>
    <li>
      <div>
        <p>PHP中文网线上培训班</p>
      </div>
    </li>
    <li>
      <div>
        <p>创建一个属于自己的框架</p>
      </div>
    </li>
    <li>
      <div>
        <p>企业站点开发</p>
      </div>
    </li>
    <li>
      <div>
        <p>PHP中文网--这个专注编程教育的网站</p>
      </div>
    </li>
  </ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script type="text/javascript">
(function(){
  $(&#39;#wrap li&#39;).mouseover(function(){
    if(!$(this).hasClass(&#39;curr&#39;)){
      $(&#39;#wrap li&#39;).removeClass(&#39;curr&#39;);
      $(this).addClass(&#39;curr&#39;);

      // 切换背景
      $(&#39;#wrap li&#39;).each(function(index){
        if($(this).hasClass(&#39;curr&#39;)){
          $(&#39;.bg&#39;).fadeOut(300);
          $(&#39;.bg:eq(&#39; + index + &#39;)&#39;).fadeIn(500);
        }
      });

      $(&#39;.curr&#39;).stop().animate({
        width: 700
      }, 500, &#39;linear&#39;);
      $(&#39;#wrap li&#39;).not(&#39;.curr&#39;).stop().animate({
        width: 100
      }, 500, &#39;linear&#39;);
    }
  });
})()
</script>

</body>
</html>

The above is the source code of jquery accordion focus animation. Students who are interested or need it can use it directly. ,Research! For more articles and source codes, please search on PHP中文网~~

Related recommendations:

jquery title selection animation

jQuery code example to implement div following mouse movement

jquery to implement gesture unlocking source code

The above is the detailed content of jquery accordion focus animation. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to several methods of implementing progress bars in JavaScriptNext article：Introduction to several methods of implementing progress bars in JavaScript

Related articles

See more