jQuery 之链式调用 & 动画 & 尺寸

2018-03-24 本文已影响35人奋斗的老王

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
```
$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});
```

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置 : offse()
3、获取可视区高度 : $(window).height();
4、获取页面高度 : $(document).height();
5、获取页面滚动距离

 $(document).scrollTop();  
 $(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  
    ......  
})

简单实例操作

1、层级菜单

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>元素绝对位置</title>
      <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
      <script type="text/javascript">
          $(function(){

              var $pos = $('.pos');
              var pos =$pos.offset();
              var w = $pos.outerWidth();
              var h = $pos.outerHeight();

              $('.pop').css({left:pos.left+w,top:pos.top});

              $pos.mouseover(function(){
                  $('.pop').show();
              })

              $pos.mouseout(function(){
                  $('.pop').hide();
              })
          })
      </script>
      <style type="text/css">
          .con{
              width:600px;
              height:600px;
              margin:50px auto 0;
          }
          
          .box{
              width:100px;
              height:100px;
              background-color:gold;
              margin-bottom:10px;
          }

          .pos{
              margin-left:500px;
          }

          .pop{
              width:100px;
              height:100px;
              background-color:red;
              position:fixed;
              left:0;
              top:0;
              display:none;

          }
      </style>
  </head>
  <body>
      <div class="con">
          <div class="box"></div>
          <div class="box"></div>
          <div class="box pos"></div>
          <div class="box"></div>
      </div>
      
      <div class="pop">
          提示信息！
      </div>

  </body>
  </html>

2、选项卡

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title> 
      <style type="text/css">
          .btns{
              width:500px;
              height:50px;
          }
          .btns input{
              width:100px;
              height:50px;
              background-color:#ddd;
              color:#666;
              border:0px;
          }
          .btns input.cur{
              background-color:gold;
          }
          .contents div{
              width:500px;
              height:300px;
              background-color: gold;
              display:none;
              line-height:300px;
              text-align:center;
          }
          .contents div.active{
              display: block;
          }
      </style>
      <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
      <script type="text/javascript">
          $(function(){

              $('#btns input').click(function() {

                  $(this).blur();

                  // this是原生的对象
                  $(this).addClass('cur').siblings().removeClass('cur');

                  //$(this).index() 获取当前按钮所在层级范围的索引值
                  $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

              });
          })
          
      </script>
  </head>
  <body>
      <div class="btns" id="btns">
          <input type="button" value="tab01" class="cur">
          <input type="button" value="tab02">
          <input type="button" value="tab03">
      </div>

      <div class="contents" id="contents">
          <div class="active">tab文字内容一</div>
          <div>tab文字内容二</div>
          <div>tab文字内容三</div>
      </div>
  </body>
  </html>

3、置顶菜单, 滚动到顶部

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>置顶菜单</title>
      <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
      <script type="text/javascript">
          $(function(){

              $(window).scroll(function() {
                  
                  var nowTop = $(document).scrollTop();

                  if(nowTop>200){
                      $('.menu').css({
                          position:'fixed',
                          left:'50%',
                          top:0,
                          marginLeft:-480
                      });

                      $('.menu_pos').show();
                  }
                  else{
                      $('.menu').css({
                          position:'static',                      
                          marginLeft:'auto'
                      });
                      $('.menu_pos').hide();
                  }
                if(nowTop>400){
                   $('.totop').fadeIn();
                }
                else{
                  $('.totop').fadeOut();
                }
              });
              $('.totop').click(function() {
                  
                  $('html,body').animate({'scrollTop':0});

              });
          })
      </script>
      <style type="text/css">
          body{margin:0px;}
          .logo_bar{
              width:960px;
              height:200px;
              background-color:#f0f0f0;
              margin:0 auto;
              
          }
          .menu,.menu_pos{
              width:960px;
              height:50px;
              margin:0 auto;
              background-color:gold;
              text-align:center;
              line-height:50px;
          }
          .menu_pos{
              display:none;
          }

          .down_con{
              width:960px;
              height:1800px;
              margin:0 auto;
          }

          .down_con p{
              margin-top:100px;
              text-align:center;
          }
          .totop{
              width:50px;
              height:50px;
              background:url(images/up.png) center center no-repeat #000;
              border-radius:50%;
              position:fixed;
              right:50px;
              bottom:50px;
              display:none;
          }
      </style>

  </head>
  <body>
      <div class="logo_bar">顶部logo</div>
      <div class="menu">置顶菜单</div>
      <div class="menu_pos"></div>
      <div class="down_con">
          <p style="color:red">网站主内容</p>
          <p>网站主内容</p>
          <p>网站主内容</p>
          <p>网站主内容</p>
          <p>网站主内容</p>
      </div>
      <a href="javascript:;" class="totop"></a>
  </body>
  </html>

