前端学习从入门到高级全程记录之27（webapi）

最新推荐文章于 2022-02-26 21:23:14 发布
最新推荐文章于 2022-02-26 21:23:14 发布
阅读量159 收藏 1
点赞数
分类专栏： JavaScript基础 webapi 前端 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangbobo1997/article/details/104926706
版权
前端 同时被 3 个专栏收录
31 篇文章 0 订阅
订阅专栏
JavaScript基础
15 篇文章 0 订阅
订阅专栏
webapi
6 篇文章 0 订阅
订阅专栏

学习目标

本期接上期继续学习webapi。其中所用js封装好的代码common.js：

//根据id获取对应的元素
function my$(id) {
    return document.getElementById(id);
}
/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element,attr) {
    return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}

/*
* element----要移动的元素
* target----移动的目标
* 初级版本
* */
/*
* 终极版本的动画函数---有bug
*
* */
function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//假设都达到了目标
        for(var attr in json){
            if(attr=="opacity"){//判断属性是不是opacity
                var current= getAttrValue(element,attr)*100;
                //每次移动多少步
                var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){//判断属性是不是zIndex
                element.style[attr]=json[attr];
            }else{//普通的属性

                //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
                var current= parseInt(getAttrValue(element,attr))||0;
                //每次移动多少步
                var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
                var step=(target-current)/10;//(目标-当前)/10
                step=step>0?Math.ceil(step):Math.floor(step);
                current=current+step;
                element.style[attr]=current+"px";
            }
            if(current!=target){
                flag=false;//如果没到目标结果就为false
            }
        }
        if(flag){//结果为true
            clearInterval(element.timeId);
            if(fn){//如果用户传入了回调的函数
                fn(); //就直接的调用,
            }
        }
        console.log("target:"+target+"current:"+current+"step:"+step);
    },10);
}

1.offset系列的属性

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#dv1{
			width: 300px;
			height: 300px;
			background-color: green;
			position: absolute;
		}
		#dv2{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		input{
			top:350px;
			position: absolute;

		}
	</style>
</head>
<body>
<div id="dv1">
	<div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn">
<script src="common.js"></script>
<script>
	//获取元素的宽和高，应该使用offset系列来获取
	/*
	* offsetWidth：获取宽
	* offsetHight：获取高
	* offsetLeft:获取左边距离
	*   如果子元素没有脱离文档流，offsetLeft：父级元素margin+父级元素padding+父级元素的border+自己的margin
	*   如果脱离文档流，则主要是自己的left和自己的margin。
	* */
	my$("btn").onclick=function () {
		console.log(my$("dv2").offsetLeft);
	};
</script>
</body>
</html>

那么像一些其他top等类似值也是如出一辙。

2.直接通过document获取元素

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script>
	//获取body
	console.log(document.body);//获取的是元素-->标签
	//获取title
	console.log(document.title);//获取标签的值
	//获取html
	console.log(document.documentElement);
	//修改title的值
	document.title="hahha";
</script>
</body>
</html>

3.图片跟着鼠标飞

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			position: absolute;
		}
	</style>
</head>
<body>
<img src="images/bird.png" alt="" id="im">
<script src="common.js"></script>
<script>
	//鼠标在页面中移动，图片跟着鼠标移动
	document.onmousemove=function (e) {
		//鼠标的移动的横纵坐标
		//可视区域的横坐标
		//可视区域的纵坐标
		my$("im").style.left=e.clientX+"px";
		my$("im").style.top=e.clientY+"px";
	}
</script>
</body>
</html>

所需图片：
在这里插入图片描述

4.scroll系列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 300px;
      height: 200px;
      border: 2px solid red;
      overflow: auto;
    }
    input{
      left: 330px;
      position: absolute;
      top:20px;

    }
  </style>
</head>
<body>
<div id="dv">
  王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>

