溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
