DOM学习第五天

最新推荐文章于 2024-09-25 21:00:00 发布

qq_28935057

最新推荐文章于 2024-09-25 21:00:00 发布

阅读量185

点赞数

分类专栏：前端学习

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM学习_第五天

回顾上节内容

为元素绑定事件的三种方式：

对象.on事件类型=事件处理函数;
//IE8不支持
对象.addEventListener(“没有on的事件类型”,事件处理函数,false);
3.谷歌和火狐不支持
对象.attachEvent(“有on的事件类型”,事件处理函数);

为元素解绑事件的三种方式:

对象.on事件类型=null;
对象.removeEventListener(“没有on的事件类型”,事件处理函数名字,false);
对象.detachEvent(“有on的事件类型”,事件处理函数);

事件冒泡:元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套
阻止事件冒泡:
e—事件参数对象,谷歌和火狐都支持,IE8不支持：e.stopPropagation();
IE8和谷歌支持：window.event.cancelBubble=true;
window.event就是事件参数对象—-e是一样的
BOM:Browser Object Model 浏览器对象模型—操作浏览器
历史记录的后退和前进 history: back()后退 forward()前进
地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的
* 获取系统和浏览器的信息的* navigator userAgent属性—获取系统,浏览器的信息

 地址栏上#及后面的内容
 console.log(window.location.hash);
 主机名及端口号
 console.log(window.location.host);
 主机名
 console.log(window.location.hostname);
 文件的路径---相对路径
 console.log(window.location.pathname);
 端口号
 console.log(window.location.port);
 协议
 console.log(window.location.protocol);
 搜索的内容
 console.log(window.location.search);

定时器:
该定时器会返回自己的id值
var timeId=window.setInterval(函数,时间);
执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器
清理定时器
window.clearInterval(定时器的id值);

今日主要内容
1. 另一个定时器
2. 封装动画函数———-匀速的动画函数,过渡到=======>缓动的动画函数
3. 简单的轮播图 ——— 左右焦点的轮播图 ——— 无缝连接的轮播图 ——— 轮播图
4. 三大系列中的第一个系列:offset系列
5. 封装缓动动画函数
6. 筋斗云,固定导航栏
7. 手风琴、旋转木马

01_一次性的定时

<head>
<script>
//页面加载后
window.onload=function () {
  //一次性的定时器
  var timeId=window.setTimeout(function () {
alert("您好");
  },1000);

  //点击这个按钮,停止这个一次性的定时器
  document.getElementById("btn").onclick=function () {
clearTimeout(timeId);
  };
};
</script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
</body>

02_协议按钮禁用

<body>
<textarea name="texta" id="" cols="30" rows="10">
  这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>
  var time=5;
 var timeId= setInterval(function () {
time--;
   my$("btn").value="请仔细阅读协议("+time+")";
if(time<=0){
  //停止定时器就可以
  clearInterval(timeId);
  //按钮可以被点击了
  my$("btn").disabled=false;
  my$("btn").value="同意";
}
  },1000);
</script>
</body>

03_div渐变

     <style>
div{
  width: 300px;
  height: 200px;
  background-color: hotpink;
}
  </style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {

var opacity=10;
//按钮的点击事件
var timeId=setInterval(function () {
  //透明化了
  opacity--;
  if(opacity<=0){
clearInterval(timeId);//清理定时器
  }
  //设置div的透明度
  my$("dv").style.opacity=opacity/10;
},200);
  };
</script>
</body>

04_设置div的宽度

    <style>
* {
  margin: 0;
  padding: 0;
}
div {
  width: 200px;
  height: 150px;
  background-color: red;
  border-radius: 100px;
}
  </style>
</head>
<body>
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
var width = 200;
var timeId = setInterval(function () {
  width+=10;
  if(width==800){
clearInterval(timeId);
  }
  my$("dv").style.width=width+"px";
}, 20);
  };
</script>
</body>

05_移动元素

    <style>
