课堂练习-1：点击按钮移动一个div
~~~
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px;}
</style>
<script type="text/javascript">
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function () {
timer = setInterval(function () {
oDiv.style.left = parseInt(getStyle(oDiv,'left')) + 10 + 'px'
},30);
}
function getStyle(obj,attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
<div id="div1"></div>
</body>
</html>
~~~
拓展练习-1：在距离左侧800px就停止
~~~
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
var timer = null;
oBtn.onclick = function () {
timer = setInterval(function () {
clearInterval(timer);
var speed = parseInt(getStyle(oDiv,'left')) + 10;
if(speed >= 800){
clearInterval(timer);
speed = 800;
}
oDiv.style.left = speed + 'px'
},30)
}
function getStyle(obj,attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
~~~
变量问题，变量越少越好，改动措施，将timer删掉，给oDiv加一个自定义属性，oDiv.timer，其余位置的timer跟随改动，再次优化，外部的oDiv.timer删除。
拓展练习-2：div的前进后退（找不同点：1.方向；2.目标点;3.进行判断的大于小于号）
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px;}
</style>
<script type="text/javascript">
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function () {
doMove(oDiv,-12,10);// 直接就回到原点，原因是没判断大于小于号
}
oBtn2.onclick = function () {
doMove(oDiv,12,800);
}
// obj--移动对象，dir--方向，target--目标点
function doMove(obj,dir,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, 'left')) + dir;
if (speed > target && dir>0) { // 往前跑
speed = target;
}
if (speed < target && dir<0) { // 往后跑
speed = target;
}
obj.style.left = speed + 'px'
if(speed == target){
clearInterval(obj.timer);
}
}, 30)
}
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="向前">
<input id="btn2" type="button" value="向后">
<div id="div1"></div>
</body>
</html>
~~~
拓展练习-3：向上、向下跑
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px;}
</style>
<script type="text/javascript">
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function () {
doMove(oDiv,'top',12,40);// 直接就回到原点，原因是没判断大于小于号
}
oBtn2.onclick = function () {
doMove(oDiv,'top',12,500);
}
// obj--移动对象，dir--方向，target--目标点
function doMove(obj,attr,dir,target) {
// 解决正负号
dir = parseInt(getStyle(obj, attr)) < target?dir:-dir;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, attr)) + dir;
// 条件合并
if (speed > target && dir>0 || speed < target && dir<0) {
speed = target;
}
obj.style[attr] = speed + 'px'
if(speed == target){
clearInterval(obj.timer);
}
}, 30)
}
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="向上">
<input id="btn2" type="button" value="向下">
<div id="div1"></div>
</body>
</html>
~~~
拓展练习-4：div复合运动，回调函数
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px;}
</style>
<script type="text/javascript">
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function () {
doMove(oDiv,'top',12,40);// 直接就回到原点，原因是没判断大于小于号
}
oBtn2.onclick = function () {
doMove(oDiv,'top',12,500,function () {doMove(oDiv,'left',12,500)});
}
function doMove(obj,attr,dir,target,endFn) {
dir = parseInt(getStyle(obj, attr)) < target?dir:-dir;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, attr)) + dir;
// 条件合并
if (speed > target && dir>0 || speed < target && dir<0) { // 往前跑
speed = target;
}
obj.style[attr] = speed + 'px'
if(speed == target){
clearInterval(obj.timer);
//if(endFn){
//endFn();
//}
endFn && endFn();//回调函数，与上面if功能一样
}
}, 30)
}
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="向上">
<input id="btn2" type="button" value="向下">
<div id="div1"></div>
</body>
</html>
~~~
***
这两个工具函数可以封装到一个js文件中以备后用
~~~
function doMove(obj,attr,dir,target,endFn) {
dir = parseInt(getStyle(obj, attr)) < target?dir:-dir;
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, attr)) + dir;
// 条件合并
if (speed > target && dir>0 || speed < target && dir<0) { // 往前跑
speed = target;
}
obj.style[attr] = speed + 'px'
if(speed == target){
clearInterval(obj.timer);
//if(endFn){
//endFn();
//}
endFn && endFn();//回调函数，与上面if功能一样
}
}, 30)
}
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
~~~
***
课堂练习-2：图片自动切换
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
#box{
width: 600px;
height: 399px;
margin: 30px auto;
border:10px solid #D5D5D5;
overflow: hidden;
position: relative;
}
#content{
width: 3600px;
height: 399px;
font-size: 0;
position: absolute;
left:0;
top:0;
}
#info{
width: 600px;
position: absolute;
left:0;
top:399px;
color:#fff;
opacity: 0.8;
}
#info h1{
font-size: 24px;
margin-left: 25px;
line-height: 36px;
}
#info p{
font-size: 14px;
text-indent: 2em;
line-height: 24px;
}
.desc{
position: absolute;
left:0;
top:0;
background: #000;
}
</style>
<script src="js/neusoft.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box'),
oImg = document.getElementById('content'),
oInfo = document.getElementById('info'),
aDiv = oInfo.getElementsByTagName('div');
for(var i = 0;i < aDiv.length;i++){
aDiv[i].className = 'desc';
}
var num = 0;
var timer = null;
doMove(aDiv[num],'top',10,-108);
// 切换图片
tabImg();
function tabImg(){
timer = setTimeout(function(){
doMove(aDiv[num],'top',10,0,function(){
num++;
if(num == 6){
num = 1;
oImg.style.left = 0;
}
doMove(oImg,'left',30,-num*600,function(){
doMove(aDiv[num],'top',10,-108);
tabImg();
});
});
},1000);
}
}
</script>
</head>
<body>
<div id="box">
<div id="content">
<img src="img/pic1.jpg" alt="" />
<img src="img/pic2.jpg" alt="" />
<img src="img/pic3.jpg" alt="" />
<img src="img/pic4.jpg" alt="" />
<img src="img/pic5.jpg" alt="" />
<img src="img/pic1.jpg" alt="" />
</div>
<div id="info">
<div>
<h1>第1集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
<div>
<h1>第2集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
<div>
<h1>第3集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
<div>
<h1>第4集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
<div>
<h1>第5集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
<div>
<h1>第1集</h1>
<p>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</p>
</div>
</div>
</div>
</body>
</html>
~~~
### 抖动原理
原理：抖动就是在原来的基础上向左向右或向上向下，利用之前的doMove函数
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{position:absolute;top:200px;left:300px;width:200px;}
#img1{left:80px;}
</style>
<script src="neusoft.js"></script>
<script>
window.onload = function () {
var oImg1 = document.getElementById('img1');
var oImg2 = document.getElementById('img2');
oImg1.onclick = fnShake;
oImg2.onclick = fnShake;
function fnShake() {
var _this = this;
shake(_this,'left',function () {
shake(_this,'top');
});
}
function shake(obj,attr,endFn) {
var pos = parseInt(getStyle(obj,attr));// 此处有隐患
// 解决隐患办法
// if(obj.shaked){return;}
// obj.shaked = true;
var arr = [];// 20，-20，18，-18.....0
// var timer = null;
var num = 0;
for(var i = 20;i > 0;i-=2){
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shake);//与doMove函数冲突的话重起一个
obj.shake = setInterval(function () {
obj.style[attr] = pos + arr[num] + 'px';
num++;
if(num === arr.length){
clearInterval(obj.shake);
endFn && endFn();
obj.shaked = false;
}
},50);
}
}
</script>
</head>
<body>
<img id="img1" src="img/4.jpg">
<img id="img2" src="img/5.jpg">
</body>
</html>
~~~
***
课后作业-1：图片自动切换（只允许使用两个img标签）
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin: 0;}
#box{
width: 600px;
height: 399px;
margin: 30px auto;
border:10px solid #D5D5D5;
overflow: hidden;
position: relative;
}
#content{
width: 1200px;
height: 399px;
font-size: 0;
position: absolute;
left:0;
top:0;
}
#prev,#next{
width:50px;
height: 50px;
border:5px solid #D5D5D5;
position:absolute;
top:270px;
text-align: center;
line-height:50px ;
background: #fff;
border-radius: 50%;
color: #202329;
text-decoration: none;
opacity: 0.3;
top:170px;
transition: 0.3s;
font-weight: bold;
}
#prev{
left:20px
}
#next{
right: 20px;
}
#prev:hover,#next:hover{
opacity: 0.7;
transform: scale(1.1);
}
</style>
<script src="js/neusoft.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oContent= document.getElementById('content');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var aImg = oContent.getElementsByTagName('img');
var num = 0;
var second = 1;
var oImgSrc = ['img/pic1.jpg','img/pic2.jpg','img/pic3.jpg','img/pic4.jpg','img/pic5.jpg'];
aImg[0].src = oImgSrc[num];
aImg[1].src = oImgSrc[second];
oNext.onclick = function(){
imgTab(1);
}
oPrev.onclick = function(){
imgTab(-1);
}
function imgTab(number){
if(number > 0){
oContent.style.left = 0;
aImg[0].src = oImgSrc[num];
second = num + 1;
num++;
if(num == oImgSrc.length){
num = 0;
}
if(second == oImgSrc.length){
second = 0;
}
aImg[1].src = oImgSrc[second];
doMove(oContent,'left',30,-600);
}else{
oContent.style.left = '-600px';
aImg[1].src = oImgSrc[num];
second = num - 1;
if(second == -1){
second = oImgSrc.length-1;
}
aImg[0].src = oImgSrc[second];
num--;
if(num == -1){
num = oImgSrc.length-1;
}
doMove(oContent,'left',30,0);
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="content">
<img src="img/pic1.jpg" alt="" />
<img src="img/pic2.jpg" alt="" />
</div>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
</div>
</body>
</html>
~~~
***
[图片素材下载](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)
