JS基础学习:移动元素/第二种定时器/渐变案例
2019-04-09 本文已影响0人
Merbng
div 渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" id="btn" value="渐变" />
<script src="js/common.js"></script>
<script type="text/javascript">
var opacty = 10;
my$('btn').onclick = function() {
var timeId = setInterval(function() {
opacty--;
if (opacty <= 0) {
clearInterval(timeId);
}
// 设置div的透明度
my$('dv').style.opacity = opacty / 10;
}, 1000);
};
</script>
</body>
</html>
动画函数封装
<script type="text/javascript">
// 设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
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>
移动元素
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" name="" id="btn1" value="移动400" />
<input type="button" name="" id="btn2" value="移动800" />
<div id="dv">
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
move(my$('btn1'), 400);
move(my$('btn2'), 800);
// 任意一个元素移动到指定的目标位置
function move(element, target) {
element.onclick = function() {
clearInterval(element.timeId);
element.timeId = setInterval(function() {
// 获取div的当前位置
var current = my$('dv').offsetLeft; //数字类型 没有px
console.log(current)
// 每次移动多少像素
var step = 10;
step = current < target ? step : -step;
// 每次移动后的距离
current += step;
// 判断当前移动后的位置是否到达目标位置
if (Math.abs(target - current) > Math.abs(step)) {
my$('dv').style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
}
</script>
</body>
</html>
最简单的轮播图修改index赋值方式
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<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="http://www.baidu.com"><img src="images/1.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/2.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/3.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/4.jpg"></a></li>
<li><a href="http://www.baidu.com"><img src="images/5.jpg"></a></li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</div>
<script src="js/common.js"></script>
<script type="text/javascript">
// 获取最外面的div
var box = my$('box');
// 获取相框
var inner = box.children[0];
// 获取相框的宽度
var imgWidth = inner.style.offsetWidth;
// 获取ul
var ulObj = inner.children[0];
// 获取所有的span标签
var spanObj = inner.children[1].children;
// 循环遍历所有的span标签,注册鼠标进入事件
for (i = 0; i < spanObj.length; i++) {
// 循环的时候把索引值保存到每个span的自定义属性中
spanObj[i].setAttribute('index', i);
spanObj[i].onmouseover = mouseover;
}
function mouseover() {
for (j = 0; j < spanObj.length; j++) {
spanObj[j].removeAttribute('class');
}
this.className = "current";
// 移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
var index = this.getAttribute('index');
animate(ulObj, -index * imgWidth);
}
// 设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
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>
</html>