* {
  margin: 0;
  padding: 0;
}
input {
  margin-top: 20px;
}
div {
  margin-top: 30px;
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
}
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);
  //点击第一个按钮移动到400px
  my$("btn1").onclick = function () {
//一会要清理定时器(只产生一个定时器)
   var timeId= setInterval(function () {
  //获取div的当前的位置
  var current = my$("dv").offsetLeft;//数字类型,没有px
  //div每次移动多少像素---步数
  var step = 9;
  //每次移动后的距离
  current += step;
 //判断当前移动后的位置是否到达目标位置
  if(current<=400){
my$("dv").style.left=current+"px";
  }else{
//清理定时器
clearInterval(timeId);
  }
}, 20);
  };
  //点击第二个按钮移动到800px
  my$("btn2").onclick = function () {
//一会要清理定时器(只产生一个定时器)
var timeId= setInterval(function () {
  //获取div的当前的位置
  var current = my$("dv").offsetLeft;//数字类型,没有px
  //div每次移动多少像素---步数
  var step = 10;
  //每次移动后的距离
  current += step;
  //判断当前移动后的位置是否到达目标位置
  if(current<=800){
my$("dv").style.left=current+"px";
  }else{
//清理定时器
clearInterval(timeId);
  }
}, 20);
  };
</script>
</body>

06_封装动画函数

    <style>
* {
  margin: 0;
  padding: 0;
}
input {
  margin-top: 20px;
}
div {
  margin-top: 30px;
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;
}
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);
  //点击第一个按钮移动到400px
  my$("btn1").onclick = function () {
animate(my$("dv"), 400);
  };
  //点击第二个按钮移动到800px
  my$("btn2").onclick = function () {
animate(my$("dv"), 800);
  };
  //动画函数---任意一个元素移动到指定的目标位置
  function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器(只产生一个定时器)
element.timeId = setInterval(function () {
  //获取div的当前的位置
  var current = element.offsetLeft;//数字类型,没有px
  //div每次移动多少像素---步数
  var step = 10;
  step = current < target ? step : -step;
  //每次移动后的距离
  current += step;
  //判断当前移动后的位置是否到达目标位置
  if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
  } else {
//清理定时器
clearInterval( element.timeId );
element.style.left = target + "px";
  }
}, 20);
  }
</script>
</body>

07_封装动画函数终极版

    <style>
div{
  width: 200px;
  height: 200px;
  background-color: red;
  /*脱离文档流*/
  position: absolute;
}
  </style>
  <script>

//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
  clearInterval(element.timeId);
  //定时器的id值存储到对象的一个属性中
  element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
  element.style.left = current + "px";
} else {
  //清理定时器
  clearInterval(element.timeId);
  //直接到达目标
  element.style.left = target + "px";
}
  }, 20);
}
  </script>
</head>

08_最简单的轮播图修改index赋值方式

  <style>
* {
  margin: 0;
  padding: 0
}
ul {
  list-style: none
}
img {
  vertical-align: top
}
.box {
  width: 730px;
  height: 454px;
  margin: 100px auto;
  padding: 5px;
  border: 1px solid #ccc;
}
.inner {
  width: 730px;
  height: 454px;
  background-color: pink;
  overflow: hidden;
  position: relative;
}
.inner ul {
  width: 1000%;
  position: absolute;
  top: 0;
  left: 0;
}
.inner li {
  float: left;
}
.square {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.square span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
}
.square span.current {
  background-color: orangered;
  color: #fff;
}
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner"><!--相框-->
<ul>
  <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
  <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
</ul>
<div class="square">
  <span class="current">1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box=my$("box");
  //获取相框
  var inner=box.children[0];
  //获取相框的宽度
  var imgWidth=inner.offsetWidth;
  //获取ul
  var ulObj=inner.children[0];
  //获取所有的span标签
  var spanObjs=inner.children[1].children;
  //循环遍历所有的span标签,注册鼠标进入的事件
  for(var i=0;i<spanObjs.length;i++){
//循环的时候把索引值保存在每个span的自定义属性中
spanObjs[i].setAttribute("index",i);
//注册鼠标进入事件
spanObjs[i].onmouseover=function () {
  //先干掉所有的span的背景颜色
  for(var j=0;j<spanObjs.length;j++){
//移除了每个span的类样式
spanObjs[j].removeAttribute("class");
  }
  //设置当前的span的背景颜色
  this.className="current";
  //移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
  //获取当前鼠标进入的span的索引
  var index=this.getAttribute("index");
  animate(ulObj,-index*imgWidth);
};
  }
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
  //获取元素的当前的位置,数字类型
  var current = element.offsetLeft;
  //每次移动的距离
  var step = 10;
  step = current < target ? step : -step;
  //当前移动到位置
  current += step;
  if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
  } else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
  }
}, 20);
  }
