js代码
function move(obj,target,step,dir,endFn){
clearInterval(obj.timer);
var speed =parseInt(getStyle(obj,dir));
step = speed < target ? step : -step;
obj.timer = setInterval(function(){
speed=speed+step;
if(speed>=target && step>0 || speed<=target && step<0){
speed=target;
clearInterval(obj.timer);
// 如果有回调函数就调用
endFn && endFn();
}
obj.style[dir]=speed+'px';}
,30);
}
function doOpacity(obj,target,step,dir,endFn){
clearInterval(obj.opacity);
var speed =parseInt(getStyle(obj,dir));
step = speed < target ? step : -step;
obj.opacity = setInterval(function(){
speed=speed+step;
if(speed>=target && step>0 || speed<=target && step<0){
speed=target;
clearInterval(obj.opacity);
// 如果有回调函数就调用
endFn && endFn();
}
obj.style[dir]=speed;}
,30);
}
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
01.练习1-控制商品上下滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
font-size: 0;
background: #202329;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 340px;
border: 10px solid #f3f3f3;
overflow: hidden;
margin: 200px auto;
position: relative;
}
p{
margin: 0;
}
.top{
height: 20px;
width: 100%;
background: #0067C3;
position: absolute;
top: 0;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.bottom{
height: 20px;
width: 100%;
background: #0067C3;
position: absolute;
bottom: 0;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 14px;
cursor: pointer;
}
#box ul{
position: absolute;
top: 20px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
<li><a href=""><img src="img/7.jpg" alt=""></a></li>
<li><a href=""><img src="img/8.jpg" alt=""></a></li>
<li><a href=""><img src="img/9.jpg" alt=""></a></li>
<li><a href=""><img src="img/10.jpg" alt=""></a></li>
</ul>
<p class="top">↑</p>
<p class="bottom">↓</p>
</div>
<script>
var oTop = document.getElementsByTagName('p')[0];
var oBottom = document.getElementsByTagName('p')[1];
var oUl = document.getElementsByTagName('ul')[0];
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
var timer = null;
oTop.onmousedown = function(){
timer = setInterval(function(){
if(parseInt(getStyle(oUl,'top'))<=-180){
clearInterval(timer);
oUl.style.top='-180px';
return;
}
oUl.style.top=parseInt(getStyle(oUl,'top'))-10+'px';}
,50)
}
oTop.onmouseup = function(){
clearInterval(timer);
}
oBottom.onmousedown = function(){
timer = setInterval(function(){
if(parseInt(getStyle(oUl,'top'))>=20){
clearInterval(timer);
oUl.style.top='20px';
return;
}
oUl.style.top=parseInt(getStyle(oUl,'top'))+10+'px';}
,50)
}
oBottom.onmouseup = function(){
clearInterval(timer);
}
</script>
</body>
</html>
02.练习2-点击按钮移动div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: #0f7cbf;
position: absolute;
left: 8px;
}
#box1{
}
</style>
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p><button type="button">走你</button></p>
<p><button type="button">回来</button></p>
<p><button type="button">疯狂点吧</button></p>
<div id="box"></div>
<div id="box1"></div>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oBtn1 = document.getElementsByTagName('button')[1];
var oBtn2 = document.getElementsByTagName('button')[2];
var oBox = document.getElementById('box');
oBtn2.onOff=true;
oBtn2.onclick =function(){
if(oBtn2.onOff){
move(oBox,800,10,'top');
oBtn2.onOff=!oBtn2.onOff;
}else{
move(oBox,100,10,'left');
oBtn2.onOff=!oBtn2.onOff;
}
}
oBtn.onclick =function(){
move(oBox,800,10,'left');
doOpacity(oBox,0,0.01,'opacity');
}
oBtn1.onclick =function(){
move(oBox,8,10,'left');
doOpacity(oBox,1,0.01,'opacity');
}
// 1.步长的正负,方向--step
// 2.判断条件 --
// 3.目标位置不一样--target
// 4.移动的元素不一样--obj
// 5.回调函数 -- endFn
</script>
</body>
</html>
03.练习3-图片自动切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background: #202329;
font-size: 0;
}
h3{
margin: 0;
}
#box{
width: 600px;
height: 399px;
border: 10px solid #d5d5d5;
margin: 40px auto;
position: relative;
overflow: hidden;
}
#imgbox{
width: 3600px;
height: 399px;
position: absolute;
left: 0px;
}
#textbox{
width: 600px;
position: absolute;
top: 399px;
font-size: 14px;
color: #fff;
}
#textbox div{
position: absolute;
top: 0;/*85px可以上去*/
background: #000000;
opacity: 0.8;
padding: 5px;
}
</style>
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oImg = document.getElementById('imgbox');
var oText =document.getElementById('textbox');
var aDiv = oText.getElementsByTagName('div');
var num = 0;
// 第一集的描述文字
move(aDiv[num],-85,10,'top');
var timer = setInterval(function(){
move(aDiv[num],0,10,'top',function(){
num++;
if(num == 6){
num = 1;
oImg.style.left =0;
}
move(oImg,-600*num,40,'left');
move(aDiv[num],-85,5,'top');
});
},3000)
}
</script>
</head>
<body>
<div id="box">
<div id="imgbox">
<img src="img/练习3/pic1.jpg" >
<img src="img/练习3/pic2.jpg" >
<img src="img/练习3/pic3.jpg" >
<img src="img/练习3/pic4.jpg" >
<img src="img/练习3/pic5.jpg" >
<img src="img/练习3/pic1.jpg" >
</div>
<div id="textbox">
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
<div>
<h3>《离婚律师》精彩看点</h3>
《离婚律师》精彩看点： 末代剧王驾到，1.3亿超高投资无出其右，
姚晨、吴秀波顶级大牌组合，今后可遇不可求。 《离婚律师》剧情梗概：
事业有成的大律师池海东在自己的离婚案中输给了妻子的代理律师罗鹂。
不相信爱情的两人， 阴错阳差之下常常代理同一个离婚案件...
</div>
</div>
</div>
</body>
</html>