//  my$("btn").onclick=function () {
//    console.log(my$("dv").offsetWidth);
//    console.log(my$("dv").offsetHeight);
//  };

  /*
  * 元素的样式属性是无法直接通过:对象.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);
  };

</script>

</body>
</html>

5.封装getscroll

所需图片：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<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() {
	//    var obj={};
	//    var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
	//    var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
	//    obj.left=left;
	//    obj.top=top1;
	//    return obj;
	//
	//  }复杂，向下简化

	//  function getScroll() {
	//    var obj={};
	//    obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
	//    obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
	//    return obj;
	//
	//  }还是复杂，再向下简化


	//  function getScroll() {
	//    var obj = {
	//      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
	//      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
	//  };
	//    return obj;
	//
	//  }继续简化
//	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 () {
	//console.log(getScroll().top);
	//  };

	//向上卷曲出去的距离

</script>

</body>
</html>

6.案例固定导航栏

图片还是上面的。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <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";
    }
  };
</script>

</body>
</html>

7.变速函数动画封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<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 () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    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);
    }
  </script>
</div>
</body>
</html>

8.筋斗云案例

所需图片：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<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);
	}
</script>
</body>
</html>

效果图：
在这里插入图片描述

7.获取元素计算后的样式属性值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 200px;
			height: 100px;
			background-color: purple;
			left:100px;
			top:0;
		}
	</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
	//  my$("btn").onclick=function () {
	//    //获取元素距离左边位置的值
	//    //console.log(my$("dv").offsetLeft);
	//
	//    //谷歌,火狐支持
	//    //console.log(window.getComputedStyle(my$("dv"),null).left);
	//
	//    //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];
	//    }
	//  }不够简洁，我们前几期说过，if判断语句可以简化↓
	//


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


	my$("btn").onclick=function () {
		console.log(getStyle(my$("dv"),"top"));
	};



</script>
</body>
</html>

8.变速动画函数封装增加任意一个属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<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"),"width",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);
    }
  </script>
</div>
</body>
</html>

9.变速动画函数封装增加任意多个属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			margin-top: 30px;
			width: 200px;
			height: 100px;
			background-color: green;
			position: absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</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) {
		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);
	}



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

		animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80});
	};

</script>
</body>
</html>

10.变速动画函数封装增加任意多个属性和回调函数

当一个函数作为参数使用时，它就是回调函数。当所有的属性全部到达目标时才能使用这个函数（前提是用户传入了这个函数）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			margin-top: 30px;
			width: 200px;
			height: 100px;
			background-color: green;
			position: absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<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);
			});
		});
	};

</script>
</body>
</html>

此代码会执行三次动画效果。

11.动画函数增加透明度和层级

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div {

			width: 200px;
			height: 100px;
			background-color: green;
			position: absolute;
			left: 0;
			top: 0;
		}

		input {
			z-index: 10;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</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);
	}


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

</script>
</body>
</html>

12.手风琴案例

所需图片：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <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});//动画效果
    }
  }


</script>

</body>
</html>

13.开机动画

所需图片;
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <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>
</body>
</html>

14.旋转木马

所需图片：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
html文件：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/css(1).css"/>
  <script src="common.js"></script>
  <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;//===动画结束，定时器清理完毕，改变flag的值
          });
        }
      }
      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><!--href中一般写的是地址或者锚定，这样写表示不跳转。-->
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>

</body>
</html>

CSS文件：

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

总结

本期学习到此结束，下期继续学习webapi。

灬银瓶丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebApi入门到精通-WebApi列表
03-30
【WebApi入门到精通-WebApi列表】 在IT行业中，Web API是构建RESTful服务的重要工具，特别是对于那些需要提供HTTP服务的后端开发者来说。本教程“WebApi入门到精通-WebApi列表”旨在帮助初学者理解并掌握ASP.NET ...
前端学习从入门到高级全程记录之25（webapi）
zhangbobo1997的博客
02-17 204
学习目标 本期继续学习webapi，做一些项目、案例。 1.百度大项目 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: ...
JavaScript----操作元素,操作样式
你的小甜甜的博客
12-15 255
操作元素: 上一篇我们学习了如何获取页面的元素和如何注册事件,今天我们来学习一下后续----如何改变元素中的内容 JS中的DOM操作主要可以改变网页的内容、结构(标签)、样式。可以使用DOM操作元素来改变元素里面的内容、属性等，同样这些操作针对于DOM而言也是通过操作对象的属性来实现的 1.对于文本框来说,文本内容属于value的值 HTML: <input type="text" value="请输入一个内容" id="txt"> JavaScript: <-- 获取元素后,为元素添加
Web前端——Javascript学习（API）
zxy9602的博客
04-24 1157
1、API：应用程序编程接口 这是实现的，现成的对象和方法。——提高开发效率 2、数组API （1）arr to String var str=arr.toString() var str=arr.join("连接符")——自定义连接符 固定套路——1.将字符拼接为单词：arr.join("")     2.将单词拼接成句子：arr.join(" ") 问题——频繁字符串拼
前端之路（WebApi篇）
Halin's CSDN
01-20 1万+
什么是Api? 什么是WebApi?  API（Application Programming Interface,应用程序编程接口）, 通俗的讲，API就是编程语言给我提供的一些工具，通过这些工具，我们可以非常轻易的完成一些功能。 Web API : 是浏览器提供的 一套操作网页(web)的方法(API), 通过这套API我们可以非常轻松的操作页面的元素和浏览器的一些功能 ECMAScr...
前端入门系列--webAPI(1)
Wong_ga_sum的博客
03-26 230
在学习web API之前先了解什么是API： API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可； 然后引入web API的概念： Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API...
WebApi基础入门学习项目，新手入门学习实践，工程源码
08-14
本项目是一个针对初学者的WebApi基础入门学习项目，旨在帮助开发者熟悉WebApi的核心概念和技术，并通过实际操作来提升技能。 首先，项目中使用了Log4，这是一个广泛使用的日志记录库。Log4在.NET Core WebApi中的...
资料-Web前端入门教程资料下载地址.txt
03-30
|- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 ...
Web前端入门：从零开始做网站.txt打包整理.zip
03-05
描述部分简洁明了，"Web前端入门：从零开始做网站.txt打包整理.zip"与标题一致，表明这是一个关于Web前端学习的资料合集，以文本格式（.txt）进行整理，方便阅读和学习。.zip文件意味着这是一份压缩包，包含多个相关...
webAPI 第一天
WjiaoJ的学习
03-21 307
js基础已经了解结束,我们开始学习webapi 一.webpi 了解 web : 网页 api :预先定义的方法,帮我们实现某种特定的功能 特征:输入(参数) 输出(返回值) webapi就是浏览器提供给我们用来操作页面的方法 js的组成: 1. ECMAScript : js基础课 ,js高级 , js的标准规范,规范了js的基本语法数据类型 ...
前端webapi基础小结
xzd2333的博客
02-26 731
webapi是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) JavaScript组成三个部分 ECMAScript - JavaScript的核心 DOM - 文档对象模型 BOM - 浏览器对象模型 3.Dom语法 1.查询元素 1.1docunment.querySelector(‘选择器’） 如果选择器存在，则获取dom对象，不存在则获取null 对象可以直接用dom语法修改 2.1docunment.querySelectorAll(‘选择器’） 如果选择
前端开发需要学习什么？
热门推荐
分针网
07-14 4万+
对于0基础想进入这一行的朋友们来说，肯定会有很多的疑惑，前端到底要学些什么内容？学习前端到底难不难？前端又是具体做些什么的？等等问题。今天我们就来详细说说什么是前端。 到底什么叫前端？   Web 前端开发是从网页制作演变而来的，互联网的演变进程，网站的前端也由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了
WebAPI基础
进击的程序猿
04-20 1073
WebAPI学习 查找对象的方式 //document.getElementById()：通过id //document.getElementsByTagName("标签名"):通过标签名 返回一个伪数组，无论有几个元素，返回都是伪数组 //document.getElementsByClassName("类名") 返回值：伪数组 //document.getElementsByName():通过...
前端学习从入门到高级全程记录之13 （京东项目一）
zhangbobo1997的博客
11-20 1万+
学习目的 本期将会学习一个京东项目，综合知识非常多。
前端学习从入门到高级全程记录之4 （CSS基础知识）
zhangbobo1997的博客
07-31 722
本次学习目标 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media ☆本次学习我们继续学习CSS的基础...
前端学习从入门到高级全程记录之8 （PS基本使用&综合案例）
zhangbobo1997的博客
08-29 578
本期学习目标 本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例。 1.Photoshop基本使用 早在第一期我就让大家去安装PS，不知道安装了没有，没有安装的尽快安装，百度有很多免费资源。之所以学习PS，是因为前端需要用到PS上的功能，例如切图，量尺寸等。 PS界面组成 菜单栏、选项栏、工具栏、浮动面板（拖曳名称，可单独操作面板）、绘图窗口 窗口菜单，可显示隐...
前端学习从入门到高级全程记录之16（CSS高级技巧）
zhangbobo1997的博客
12-02 559
本期目标 本期我们继续学习一些CSS的高级技巧。 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具，可以分析你写的代码到底好不好，哪里出错。 网址是： http://www.cssstats.com/ 如果你想要更全面的，这个神奇，你值得拥有： W3C 统一验证工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆ 因...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
zhangbobo1997的博客
11-02 558
5.字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，就是字体图标（iconfont）。 字体图标优点 可以做出跟图片一样可以做的事情，改变透明度...
Web前端与移动开发基础视频教程：从入门到精通
这套视频教程详细讲解了前端开发的入门知识，首先从大前端开发和全栈开发的定义入手，引导学习者理解前端开发的角色和重要性。接着，通过介绍和演示操作系统常用设置、快捷键操作以及Sublime3、Atom和WebStorm等开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值