jQuery 之元素节点操作 & 滚轮事件与函数节流

2018-03-29 本文已影响38人奋斗的老王

元素节点操作

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点
- 1、append()和appendTo()：在现存元素的内部，从后面插入元素
```
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
```
- 2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
- 3、after()和insertAfter()：在现存元素的外部，从后面插入元素
- 4、before()和insertBefore()：在现存元素的外部，从前面插入元素
删除节点 : $('#div1').remove();
todolist(计划列表)实例

滚轮事件与函数节流

jquery.mousewheel插件使用
- jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。
函数节流
- javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

整屏滚动实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>整页滚动</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript">
        $(function(){

            var $h = $(window).height();
            var $pages = $('.pages');
            $pages.css({height:$h});
            var $points = $('.points li');
            var nowscreen = 0;
            var timer = null;

            $pages.eq(0).addClass('moving');

            $(window).mousewheel(function(ev,dat){

                clearTimeout(timer);

                timer = setTimeout(function(){

                if(dat==-1)
                {
                    nowscreen++;
                }
                else
                {
                    nowscreen--;
                }

                if(nowscreen<0)
                {
                    nowscreen=0;
                }

                if(nowscreen>4)
                {
                    nowscreen=4
                }
                $('.pages_con').animate({top:-nowscreen*$h},300);
                $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
                $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
                },200)              
            })

            $points.click(function(event) {
                var nowindex = $(this).index();
                $('.pages_con').animate({top:-nowindex*$h},300);
                $pages.eq(nowindex).addClass('moving').siblings().removeClass('moving');
                $points.eq(nowindex).addClass('active').siblings().removeClass('active');
            });
        })
    </script>   
</head>
<body>
    <div class="pages_con">

        <div class="pages page1">
            <div class="main_con">
                <div class="left_img"><img src="images/001.png"></div>
                <div class="right_info">
                Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
                    
                </div>
            </div>
        </div>

        <div class="pages page2">
            <div class="main_con">
                <div class="right_img"><img src="images/002.png"></div>
                <div class="left_info">
                2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
                </div>
            </div>
            
        </div>

        <div class="pages page3">
            <div class="main_con">
                <div class="left_img"><img src="images/004.png"></div>
                <div class="right_info">
                以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

                    
                </div>
            </div>          
        </div>

        <div class="pages page4">
            <div class="main_con">
                <div class="left_img"><img src="images/003.png"></div>
                <div class="right_info">
                    Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
                </div>
            </div>          
        </div>

        <div class="pages page5">
            <div class="main_con">
                <div class="center_img"><img src="images/005.png"></div>        
            </div>
            
        </div>
    </div>
    <ul class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

幻灯片动画

  $(function(){
      
      var $li = $('.slide_pics li');
      var len = $li.length;
      var $prev = $('.prev');
      var $next = $('.next');


      //将要运动过来的li
      var nowli = 0;

      //当前要离开的li
      var prevli = 0;

      var timer = null;



      $li.not(':first').css({left:760});

      $li.each(function(index){

          var $sli = $('<li>');

          if(index==0)
          {
              $sli.addClass('active');
          }

          $sli.appendTo('.points')

      })

      $points = $('.points li');


      $points.click(function(){
          nowli = $(this).index();

          if(nowli==prevli){
              return;
          }

          move();
          $(this).addClass('active').siblings().removeClass('active');
      });


      $prev.click(function(){
          nowli--;
          move();
          $points.eq(nowli).addClass('active').siblings().removeClass('active');  

      })

      $next.click(function(){
          nowli++;
          move();
          $points.eq(nowli).addClass('active').siblings().removeClass('active');  

      })

      $('.slide').mouseenter(function() {
          clearInterval(timer);
      });

      $('.slide').mouseleave(function() {
          timer = setInterval(autoplay,1500);
      });



      timer = setInterval(autoplay,1500);

      function autoplay(){
          nowli++;
          move();
          $points.eq(nowli).addClass('active').siblings().removeClass('active');
      }


      function move(){

          if(nowli<0)
          {
              nowli = len-1;
              prevli = 0;
              $li.eq(nowli).css({left:-760});
              $li.eq(prevli).stop().animate({left:760});
              $li.eq(nowli).stop().animate({left:0});
              prevli=nowli;
              return;
          }

          if(nowli>len-1)
          {
              nowli = 0;
              prevli = len-1;
              $li.eq(nowli).css({left:760});
              $li.eq(prevli).stop().animate({left:-760});
              $li.eq(nowli).stop().animate({left:0});
              prevli=nowli;
              return;
          }



          if(nowli>prevli){

              $li.eq(nowli).css({left:760});
              $li.eq(prevli).stop().animate({left:-760});         
          }
          else
          {
              $li.eq(nowli).css({left:-760});
              $li.eq(prevli).stop().animate({left:760});
                      
          }

          $li.eq(nowli).stop().animate({left:0});
          prevli=nowli;   
      }
  })

jQuery 之元素节点操作 & 滚轮事件与函数节流

元素节点操作

滚轮事件与函数节流

猜你喜欢

热点阅读

jQuery 之 元素节点操作 & 滚轮事件与函数节流

元素节点操作

滚轮事件与函数节流

猜你喜欢

热点阅读

jQuery 之元素节点操作 & 滚轮事件与函数节流