专栏首页编程坑太多jQuery 之 元素节点操作滚轮事件与函数节流

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

元素节点操作 创建节点

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

本文分享自微信公众号 - 编程坑太多(idig88),作者:诸葛阿明

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「docker实战篇」python的docker-抖音web端数据抓取(19)

    PS:text文本中的数据1000条根本不够爬太少了,实际上是app端和pc端配合来进行爬取的,pc端负责初始化的数据,通过userID获取到粉丝列表然后在不停...

    IT故事会
  • JQuery碎碎念

    IT故事会
  • React 手动实现 this 的绑定的几种方法

    IT故事会
  • 下拉菜单;手风琴;九宫格的Jquery的使用实例

    Dream城堡
  • AngularJS:如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能。 对于处理小数量,ng-repeat是非常有用的,但是如果...

    葡萄城控件
  • 初学者必知的HTML规范

    超然
  • 这种div高度自适应确定你知道吗?

    _simple
  • JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID、通过标签名字和通过类名字来获取; 1.通过元素ID属性的ID值来获得元素对象-getElem...

    郑小超.
  • jquery操作DOM 元素(2)

    .after()   在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点。   .after(content[,conten...

    用户1197315
  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315

扫码关注云+社区

领取腾讯云代金券