4、无缝滚动

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>无缝滚动</title>
      <style type="text/css">
          body,ul,li{margin:0;padding:0}
          ul{list-style:none;}
          .slide{
              width:500px;
              height:100px;
              border:1px solid #ddd;
              margin:20px auto 0;
              position:relative;
              overflow:hidden;
          }

          .slide ul{
              position:absolute;
              width:1000px;
              height:100px;
              left:0;
              top:0;
          }

          .slide ul li{
              width:90px;
              height:90px;
              margin:5px;
              background-color:#ccc;
              line-height:90px;
              text-align: center;
              font-size:30px;
              float:left;
          }

          .btns{
              width:500px;
              height:50px;
              margin:10px auto 0;
          }

      </style>
      <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
      <script type="text/javascript">
          $(function(){
              var $ul = $('#slide ul');
              var left = 0;
              var deraction = 2;

              $ul.html($ul.html()+$ul.html());
              var timer = setInterval(move,30);
              function move(){
                  left-=deraction;
                  if(left<-500){  
                      left = 0;
                  }
                  if(left>0){
                      left=-500;
                  }
                  $ul.css({left:left});
              }
              $('#btn1').click(function(){
                  deraction = 2;
              });
              $('#btn2').click(function(){
                  deraction = -2;
              })
              $('#slide').mouseover(function(){
                  clearInterval(timer);               
              })
              $('#slide').mouseout(function(){
                  timer = setInterval(move,30);           
              })
          })
      </script>
  </head>
  <body>
      <div class="btns">
          <input type="button" name="" value="向左" id="btn1">
          <input type="button" name="" value="向右" id="btn2">

      </div>
      <div class="slide" id="slide">
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>          
          </ul>
      </div>
  </body>
  </html>

5、手风琴效果

  <!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  <style>
  *{margin:0;padding:0;}
  body{font-size:12px;}
  #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
  #accordion ul{list-style:none;}
  #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
  #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
  #accordion ul li img{display:block; float:right;}
  .bar01{left:0px;}
  .bar02{left:643px;}
  .bar03{left:664px;}
  .bar04{left:685px;}
  .bar05{left:706px;}
  .bar01 span{background:#09E0B5;}
  .bar02 span{background:#3D7FBB;}
  .bar03 span{background:#5CA716;}
  .bar04 span{background:#F28B24;}
  .bar05 span{background:#7C0070;}
  </style>

  <script type="text/javascript">
      $(function(){
          $('#accordion li').click(function() {       
              $(this).animate({left:$(this).index()*21});         
              $(this).prevAll().each(function(){              
                  $(this).animate({left:$(this).index()*21}); 
              });
              $(this).nextAll().each(function(){  
                  $(this).animate({left:(727-(5-$(this).index())*21)});               
              });
          });
      })
  </script>
  <title>手风琴效果</title>
  </head>
  <body>
  <div id="accordion">
      <ul>
      <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
      <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
      <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
      <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
      <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
      </ul>
  </div>
  </body>
  </html>

jQuery 之链式调用 & 动画 & 尺寸

jquery链式调用

jquery动画

尺寸相关、滚动事件

简单实例操作

猜你喜欢

热点阅读

jQuery 之 链式调用 & 动画 & 尺寸

jquery链式调用

jquery动画

尺寸相关、滚动事件

简单实例操作

猜你喜欢

热点阅读

jQuery 之链式调用 & 动画 & 尺寸