</script>
</body>

09_淘宝焦点轮播图

  <style>
body, ul, ol, li, img {
  margin: 0;
  padding: 0;
  list-style: none;
}
#box {
  width: 520px;
  height: 280px;
  padding: 5px;
  position: relative;
  border: 1px solid #ccc;
  margin: 100px auto 0;
}
.ad {
  width: 520px;
  height: 280px;
  /*overflow: hidden;*/
  position: relative;
}
#box img {
  width: 520px;
}
.ad ol {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.ad ol li {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #ccc;
  text-align: center;
  background: #fff;
  float: left;
  margin-right: 10px;
  cursor: pointer;
  _display: inline;
}
.ad ol li.current {
  background: yellow;
}
.ad ul li {
  float: left;
}
.ad ul {
  position: absolute;
  top: 0;
  width: 2940px;
}
.ad ul li.current {
  display: block;
}
#focusD {
  display: none;
}
#focusD span {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -20px;
  background: #000;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #fff;
  opacity: 0.3;
  border: 1px solid #fff;
}
#focusD #right {
  right: 5px;
  left: auto;
}
  </style>
</head>
<body>
<div id="box" class="all">
  <div class="ad">
<ul id="imgs">
  <li><img src="images/01.jpg"/></li>
  <li><img src="images/02.jpg"/></li>
  <li><img src="images/03.jpg"/></li>
  <li><img src="images/04.jpg"/></li>
  <li><img src="images/05.jpg"/></li>
</ul>
  </div><!--相框-->
  <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
  </div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var ad = box.children[0];
  //获取相框的宽度
  var imgWidth = ad.offsetWidth;
  //获取ul
  var ulObj = ad.children[0];
  //获取左右焦点的div
  var focusD = my$("focusD");

  //显示和隐藏左右焦点的div----为box注册事件
  box.onmouseover = function () {
focusD.style.display = "block";
  };
  box.onmouseout = function () {
focusD.style.display = "none";
  };
  //点击右边按钮
  var index=0;
  my$("right").onclick = function () {
if(index<ulObj.children.length-1){
  index++;
  animate(ulObj,-index*imgWidth);
}
  };
  //点击左边按钮
  my$("left").onclick = function () {
if(index>0){
  index--;
  animate(ulObj,-index*imgWidth);
}
  };
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
  //获取元素的当前的位置,数字类型
  var current = element.offsetLeft;
  //每次移动的距离
  var step = 10;
  step = current < target ? step : -step;
  //当前移动到位置
  current += step;
  if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
  } else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
  }
}, 20);
  }
</script>
</body>

**09_无缝轮播图**

<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
  width: 300px;
  height: 200px;
  margin: 100px auto;
  background-color: pink;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}
.box ul li {
  float: left;
}
.box ul {
  width: 1500px;
  position: absolute;
  left: 0;
  top: 0;
}
  </style>
</head>
<body>
<div class="box" id="screen">
  <ul>
<li><img src="imagess/01.jpg" alt=""/></li>
<li><img src="imagess/02.jpg" alt=""/></li>
<li><img src="imagess/03.jpg" alt=""/></li>
<li><img src="imagess/04.jpg" alt=""/></li>
<li><img src="imagess/01.jpg" alt=""/></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  var current = 0;//只声明了一次
  function f1() {
var ulObj = my$("screen").children[0];
current -= 10;
if (current < -1200) {
  ulObj.style.left = 0 + "px";
  current = 0;
} else {
  ulObj.style.left = current + "px";
}
  }
  var timeId=setInterval(f1, 20);
  my$("screen").onmouseover=function () {
//停止
clearInterval(timeId);
  };
  my$("screen").onmouseout=function () {
//继续
timeId=setInterval(f1, 20);
  };
