JavaScript学习记录十二

其他 2018-10-08 22:10:03 阅读次数: 0

scroll系列

  * 元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)
  * offset系列:
  * offsetLeft:距离左边位置的值
  * offsetTop:距离上面位置的值
  * offsetWidth:元素的宽(有边框)
  * offsetHeight:元素的高(有边框)
  *
  * scroll系列:卷曲---滚出去
  *
  * scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
  * scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高

  my$("btn").onclick=function () {
  console.log(my$("dv").offsetWidth);//元素的宽,有边框
  console.log(my$("dv").offsetHeight);//元素的高,有边框

  console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
  console.log(my$("dv").scrollHeight);//元素中内容的实际的高
  console.log(my$("dv").scrollTop);//向上卷曲出去的距离
  console.log(my$("dv").scrollLeft);//向左卷曲出去的距离

  //div的滚动事件
  my$("dv").onscroll=function () {
    console.log(this.scrollTop);
  };

案例：变速动画函数封装

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style.left = current + "px";
        if(current==target) {
          //清理定时器
          clearInterval(element.timeId);
        }
        //测试代码:
        console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
      }, 20);
    }

案例：获取任意元素的属性值

    //谷歌,火狐支持

    //console.log(window.getComputedStyle(my$("dv"),null).left);

    //IE8支持
    //console.log(my$("dv").currentStyle.left);

  function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
    if(window.getComputedStyle){
      return window.getComputedStyle(element,null)[attr];
    }else{
      return element.currentStyle[attr];
    }
  }

  function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
   return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
  }

案例：为元素添加属性

<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
  <script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      //获取div此时left的当前位置,达到目标400
     // animate(my$("dv"),"left",400);
      //获取div此时的宽度,达到目标200
      animate(my$("dv"),"height",400);
    };

    //获取任意的一个属性的当前的属性值: left--->此时的left属性的值,width---当前的元素的宽
    function getStyle(element,attr) {
      //判断浏览器是否支持这个方法
      return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }
    //匀速动画

    //element---元素
    //attr---属性名字
    //target---目标位置
    function animate(element,attr ,target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = parseInt(getStyle(element,attr));//数字类型//===============================
        //移动的步数
        var step = (target-current)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        current += step;
        element.style[attr] = current + "px";//============================================
        if(current==target) {
          //清理定时器
          clearInterval(element.timeId);
        }
        //测试代码:
        console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
      }, 20);

案例：通过json设置多个属性

     *注：这里和java不是一样的，如：4/5=0.8，所以可以进行向上向下取整。

  function animate(element,json) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//默认,假设,全部到达目标
      for(var attr in json){
        //获取元素这个属性的当前的值
        var current=parseInt(getStyle(element,attr));
        //当前的属性对应的目标值
        var target=json[attr];
        //移动的步数
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;//移动后的值
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        //清理定时器
        clearInterval(element.timeId);
      }

      //测试代码
      console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
  }

案例：通过回调函数，实现多步的动画。

<script>
  //点击按钮,改变宽度到达一个目标值,高度到达一个目标值

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }



  //element---元素
  //json---对象---多个属性及多个目标值
  //fn---函数
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//默认,假设,全部到达目标
      for(var attr in json){
        //获取元素这个属性的当前的值
        var current=parseInt(getStyle(element,attr));
        //当前的属性对应的目标值
        var target=json[attr];
        //移动的步数
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;//移动后的值
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if(fn){
          fn();
        }
      }


      //测试代码
      console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
  }



  my$("btn1").onclick=function () {

    var json1={"width":400,"height":500,"left":500,"top":80};
      animate(my$("dv"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(my$("dv"),json2,function () {
          var json3={"width":450,"height":550,"left":550,"top":600};
          animate(my$("dv"),json3);
        });
      });
  };

案例：透明度和堆叠顺序的复习

  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }


  //zIndex:1000
  //透明度: 数字类型----小数---放大100倍
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };

数组常用方法

    var arr=[10,20,30,40,50];

//     把第一个元素的值删除,追加到数组的最后
//    arr.push(arr.shift());       →[20,30,40,50,10]

//     把最后一个元素删除，追加到数组的头部。这样开销应给不小。

//    arr.unshift(arr.pop());

属性获取总结

    * offset系列:获取元素的宽,高,left,top, offsetParent
    * offsetWidth:元素的宽,有边框
    * offsetHeight:元素的高,有边框
    * offsetLeft:元素距离左边位置的值
    * offsetTop:元素距离上面位置的值
    *
    * scroll系列:卷曲出去的值
    * scrollLeft:向左卷曲出去的距离
    * scrollTop:向上卷曲出去的距离
    * scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
    * scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
    *
    *
    * client系列:可视区域
    * clientWidth:可视区域的宽(没有边框),边框内部的宽度
    * clientHeight:可视区域的高(没有边框),边框内部的高度
    * clientLeft:左边边框的宽度
    *clientTop :上面的边框的宽度

案例：鼠标移动事件的兼容解决

  //文档的鼠标移动事件
  //对象   事件   事件处理函数,事件触发了,函数的代码就会执行,执行的时候,函数调用的时候
  //通过arguments.length，可以得出:事件处理函数中实际上是有一个参数的,这个参数和事件有关系,是一个对象----->事件参数对象

  //谷歌和火狐中都有这个事件参数对象,IE8中没有
  //事件参数对象:e----在IE8中用window.event来代替

  document.onmousemove = function (e) {
	if(e){
		//相对于页面顶部的坐标
		my$("im").style.left = e.pageX + "px";
		my$("im").style.top = e.pageY + "px";
		//pageX和pageY在谷歌和火狐可以使用,IE8不能用
	}else{
	    my$("im").style.left = window.event.pageX + "px";
	    my$("im").style.top = window.event.pageY + "px";
	}
  };

