1.往复运动动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion</title>
<script type="text/javascript">
window.onload = function(){
var iLeft = 0;
var iSpeed = 3;
var oDiv = document.getElementById('Div1');
/*clearInterval() 关闭*/
var timer = setInterval(function(){
iLeft += iSpeed;
oDiv.style.left = iLeft + 'px';
if(iLeft>700){ /*右侧判断*/
iSpeed = -3;
}
if(iLeft<0){ /*左侧判断*/
iSpeed = 3;
}
},20) /*setInterval(函数,完成时间)*/
}
</script>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: yellow;
margin: 100px 0;
position: absolute;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div class="div1" id="Div1"></div>
</body>
</html>
2.无缝滚动
例子:小南子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小南子</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('slide'); /*获取块元素*/
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oUl = oDiv.getElementsByTagName('ul')[0]; /*获取的是元素集,取第一个*/
var iRan = 0; /*位移初始值*/
var iSpeed = -2;
var iNowspeed = 0; /*临时存储*/
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; /*oUl.innerHTML是全部li,两个相加,相当于图片拼接*/
function moving(){ /*移动函数*/
iRan += iSpeed; /*位移量*/
if(iRan<-2060){ /*五个li移出*/
iRan = 0; /*回到初值,速度快,肉眼看不出*/
}
if(iRan>0){ /*当第一张图片往右,立即拉到第二段图片的第一张*/
iRan = -2060;
}
oUl.style.left = iRan + 'px'; /*position的left*/
}
var timer = setInterval(moving,20); /*定时器*/
oBtn01.onclick = function(){ /*点击控制方向*/
iSpeed = -2;
}
oBtn02.onclick = function(){
iSpeed = 2;
}
oDiv.onmouseover = function(){ /*鼠标移进*/
iNowspeed = iSpeed;
iSpeed = 0; /*停止*/
}
oDiv.onmouseout = function(){ /*鼠标移出*/
iSpeed = iNowspeed; /*恢复上次移动*/
}
}
</script>
<style type="text/css">
*{ /*把li的padding和margin消除*/
margin: 0;
padding: 0;
}
.list_con{
width: 1236px; /*3张图片可视*/
height: 526px; /*图片高度*/
overflow: hidden; /*隐藏溢出*/
border: 1px solid #000; /*边框*/
margin: 10px auto 0; /*相对body*/
position: relative; /*父级position,relative*/
background-color: #F0F0F0; /*背景色*/
}
.list_con ul{
width: 3296px; /*8张图片宽度,太小会导致拼接出错*/
height: 506px;
list-style: none; /*除去li样式*/
position: absolute; /*相对list_con*/
left: 0; /*初始位置*/
top: 0;
}
.list_con ul li{
float: left; /*向左靠齐*/
width: 392px; /*一张图片宽度*/
height: 506px;
margin: 10px; /*图片间的距离*/
/*position: absolute;*/
}
.btn_con{
width: 1456px; /*两个按钮的所在的范围*/
height: 50px;
margin: 230px auto 0; /*按钮位置*/
position: absolute;
float: left;
}
.btn_con .left,.right{
width: 50px; /*按钮大小*/
height: 50px;
background-color: gold; /*背景色*/
position: absolute;
/*left: 0px;
top: 0px;*/
font-size: 50px; /*<>的大小*/
border-radius: 25px; /*圆角*/
line-height: 50px; /*垂直居中*/
font-family: 'Arial'; /*字体*/
text-align: center; /*水平居中*/
cursor: pointer; /*鼠标光标,移到按钮会变成小手,像接触链接一样*/
opacity: 0.5; /*透明度*/
}
.right{
left: 1305px; /*按钮位置*/
}
.left{
left: 10px;
}
</style>
</head>
<body>
<div class="btn_con" id="btn">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul>
<li><a href="#"><img src="images/小林子1.jpg" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子2.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子3.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子4.png" alt="nanzi"></a></li>
<li><a href="#"><img src="images/小林子5.png" alt="nanzi"></a></li>
</ul>
</div>
</body>
</html>
3.变量作用域
变量作用域指的是变量的作用范围,JavaScript中的变量分为全局变量和局部变量。
(1)全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。
(2)局部变量:在函数内部定义的变量,只能在定义改变量的函数内部访问,外部无法访问
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。