js学习事件-----js模仿手机下拉刷新（1）

最新推荐文章于 2023-03-14 17:19:42 发布
prpjava2011
最新推荐文章于 2023-03-14 17:19:42 发布
阅读量2.4k
点赞数
分类专栏： javascript 文章标签： javascript js事件
本文链接：https://blog.youkuaiyun.com/prpjava2011/article/details/18364573
版权
javascript 专栏收录该内容
16 篇文章
订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>require AMD</title>
    <style>
        /*重置css*/
        body,html,ul,ol,li{padding: 0;margin: 0;border: none;}
        ul,ol{list-style:none;}
        a{-webkit-transition: all .2s; text-decoration:none;color:#333;
        }

       #content{position:absolute;height: 300px;width: 200px;border: 1px #000000 solid;
           background-color:#f0ad4e;overflow: hidden;}
       #sc{height:100px;width:100px;top:20px;left:50px;background: #1dc116;
          overflow-y:auto;overflow-x: visible;
       }
       .list{position: absolute;width: 100%;height: 100%;top:0px;background-color:white;}
       .list li {position: relative;}
       .list li a.more{
           position: absolute;
           bottom:0px;
           right:10px;
       }
       .list li .img{margin-right: -60px; float: left; margin: -1px 0;}
       .list li .show{margin-left: 65px;word-break:break-all;
           font-size:12px;
           line-height:20px;
           color:#666;
           padding-right:10px;

       }
       .list li .img img{width: 50px; height: 50px;}
       .list li{border-bottom: 1px solid #B6B6B6; overflow: hidden; padding: 5px 0;}
       /*滚动条*/
       .scrollbar {
           position: absolute;
           top: 0px;
           right: 0px;
           bottom: 0px;
           width: 2px;
           background: #000000;
       }
       .scrollbar .handle {
           width: 100%;
           height: 100px;
           background: #40AA53;/*拖动条*/
           cursor: pointer;
       }
       .scrollbar .handle .mousearea {
           position: absolute;
           top: 0;
           left: -5px;
           width: 12px;
           height: 100%;
       }
       /*顶部消息提示框*/
        .topTips{
            z-index : 999;
            overflow : hidden;
            height : 0px;
            font-size: 12px;
            line-height: 0px;
            position : absolute;
            width: 100%;
            background: #F5F5F5 url("http://git.oschina.net/assets/logo-white.png") no-repeat right 40px bottom -8px;
            background-size: 30px;
            top:0px;
            left:0px;
            box-shadow: 0px 0px 3px rgba(0,0,0,0.2) inset;
            text-align: center;
            display : none;
        }
    </style>
</head>
<body>
  <div id="content">
      <!--顶部提示-->

      <div class="topTips" id="topTips">
          松开就加载
      </div>
      <!--列表-->

      <div id="list" οnmοusedοwn="handler1(event)" class="list">
          <ul>
              <li>
                  <div class="img">
                      <a target="_blank" href="http://my.oschina.net/u/874335">
                          <img alt="拜仁慕尼黑" src="http://static.oschina.net/uploads/user/437/874335_50.jpg?t=1385694353000">
                      </a>
                  </div>
                  <div class="show">
                      啦啦啦啦啦啦.......
                      <a class="more" target="_blank" href="http://my.oschina.net/u/874335/tweet/3056233">>>>></a>
                  </div>
              </li>
              <li>
                  <div class="img">
                      <a target="_blank" href="http://my.oschina.net/u/1424783">
                          <img alt="宏哥" src="http://static.oschina.net/uploads/user/48/96003_50.jpg?t=1368158428000">
                      </a>
                  </div>
                  <div class="show">
                      费了老子一下午的时间，不过搞定了，又重新整理了一下知识....
                      <a class="more" target="_blank" href="http://my.oschina.net/u/1424783/tweet/3056244">>>>></a>
                  </div>
              </li>
              <li>
                  <div class="img">
                      <a target="_blank" href="http://my.oschina.net/u/947559">
                          <img alt="丫头潘潘" src="http://static.oschina.net/uploads/user/473/947559_50.jpg?t=1372838864000">
                      </a>
                  </div>
                  <div class="show">
                      <a rel="nofollow" target="_blank" href="http://my.oschina.net/u/130291">
                          @蟋蟀哥哥//敢不敢这么nb.....：）!
                      </a>
                      <a class="more" target="_blank" href="http://my.oschina.net/u/947559/tweet/3056236">>>>></a>
                  </div>
              </li>
          </ul>
      </div>
      <div class="scrollbar">
          <!--拖动控制-->
          <div class="handle">
              <!---->
              <div class="mousearea"></div>
          </div>
      </div>
  </div>
  <script>
      //滚动条的事件
      //
      var posx= 0,posy=0;//mousedown时pageX pageY
      var absx= 0,absy=0;//元素相对页面的位置
      var target=document.getElementById("list");
      var topTips=document.getElementById("topTips");
      var isOver=false;//控制提示状态的
      var handler2=function(event){
          console.log("mousemove");
          var mouseY=event.pageY;
          //top=mouseY-2*posy+absy
          if(mouseY-posy>5&&!isOver){
              topTips.style.display="block";
              topTips.style.height=(mouseY-posy)+"px";
          }
          target.style.top=(mouseY-posy+absx)+"px";
      };
      /***获取当前元素相对于页面的位置***/
      function getX(obj){
          var parObj=obj;
          var left=obj.offsetLeft;
          while(parObj=parObj.offsetParent){
              left+=parObj.offsetLeft;
          }
          return left;
      }
      function getY(obj){
          var parObj=obj;
          var top=obj.offsetTop;
          while(parObj = parObj.offsetParent){
              top+=parObj.offsetTop;
          }
          return top;
      }
      document.addEventListener("mouseup",handler1);
      function handler1(e){
          var target1=e.target? e.target: e.srcElement;
          console.log(target.id);
          switch(e.type){
              case "mousedown":
                  if(target1.id="list"){
                      isOver=false;
                      posx= e.pageX;
                      posy= e.pageY;
                      absx=getX(target);
                      absy=getY(target);
                      console.log("movedown");
                      target.addEventListener("mousemove",handler2);
                  }
                  break;
              case "mouseup": //在div上松开触发
                  console.log("mouseup");
                  //tt.destroy();
                  posx= 0;
                  posy= 0;
                  target.style.top="0px";
                  topTips.style.display="none";
                  topTips.style.height="0px";
                  isOver=true;
                  target.removeEventListener("mousemove",handler2);
                  console.log("removed");
                  break;
          }

      }
  </script>



  <script>
      /**
       * event的属性：
       * IE:
       * screenX,screenY
       * clientX,clientY 相对于可视区域的位置
       * offestX,offestY 相对引起事件的对象
       * x,y  相对引起事件的对象的父元素
       * DOM:
       * screenX,screenY
       * clientX,clientY 相对于可视区域的位置，滚动时相对于可视区域的位置是变化的，但是相对于页面的位置不会发生改变。
       * pageX,pageY  相对于页面的位置
       *
       * //IE中不支持：pageX pageY
       * IE中的pageX计算
       * PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
       * 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度。
       * jquery中pageX和pageY
       * if(event.pageX==null){
       *     event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
       *     event.pageY = event.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
       * }
       *
       * 元素的位置属性：
       *
       *
       */
      function handler(e){
          var target=e.target? e.target: e.srcElement,
              posx= e.pageX,//鼠标在客户端的位置
              posy= e.pageY;
          console.log(target.id+ e.button);
          if(e&&target.id=="sc"&&e.button==0){
              //alert("aa");
              var parent=document.getElementById("content");
              //target.style.top=(posx-target.pageX)+"px";
              //元素对象:

              //offest：自身元素的属性
              //offsetLeft  距离上方或上层控件的位置,整型，单位像素
              //offsetTop   距离左方或上层控件的位置,整型，单位像素
              //offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
              //offsetHeight 指 obj 控件自身的高度，整型，单位像素。
              /**
               * offset与style.left,top,height,width的区别
               *1 offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
                2 offsetTop 只读，而 style.top 可读写。
                3 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串
               四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同
               */

              //（元素可视区域的的高度)
              //clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关

              // offsetHeight
              //IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
              //NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

              //scrollHeight
              //IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
              //NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
              //clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可
              console.log(posx+"--"+posy+"||"
                      +target.offsetTop+"--"
                      +target.offsetLeft+"||"
                      +target.offsetWidth
                      +"--"+target.offsetHeight
                      +"||"+target.clientHeight  //可视区域的高度
                      +"||"+target.scrollHeight //实际的高度
                      +"||"+target.scrollTop   //卷起的高度,不同的浏览器默认值不一样
                      +"||"+target.scrollWidth+"--"+target.scrollHeight  //滚动条的高度和宽度和offestWidth..相同，不同的浏览器不一样
                      +"");
          }
      }

      /**
       * javaScript (ECMAScript262规范)
       * ECMAScript262规范:javaScript语法和内置对象，实现引擎的一些约定。
       *    javaScript（Netscape的一种实现）
       * 面向对象的解释性弱类型的编程语言。
       * 开发环境：
       *  js引擎,用于预编译（相对的）和解析代码并执行程序的引擎。
       *  需要宿主，常用的浏览器都预装了js引擎，用于解释执行jsCode。
       *
       *
       */




  </script>
</body>

</html>