标签：function obj JavaScript 131 135 var box1 newValue left
文章目录
131 定时器（1）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
// 定义一个变量，用来保存定时器的标识
var timer;
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
// 关闭上一个定时器
clearInterval(timer);
// 开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(box1,"left"));
// 在旧值的基础上增加
var newValue = oldValue + 1;
// 判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
// 将新值设置给box1
box1.style.left = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if(newValue == 800){
// 达到目标，关闭定时器
clearInterval(timer);
}
},30);
};
};
/*
定义一个函数，用来获取指定元素的当前的样式
参数：1. obj 要获取样式的元素
2. name 要获取的样式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){
// 正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
// IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>
132 定时器（2）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
move(box1 , 800 , 10);
};
// 点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 , 0 , 10);
};
};
// 定义一个变量，用来保存定时器的标识
var timer;
// 尝试创建一个可以执行简单动画的函数
/*
参数：1. obj:要执行动画的对象
2. target:执行动画的目标位置
3. speed:移动的速度(正数向右移动，负数向左移动)
*/
function move(obj , target ,speed){
// 关闭上一个定时器
clearInterval(timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
// 判断速度的正负值
// 如果从0 向 800移动，则speed为正
// 如果从800向0移动，则speed为负
if(current > target){
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(obj,"left"));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 判断newValue是否大于800
// 从800 向 0移动
// 向左移动时，需要判断newValue是否小于target
// 向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue = target;
}
// 将新值设置给box1
obj.style.left = newValue + "px";
// 当元素移动到0px时，使其停止执行动画
if(newValue == target){
// 达到目标，关闭定时器
clearInterval(timer);
}
},30);
}
/*
定义一个函数，用来获取指定元素的当前的样式
参数：1. obj 要获取样式的元素
2. name 要获取的样式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){
// 正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
// IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>
133 定时器（3）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<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(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
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>
134 轮播图
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
设置outer的样式
*/
#outer {
/*设置宽和高*/
width: 520px;
height: 333px;
/*居中*/
margin: 50px auto;
/*设置背景颜色*/
background-color: greenyellow;
/*设置padding*/
padding: 10px 0;
/*开启相对定位*/
position: relative;
/*裁剪溢出的内容*/
overflow: hidden;
}
/*设置imgList*/
#imgList {
/*去除项目符号*/
list-style: none;
/*设置ul的宽度*/
/*width: 2600px;*/
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
/*
每向左移动520px，就会显示到下一张图片
*/
left: 0px;
}
/*设置图片中的li*/
#imgList li {
/*设置浮动*/
float: left;
/*设置左右外边距*/
margin: 0 10px;
}
/*设置导航按钮*/
#navDiv {
/*开启绝对定位*/
position: absolute;
/*设置位置*/
bottom: 15px;
/*设置left值
outer宽度 520
navDiv宽度 25*5 = 125
520 - 125 = 395/2 = 197.5
*/
/*left: 197px;*/
}
#navDiv a {
/*设置超链接浮动*/
float: left;
/*设置超链接的宽和高*/
width: 15px;
height: 15px;
/*设置背景颜色*/
background-color: red;
/*设置左右外边距*/
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
/*设置鼠标移入的效果*/
#navDiv a:hover {
background-color: black;
}
</style>
<!--引用工具-->
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 520 * imgArr.length + "px";
/*设置导航按钮居中*/
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outer
var outer = document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor = "black";
/*
点击超链接切换到指定的图片
点击第一个超链接，显示第一个图片
点击第二个超链接，显示第二个图片
*/
// 为所有的超链接都绑定单击响应函数
for(var i = 0; i < allA.length; i++){
// 为每一个超链接都添加一个num属性
allA[i].num = i;
// 为超链接绑定单击响应函数
allA[i].onclick = function(){
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引,并将其设置为index
index = this.num;
// 切换图片
/*
第一张 0 0
第二张 1 -520
第三张 2 -1040
*/
//imgList.style.left = -520*index + "px";
// 设置选中的a
setA();
// 使用move函数来切换图片
move(imgList , "left" , -520*index , 20 , function(){
// 动画执行完毕，开启自动切换
autoChange();
});
};
}
// 开启自动切换图片
autoChange();
// 创建一个方法用来设置选中的a
function setA(){
// 判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
// 则将index设置为0
index = 0;
// 此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
// 通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
// 遍历所有a，并将它们的背景颜色设置为红色
for(var i = 0; i < allA.length; i++){
allA[i].style.backgroundColor = "";
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
// 定义一个自动切换的定时器的标识
var timer;
// 创建一个函数，用来开启自动切换图片
function autoChange(){
// 开启一个定时器，用来定时去切换图片
timer = setInterval(function(){
// 使索引自增
index++;
// 判断index的值
index %= imgArr.length;
// 执行动画，切换图片
move(imgList , "left" , -520*index , 20 , function(){
// 修改导航按钮
setA();
});
},3000);
}
};
</script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
135 tools.js
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target) {
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
标签：function,
obj,
JavaScript,
131,
135,
var,
box1,
newValue,
left
From： https://blog.csdn.net/weixin_45980065/article/details/140898777