BOM(二)
定时器，控制div移动的移动1
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 #box1{ 14 width: 100px; 15 height: 100px; 16 background-color: red; 17 position: absolute; 18 left: 0; 19 } 20 21 </style> 22 23 <script type="text/javascript"> 24 25 window.onload = function(){ 26 27 //获取box1 28 var box1 = document.getElementById("box1"); 29 //获取btn01 30 var btn01 = document.getElementById("btn01"); 31 32 //定义一个变量，用来保存定时器的标识 33 var timer; 34 35 //点击按钮以后，使box1向右移动（left值增大） 36 btn01.onclick = function(){ 37 38 //关闭上一个定时器 39 clearInterval(timer); 40 41 //开启一个定时器，用来执行动画效果 42 timer = setInterval(function(){ 43 44 //获取box1的原来的left值 45 var oldValue = parseInt(getStyle(box1,"left")); 46 47 //在旧值的基础上增加 48 var newValue = oldValue + 1; 49 50 //判断newValue是否大于800 51 if(newValue > 800){ 52 newValue = 800; 53 } 54 55 //将新值设置给box1 56 box1.style.left = newValue + "px"; 57 58 //当元素移动到800px时，使其停止执行动画 59 if(newValue == 800){ 60 //达到目标，关闭定时器 61 clearInterval(timer); 62 } 63 64 65 },30); 66 67 68 }; 69 70 }; 71 72 73 /* 74 * 定义一个函数，用来获取指定元素的当前的样式 75 * 参数： 76 * obj 要获取样式的元素 77 * name 要获取的样式名 78 */ 79 function getStyle(obj , name){ 80 81 if(window.getComputedStyle){ 82 //正常浏览器的方式，具有getComputedStyle()方法 83 return getComputedStyle(obj , null)[name]; 84 }else{ 85 //IE8的方式，没有getComputedStyle()方法 86 return obj.currentStyle[name]; 87 } 88 89 } 90 91 92 </script> 93 </head> 94 <body> 95 96 <button id="btn01">点击按钮以后box1向右移动</button> 97 98 <br /><br /> 99 100 <div id="box1"></div> 101 102 <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> 103 104 </body> 105 </html>
定时器，控制div移动的移动2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 #box1{ 14 width: 100px; 15 height: 100px; 16 background-color: red; 17 position: absolute; 18 left: 0; 19 } 20 21 </style> 22 23 <script type="text/javascript"> 24 25 window.onload = function(){ 26 27 //获取box1 28 var box1 = document.getElementById("box1"); 29 //获取btn01 30 var btn01 = document.getElementById("btn01"); 31 32 //获取btn02 33 var btn02 = document.getElementById("btn02"); 34 35 36 //点击按钮以后，使box1向右移动（left值增大） 37 btn01.onclick = function(){ 38 move(box1 , 800 , 10); 39 }; 40 41 42 //点击按钮以后，使box1向左移动（left值减小） 43 btn02.onclick = function(){ 44 move(box1 , 0 , 10); 45 }; 46 47 }; 48 49 //定义一个变量，用来保存定时器的标识 50 var timer; 51 52 //尝试创建一个可以执行简单动画的函数 53 /* 54 * 参数： 55 * obj:要执行动画的对象 56 * target:执行动画的目标位置 57 * speed:移动的速度(正数向右移动，负数向左移动) 58 */ 59 function move(obj , target ,speed){ 60 //关闭上一个定时器 61 clearInterval(timer); 62 63 //获取元素目前的位置 64 var current = parseInt(getStyle(obj,"left")); 65 66 //判断速度的正负值 67 //如果从0 向 800移动，则speed为正 68 //如果从800向0移动，则speed为负 69 if(current > target){ 70 //此时速度应为负值 71 speed = -speed; 72 } 73 74 //开启一个定时器，用来执行动画效果 75 timer = setInterval(function(){ 76 77 //获取box1的原来的left值 78 var oldValue = parseInt(getStyle(obj,"left")); 79 80 //在旧值的基础上增加 81 var newValue = oldValue + speed; 82 83 //判断newValue是否大于800 84 //从800 向 0移动 85 //向左移动时，需要判断newValue是否小于target 86 //向右移动时，需要判断newValue是否大于target 87 if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ 88 newValue = target; 89 } 90 91 //将新值设置给box1 92 obj.style.left = newValue + "px"; 93 94 //当元素移动到0px时，使其停止执行动画 95 if(newValue == target){ 96 //达到目标，关闭定时器 97 clearInterval(timer); 98 } 99 100 101 },30); 102 } 103 104 105 /* 106 * 定义一个函数，用来获取指定元素的当前的样式 107 * 参数： 108 * obj 要获取样式的元素 109 * name 要获取的样式名 110 */ 111 function getStyle(obj , name){ 112 113 if(window.getComputedStyle){ 114 //正常浏览器的方式，具有getComputedStyle()方法 115 return getComputedStyle(obj , null)[name]; 116 }else{ 117 //IE8的方式，没有getComputedStyle()方法 118 return obj.currentStyle[name]; 119 } 120 121 } 122 123 124 </script> 125 </head> 126 <body> 127 128 <button id="btn01">点击按钮以后box1向右移动</button> 129 <button id="btn02">点击按钮以后box1向左移动</button> 130 131 <br /><br /> 132 133 <div id="box1"></div> 134 135 <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> 136 137 </body> 138 </html>
定时器，控制div移动的移动3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } #box2{ width: 100px; height: 100px; background-color: yellow; position: absolute; left: 0; top: 200px; } </style> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); //获取btn01 var btn01 = document.getElementById("btn01"); //获取btn02 var btn02 = document.getElementById("btn02"); //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ move(box1 ,"left", 800 , 20); }; //点击按钮以后，使box1向左移动（left值减小） btn02.onclick = function(){ move(box1 ,"left", 0 , 10); }; //获取btn03 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ move(box2 , "left",800 , 10); }; //测试按钮 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ //move(box2 ,"width", 800 , 10); //move(box2 ,"top", 800 , 10); //move(box2 ,"height", 800 , 10); move(box2 , "width" , 800 , 10 , function(){ move(box2 , "height" , 400 , 10 , function(){ move(box2 , "top" , 0 , 10 , function(){ move(box2 , "width" , 100 , 10 , function(){ }); }); }); }); }; }; //定义一个变量，用来保存定时器的标识 /* * 目前我们的定时器的标识由全局变量timer保存， * 所有的执行正在执行的定时器都在这个变量中保存 */ //var timer; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <button id="btn03">点击按钮以后box2向右移动</button> <button id="btn04">测试按钮</button> <br /><br /> <div id="box1"></div> <div id="box2"></div> <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html>
引入的js文件
1 //尝试创建一个可以执行简单动画的函数 2 /* 3 * 参数： 4 * obj:要执行动画的对象 5 * attr:要执行动画的样式，比如：left top width height 6 * target:执行动画的目标位置 7 * speed:移动的速度(正数向右移动，负数向左移动) 8 * callback:回调函数，这个函数将会在动画执行完毕以后执行 9 */ 10 function move(obj, attr, target, speed, callback) { 11 //关闭上一个定时器 12 clearInterval(obj.timer); 13 14 //获取元素目前的位置 15 var current = parseInt(getStyle(obj, attr)); 16 17 //判断速度的正负值 18 //如果从0 向 800移动，则speed为正 19 //如果从800向0移动，则speed为负 20 if(current > target) { 21 //此时速度应为负值 22 speed = -speed; 23 } 24 25 //开启一个定时器，用来执行动画效果 26 //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 27 obj.timer = setInterval(function() { 28 29 //获取box1的原来的left值 30 var oldValue = parseInt(getStyle(obj, attr)); 31 32 //在旧值的基础上增加 33 var newValue = oldValue + speed; 34 35 //判断newValue是否大于800 36 //从800 向 0移动 37 //向左移动时，需要判断newValue是否小于target 38 //向右移动时，需要判断newValue是否大于target 39 if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { 40 newValue = target; 41 } 42 43 //将新值设置给box1 44 obj.style[attr] = newValue + "px"; 45 46 //当元素移动到0px时，使其停止执行动画 47 if(newValue == target) { 48 //达到目标，关闭定时器 49 clearInterval(obj.timer); 50 //动画执行完毕，调用回调函数，有执行，没有也没事 51 callback && callback(); 52 } 53 54 }, 30); 55 } 56 57 /* 58 * 定义一个函数，用来获取指定元素的当前的样式 59 * 参数： 60 * obj 要获取样式的元素 61 * name 要获取的样式名 62 */ 63 function getStyle(obj, name) { 64 65 if(window.getComputedStyle) { 66 //正常浏览器的方式，具有getComputedStyle()方法 67 return getComputedStyle(obj, null)[name]; 68 } else { 69 //IE8的方式，没有getComputedStyle()方法 70 return obj.currentStyle[name]; 71 } 72 73 }
轮播图点击按钮切
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 /* 14 * 设置outer的样式 15 */ 16 #outer{ 17 /*设置宽和高*/ 18 width: 520px; 19 height: 333px; 20 /*居中*/ 21 margin: 50px auto; 22 /*设置背景颜色*/ 23 background-color: greenyellow; 24 /*设置padding*/ 25 padding: 10px 0; 26 /*开启相对定位*/ 27 position: relative; 28 /*裁剪溢出的内容*/ 29 overflow: hidden; 30 } 31 32 /*设置imgList*/ 33 #imgList{ 34 /*去除项目符号*/ 35 list-style: none; 36 /*设置ul的宽度*，不能写死，图片一多，就完了/ 37 /*width: 2600px;*/ 38 /*开启绝对定位*/ 39 position: absolute; 40 /*设置偏移量*/ 41 /* 42 * 每向左移动520px，就会显示到下一张图片 43 */ 44 left: 0px; 45 } 46 47 /*设置图片中的li*/ 48 #imgList li{ 49 /*设置浮动*/ 50 float: left; 51 /*设置左右外边距*/ 52 margin: 0 10px; 53 } 54 55 /*设置导航按钮*/ 56 #navDiv{ 57 /*开启绝对定位*/ 58 position: absolute; 59 /*设置位置*/ 60 bottom: 15px; 61 /*设置left值 62 outer宽度 520 63 navDiv宽度 25*5 = 125 64 520 - 125 = 395/2 = 197.5 65 * */ 66 /*left: 197px;*/ 67 } 68 69 #navDiv a{ 70 /*设置超链接浮动*/ 71 float: left; 72 /*设置超链接的宽和高*/ 73 width: 15px; 74 height: 15px; 75 /*设置背景颜色*/ 76 background-color: red; 77 /*设置左右外边距*/ 78 margin: 0 5px; 79 /*设置透明*/ 80 opacity: 0.5; 81 /*兼容IE8透明*/ 82 filter: alpha(opacity=50); 83 } 84 85 /*设置鼠标移入的效果*/ 86 #navDiv a:hover{ 87 background-color: black; 88 } 89 </style> 90 91 <!--引用工具--> 92 <script type="text/javascript" src="js/tools.js"></script> 93 <script type="text/javascript"> 94 window.onload = function(){ 95 //获取imgList 96 var imgList = document.getElementById("imgList"); 97 //获取页面中所有的img标签 98 var imgArr = document.getElementsByTagName("img"); 99 //设置imgList的宽度 100 imgList.style.width = 520*imgArr.length+"px"; 101 102 /*设置导航按钮居中*/ 103 //获取navDiv 104 var navDiv = document.getElementById("navDiv"); 105 //获取outer 106 var outer = document.getElementById("outer"); 107 //设置navDiv的left值 108 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; 109 110 //默认显示图片的索引 111 var index = 0; 112 //获取所有的a 113 var allA = document.getElementsByTagName("a"); 114 //设置默认选中的效果 115 allA[index].style.backgroundColor = "black"; 116 117 /* 118 点击超链接切换到指定的图片 119 点击第一个超链接，显示第一个图片 120 点击第二个超链接，显示第二个图片 121 * */ 122 123 //为所有的超链接都绑定单击响应函数 124 // for循环结束后，才会执行点击事件，i=5 125 for(var i=0; i<allA.length ; i++){ 126 127 //为每一个超链接都添加一个num属性,记录他的索引 128 allA[i].num = i; 129 console.log(i)// 0,1,2,3,4 130 131 //为超链接绑定单击响应函数 132 allA[i].onclick = function(){ 133 134 //获取点击超链接的索引,并将其设置为index 135 index = this.num; 136 // alert(i)//5 137 138 //切换图片 139 /* 140 * 第一张 0 0 141 * 第二张 1 -520 142 * 第三张 2 -1040 143 */ 144 //imgList.style.left = -520*index + "px"; 145 //设置选中的a 146 setA(); 147 148 //使用move函数来切换图片 149 move(imgList , "left" , -520*index , 20 , function(){ 150 151 }); 152 153 }; 154 } 155 156 //创建一个方法用来设置选中的a 157 function setA(){ 158 159 //遍历所有a，并将它们的背景颜色设置为红色 160 for(var i=0 ; i<allA.length ; i++){ 161 allA[i].style.backgroundColor = ""; 162 } 163 164 //将选中的a设置为黑色 165 allA[index].style.backgroundColor = "black"; 166 }; 167 168 169 }; 170 171 </script> 172 </head> 173 <body> 174 <!-- 创建一个外部的div，来作为大的容器 --> 175 <div id="outer"> 176 <!-- 创建一个ul，用于放置图片 --> 177 <ul id="imgList"> 178 <li><img src="img/1.jpg"/></li> 179 <li><img src="img/2.jpg"/></li> 180 <li><img src="img/3.jpg"/></li> 181 <li><img src="img/4.jpg"/></li> 182 <li><img src="img/5.jpg"/></li> 183 </ul> 184 <!--创建导航按钮--> 185 <div id="navDiv"> 186 <a href="javascript:;"></a> 187 <a href="javascript:;"></a> 188 <a href="javascript:;"></a> 189 <a href="javascript:;"></a> 190 <a href="javascript:;"></a> 191 </div> 192 </div> 193 </body> 194 </html>
轮播图定时器自动切换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 /* 14 * 设置outer的样式 15 */ 16 #outer{ 17 /*设置宽和高*/ 18 width: 520px; 19 height: 333px; 20 /*居中*/ 21 margin: 50px auto; 22 /*设置背景颜色*/ 23 background-color: greenyellow; 24 /*设置padding*/ 25 padding: 10px 0; 26 /*开启相对定位*/ 27 position: relative; 28 /*裁剪溢出的内容*/ 29 overflow: hidden; 30 } 31 32 /*设置imgList*/ 33 #imgList{ 34 /*去除项目符号*/ 35 list-style: none; 36 /*设置ul的宽度*/ 37 /*width: 2600px;*/ 38 /*开启绝对定位*/ 39 position: absolute; 40 /*设置偏移量*/ 41 /* 42 * 每向左移动520px，就会显示到下一张图片 43 */ 44 left: 0px; 45 } 46 47 /*设置图片中的li*/ 48 #imgList li{ 49 /*设置浮动*/ 50 float: left; 51 /*设置左右外边距*/ 52 margin: 0 10px; 53 } 54 55 /*设置导航按钮*/ 56 #navDiv{ 57 /*开启绝对定位*/ 58 position: absolute; 59 /*设置位置*/ 60 bottom: 15px; 61 /*设置left值 62 outer宽度 520 63 navDiv宽度 25*5 = 125 64 520 - 125 = 395/2 = 197.5 65 * */ 66 /*left: 197px;*/ 67 } 68 69 #navDiv a{ 70 /*设置超链接浮动*/ 71 float: left; 72 /*设置超链接的宽和高*/ 73 width: 15px; 74 height: 15px; 75 /*设置背景颜色*/ 76 background-color: red; 77 /*设置左右外边距*/ 78 margin: 0 5px; 79 /*设置透明*/ 80 opacity: 0.5; 81 /*兼容IE8透明*/ 82 filter: alpha(opacity=50); 83 } 84 85 /*设置鼠标移入的效果*/ 86 #navDiv a:hover{ 87 background-color: black; 88 } 89 </style> 90 91 <!--引用工具--> 92 <script type="text/javascript" src="js/tools.js"></script> 93 <script type="text/javascript"> 94 window.onload = function(){ 95 //获取imgList 96 var imgList = document.getElementById("imgList"); 97 //获取页面中所有的img标签 98 var imgArr = document.getElementsByTagName("img"); 99 //设置imgList的宽度 100 imgList.style.width = 520*imgArr.length+"px"; 101 102 103 /*设置导航按钮居中*/ 104 //获取navDiv 105 var navDiv = document.getElementById("navDiv"); 106 //获取outer 107 var outer = document.getElementById("outer"); 108 //设置navDiv的left值 109 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; 110 111 //默认显示图片的索引 112 var index = 0; 113 //获取所有的a 114 var allA = document.getElementsByTagName("a"); 115 //设置默认选中的效果 116 allA[index].style.backgroundColor = "black"; 117 118 /* 119 点击超链接切换到指定的图片 120 点击第一个超链接，显示第一个图片 121 点击第二个超链接，显示第二个图片 122 * */ 123 124 //为所有的超链接都绑定单击响应函数 125 for(var i=0; i<allA.length ; i++){ 126 127 //为每一个超链接都添加一个num属性 128 allA[i].num = i; 129 130 //为超链接绑定单击响应函数 131 allA[i].onclick = function(){ 132 133 //关闭自动切换的定时器 134 clearInterval(timer); 135 //获取点击超链接的索引,并将其设置为index 136 index = this.num; 137 138 //切换图片 139 /* 140 * 第一张 0 0 141 * 第二张 1 -520 142 * 第三张 2 -1040 143 */ 144 //imgList.style.left = -520*index + "px"; 145 //设置选中的a 146 setA(); 147 148 //使用move函数来切换图片 149 move(imgList , "left" , -520*index , 20 , function(){ 150 //动画执行完毕，开启自动切换 151 autoChange(); 152 }); 153 154 }; 155 } 156 157 158 //开启自动切换图片 159 autoChange(); 160 161 162 //创建一个方法用来设置选中的a 163 function setA(){ 164 165 //判断当前索引是否是最后一张图片 166 if(index >= imgArr.length - 1){ 167 //则将index设置为0 168 index = 0; 169 170 //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样 171 //通过CSS将最后一张切换成第一张 172 imgList.style.left = 0; 173 } 174 175 //遍历所有a，并将它们的背景颜色设置为红色 176 for(var i=0 ; i<allA.length ; i++){ 177 allA[i].style.backgroundColor = ""; 178 } 179 180 //将选中的a设置为黑色 181 allA[index].style.backgroundColor = "black"; 182 }; 183 184 //定义一个自动切换的定时器的标识 185 var timer; 186 //创建一个函数，用来开启自动切换图片 187 function autoChange(){ 188 189 //开启一个定时器，用来定时去切换图片 190 timer = setInterval(function(){ 191 192 //使索引自增 193 index++; 194 195 //判断index的值 196 index %= imgArr.length; 197 198 //执行动画，切换图片 199 move(imgList , "left" , -520*index , 20 , function(){ 200 //修改导航按钮 201 setA(); 202 }); 203 204 },3000); 205 206 } 207 208 209 }; 210 211 </script> 212 </head> 213 <body> 214 <!-- 创建一个外部的div，来作为大的容器 --> 215 <div id="outer"> 216 <!-- 创建一个ul，用于放置图片 --> 217 <ul id="imgList"> 218 <li><img src="img/1.jpg"/></li> 219 <li><img src="img/2.jpg"/></li> 220 <li><img src="img/3.jpg"/></li> 221 <li><img src="img/4.jpg"/></li> 222 <li><img src="img/5.jpg"/></li> 223 <li><img src="img/1.jpg"/></li> 224 </ul> 225 <!--创建导航按钮--> 226 <div id="navDiv"> 227 <a href="javascript:;"></a> 228 <a href="javascript:;"></a> 229 <a href="javascript:;"></a> 230 <a href="javascript:;"></a> 231 <a href="javascript:;"></a> 232 </div> 233 </div> 234 </body> 235 </html>