</script>
</body>

10_完整的轮播案例

  <style type="text/css">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
}
.all {
  width: 500px;
  height: 200px;
  padding: 7px;
  border: 1px solid #ccc;
  margin: 100px auto;
  position: relative;
}
.screen {
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.screen li {
  width: 500px;
  height: 200px;
  overflow: hidden;
  float: left;
}
.screen ul {
  position: absolute;
  left: 0;
  top: 0px;
  width: 3000px;
}
.all ol {
  position: absolute;
  right: 10px;
  bottom: 10px;
  line-height: 20px;
  text-align: center;
}
.all ol li {
  float: left;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-left: 10px;
  cursor: pointer;
}
.all ol li.current {
  background: #DB192A;
}
#arr {
  display: none;
}
#arr span {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -20px;
  background: #000;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #fff;
  opacity: 0.3;
  border: 1px solid #fff;
}
#arr #right {
  right: 5px;
  left: auto;
}
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen"><!--相框-->
<ul>
  <li><img src="images/1.jpg" width="500" height="200"/></li>
  <li><img src="images/2.jpg" width="500" height="200"/></li>
  <li><img src="images/3.jpg" width="500" height="200"/></li>
  <li><img src="images/4.jpg" width="500" height="200"/></li>
  <li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var screen = box.children[0];
  //获取相框的宽度
  var imgWidth = screen.offsetWidth;
  //获取ul
  var ulObj = screen.children[0];
  //获取ul中的所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = screen.children[1];
  //焦点的div
  var arr = my$("arr");

  var pic = 0;//全局变量
  //创建小按钮----根据ul中的li个数
  for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
  //先干掉所有的ol中的li的背景颜色
  for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
  }
  //设置当前鼠标进来的li的背景颜色
  this.className = "current";
  //获取鼠标进入的li的当前索引值
  pic = this.getAttribute("index");
  //移动ul
  animate(ulObj, -pic * imgWidth);
};
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));
  //自动播放
 var timeId= setInterval(clickHandle,1000);
  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的div
  box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
  };
  //右边按钮
  my$("right").onclick =clickHandle;
  function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
  //如何从第6个图,跳转到第一个图
  pic = 0;//先设置pic=0
  ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
  //第五个按钮颜色干掉
  olObj.children[olObj.children.length - 1].className = "";
  //第一个按钮颜色设置上
  olObj.children[0].className = "current";
} else {
  //干掉所有的小按钮的背景颜色
  for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
  }
  olObj.children[pic].className = "current";
}
  };
  //左边按钮
  my$("left").onclick = function () {
if (pic == 0) {
  pic = 5;
  ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
  olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
  };
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
  //获取元素的当前的位置,数字类型
  var current = element.offsetLeft;
  //每次移动的距离
  var step = 10;
  step = current < target ? step : -step;
  //当前移动到位置
  current += step;
  if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
  } else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
  }
}, 10);
  }
</script>
</body>

三个大的系列之offset系列中的属性:

在style标签中设置的样式属性获取不到
style属性中设置的样式属性是可以获取到的

offsetWidth:获取元素的宽 offsetHeight:获取元素的高 offsetLeft:获取元素距离左边位置的值 offsetTop:获取元素距离上面位置的值 console.log(my$("dv1").offsetWidth); console.log(my$("dv1").offsetHeight); console.log(my$("dv1").offsetLeft); console.log(my$("dv1").offsetTop);

没有脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin

脱离文档流了：主要是自己的left和自己的margin

直接通过document获得元素

`<body>
<script>
  //获取body
  console.log(document.body);//获取的是元素--标签
  //获取title
  console.log(document.title);//标签中的值
  document.title="嘎嘎去";
  //获取html
  console.log(document.documentElement);
</script>
</body>`

11_图片跟着鼠标飞

     <style>
img{
position: absolute;
}
  </style>
</head>
<body>
<img src="images/tianshi.gif" 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>