zoukankan      html  css  js  c++  java
  • jquery 上下滚动显示隐藏

     
        function scroll(fn) {
            var beforeScrollTop = document.body.scrollTop,
                fn = fn || function() {};
            window.addEventListener("ontouchmove", function() {
                var afterScrollTop = document.body.scrollTop,
                    delta = afterScrollTop - beforeScrollTop;
                if (delta === 0) return false;
                fn(delta > 0 ? "down" : "up");
                beforeScrollTop = afterScrollTop;
            }, false);
        }

    2,sass转译

    @function rem($n) {
            @return $n / 40 + rem;
    }

    3,js判断鼠标上下滚动;

    <script type="text/javascript">  
            var scrollFunc = function (e) {  
              e = e || window.event;  
              if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件               
                  if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                      alert("滑轮向上滚动");  
                  }  
                  if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                      alert("滑轮向下滚动");  
                  }  
              } else if (e.detail) {  //Firefox滑轮事件  
                  if (e.detail> 0) { //当滑轮向上滚动时  
                      alert("滑轮向上滚动");  
                  }  
                  if (e.detail< 0) { //当滑轮向下滚动时  
                      alert("滑轮向下滚动");  
                  }  
              }  
          }  
           //给页面绑定滑轮滚动事件  
          if (document.addEventListener) {//firefox  
              document.addEventListener('DOMMouseScroll', scrollFunc, false);  
          }  
          //滚动滑轮触发scrollFunc方法  //ie 谷歌  
          window.onmousewheel = document.onmousewheel = scrollFunc;   
        </script> 

    4,判断鼠标、滚动条上下滚动

                var windowTop = 0;
                $(window).scroll(function() {
                    var scrolls = $(this).scrollTop();
                    if(scrolls < 5 || scrolls <= windowTop) {
                        // 向上滚动显示
                        console.log('向上')
                        windowTop = scrolls;
                    } else {
                        // 向下滚动隐藏
                        console.log('向下')
                        windowTop = scrolls;
                    }
                });

    5,设置页面加载时滚动条自动滚到底的方法:

      window.onload = function(){
      	var h = document.documentElement.scrollHeight || document.body.scrollHeight;
      	window.scrollTo(h,h);
      }
    
    $(function(){
          var h = $(document).height()-$(window).height();
          $(document).scrollTop(h);
    });
    

    6,可以将HTML结构转换成字符串的函数;

                
                function Dom2Str(fn) {
                    return fn.toString().replace(/^[^/]+/*!?s?/, '').replace(/*/[^/]+$/, '').trim().replace(/>s*</g, '><');
                }
                
                var str = Dom2Str(function(){
                    /*
                         <a class="tab-item active" href="#">
                            <span class="icon icon-home"></span>
                            <span class="tab-label">首页</span>
                        </a>
                        <a class="tab-item" href="#">
                            <span class="icon icon-me"></span>
                            <span class="tab-label">我</span>
                        </a>
                        <a class="tab-item" href="#">
                            <span class="icon icon-star"></span>
                            <span class="tab-label">收藏</span>
                        </a>
                        <a class="tab-item" href="#">
                            <span class="icon icon-settings"></span>
                            <span class="tab-label">设置</span>
                        </a>
                    */
                });
                
                $('nav').append(str);

  • 相关阅读:
    学习17 表单提交按钮标签
    学习16 下拉列表标签
    学习15 单选框/多选框标签
    学习14 多行文本输入标签
    学习13 文本/密码输入框的标签
    学习12 互动表单的标签
    学习10 table表格制作标签
    学习9 <span>可为部分文本设置样式属性
    金融行业网络架构与技术探讨
    二叉树
  • 原文地址:https://www.cnblogs.com/tanxiang6690/p/8310078.html
Copyright © 2011-2022 走看看