課堂練習-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)
