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

IT架构圈

发布于 2018-06-01 12:19:59

1.3K0

发布于 2018-06-01 12:19:59

文章被收录于专栏：IT架构圈

元素节点操作创建节点

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;   
      }
  })

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-04-04，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自编程坑太多微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度