案例：固定菜单栏

  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      vertical-align: top;
    }

    .main {
      margin: 0 auto;
      width: 1000px;
      margin-top: 10px;

    }

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
<div class="top" id="topPart">
  <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
  <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
  <img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>


  //获取页面向上或者向左卷曲出去的距离的值
  function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
  }

  //滚动事件
  window.onscroll=function () {
    //向上卷曲出去的距离和最上面的div的高度对比
    if(getScroll().top>=my$("topPart").offsetHeight){
      //设置第二个div的类样式
     my$("navBar").className="nav fixed";
      //设置第三个div的marginTop的值
      my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
    }else{
      my$("navBar").className="nav";
      my$("mainPart").style.marginTop="10px";
    }
  };

案例：导航选中筋斗云

  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    body {
      background-color: #333;
    }

    .nav {
      width: 800px;
      height: 42px;
      margin: 100px auto;
      background: url(images/rss.png) right center no-repeat;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
    }

    .nav li {
      width: 83px;
      height: 42px;
      text-align: center;
      line-height: 42px;
      float: left;
      cursor: pointer;
    }

    .nav span {
      position: absolute;
      top: 0;
      left: 0;
      width: 83px;
      height: 42px;
      background: url(images/cloud.gif) no-repeat;
    }

    ul {
      position: relative;
    }
  </style>
</head>
<body>
<div class="nav">
  <span id="cloud"></span>
  <ul id="navBar">
    <li>北京校区</li>
    <li>上海校区</li>
    <li>广州校区</li>
    <li>深圳校区</li>
    <li>武汉校区</li>
    <li>关于我们</li>
    <li>联系我们</li>
    <li>招贤纳士</li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  //匀速动画
  function animate(element, target) {
    //清理定时器
    clearInterval(element.timeId);
    element.timeId = setInterval(function () {
      //获取元素的当前位置
      var current = element.offsetLeft;
      //移动的步数
      var step = (target - current) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      current += step;
      element.style.left = current + "px";
      if (current == target) {
        //清理定时器
        clearInterval(element.timeId);
      }
      //测试代码:
      console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
    }, 20);
  }


  //获取云彩
  var cloud = my$("cloud");
  //获取所有的li标签
  var list = my$("navBar").children;
  //循环遍历分别注册鼠标进入,鼠标离开,点击事件
  for (var i = 0; i < list.length; i++) {
    //鼠标进入事件
    list[i].onmouseover = mouseoverHandle;
    //点击事件
    list[i].onclick = clickHandle;
    //鼠标离开事件
    list[i].onmouseout = mouseoutHandle;
  }
  function mouseoverHandle() {//进入
    //移动到鼠标此次进入的li的位置
    animate(cloud, this.offsetLeft);
  }
  //点击的时候,记录此次点击的位置
  var lastPosition = 0;
  function clickHandle() {//点击
    lastPosition = this.offsetLeft;
  }
  function mouseoutHandle() {//离开
    animate(cloud, lastPosition);
  }

案例：手风琴效果

  <style>

    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }


  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }
  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }

  //先获取所有的li标签
  var list = my$("box").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
    //鼠标进入
    list[i].onmouseover = mouseoverHandle;
    //鼠标离开
    list[i].onmouseout = mouseoutHandle;
  }
  //进入
  function mouseoverHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 100});//动画效果
    }
    animate(this, {"width": 800});
  }
  //离开
  function mouseoutHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 240});//动画效果
    }
  }

案例：开机动画

  <style>
    .box {
      width: 322px;
      position: fixed;
      bottom: 0;
      right: 0;
      overflow: hidden;
    }

    span {
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <span id="closeButton"></span>
  <div class="hd" id="headPart">
    <img src="images/t.jpg" alt=""/>
  </div>
  <div class="bd" id="bottomPart">
    <img src="images/b.jpg" alt=""/>
  </div>
</div>
<script src="common.js"></script>
<script>

  my$("closeButton").onclick=function () {
    //设置最下面的div的高渐渐的变成0
    animate(my$("bottomPart"),{"height":0},function () {
      animate(my$("box"),{"width":0});
    });
  };

案例：旋转木马

  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];

    //页面加载的事件
    window.onload = function () {
      var flag=true;//假设所有的动画执行完毕了---锁====================================================
      var list = my$("slide").getElementsByTagName("li");
      //1---图片散开
      function assign() {
        for (var i = 0; i < list.length; i++) {
          //设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
          animate(list[i], config[i],function () {
            flag=true;//===============================================
          });
        }
      }
      assign();
      //右边按钮
      my$("arrRight").onclick = function () {
        if(flag){//==========================================================
          flag=false;
          config.push(config.shift());
          assign();//重新分配
        }

      };
      //左边按钮
      my$("arrLeft").onclick = function () {
        if(flag){//==================================================
          flag=false;
          config.unshift(config.pop());
          assign();
        }

      };
      //鼠标进入,左右焦点的div显示
      my$("slide").onmouseover = function () {
        animate(my$("arrow"), {"opacity": 1});
      };
      //鼠标离开,左右焦点的div隐藏
      my$("slide").onmouseout = function () {
        animate(my$("arrow"), {"opacity": 0});
      };
    };
  </script>

</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>

猜你喜欢

转载自blog.csdn.net/qq_34117624/article/details/82737232
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022