1.運動框架封裝
//json:{width:400,heigth:500}
//easing:勻速 加速 緩沖
// linear ease-in ease-out
/*
opations={
duration:1000,
easing:'ease-out',
complete:function(){}
}
*/
//獲取計算后的樣式（兼容所有瀏覽器）
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
////運動
function move(obj,json,options){
var options=options||{};
options.duration=options.duration||700;
options.easing=options.easing||'ease-out';
var start={};
var dis={};
for(var name in json){
start[name]=parseInt(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
var count=Math.floor(options.duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function (){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var cur=start[name]+dis[name]*n/count;
break;
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]*Math.pow(a,3);
break;
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]*(1-Math.pow(a,3));
break;
}
if(name=='opacity'){
obj.style.filter='alpha(opacity:'+cur*100+')';
obj.style.opacity=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
}
},16);
}
2.多圖片展開：
1、布局轉(zhuǎn)化
將浮動布局轉(zhuǎn)化成定位布局
2葵萎、鼠標移入修改每個li 的left/top
3导犹、鼠標移出修改每個li 的left/top為 數(shù)組中的值
實例：
<style>
*{margin:0; padding:0; list-style: none;}
ul{
width: 366px;
margin: 100px auto;
}
li{
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 10px;
}
img{
width: 100%;
height:100%;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
//布局轉(zhuǎn)化
var arrPos = [];
for(var i = 0;i < aLi.length; i++){
arrPos[i] = {
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
};
}
for(var i = 0; i<aLi.length; i++){
aLi[i].style.position = 'absolute';
aLi[i].style.left = arrPos[i].left + 'px';
aLi[i].style.top = arrPos[i].top + 'px';
aLi[i].style.margin = 0;
}
for(var i = 0; i < aLi.length; i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
/*this.style.width = '200px';
this.style.height = '200px';
this.style.left = arrPos[this.index].left - 50 + 'px';
this.style.top = arrPos[this.index].top - 50 + 'px';*/
this.style.zIndex = 2;
move(this,{width:200,height:200,left:arrPos[this.index].left - 50,top:arrPos[this.index].top - 50});
};
aLi[i].onmouseout = function(){
/*this.style.width = '100px';
this.style.height = '100px';
this.style.left = arrPos[this.index].left + 'px';
this.style.top = arrPos[this.index].top+ 'px';*/
this.style.zIndex = 1;
move(this,{width:100,height:100,left:arrPos[this.index].left,top:arrPos[this.index].top});
};
}
};
</script>
</head>
<body>
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/8.jpg" alt=""></li>
<li><img src="img/9.jpg" alt=""></li>
</ul>
</body>
多圖片展開效果
多圖片展開.png
3.無縫滾動
1）復制一份接到后面
2）修改UL 的left值
left-- ->左
left++ ->右
3） 左：
if(left < -oUl.offsetWidth/2){
left = 0;
}
4）右：
if(left >= 0){
left = -oUl.offsetWidth/2;
}
DOM DOM樹
頁面上的元素、標簽
操作DOM元素羡忘，是一件非常耗性能的事情
數(shù)字規(guī)律：
向左滾動： left
left <= 0
left %400 實際值
0 0 0
-100 -100 -100
-200 -200 -200
-300 -300 -300
-400 0 0
-500 -100 -100
-600 -200 -200
向右滾動：
left>=0
left %400 -400 %400 實際值
0 0 -400 0 0
100 100 -300 -300 -300
200 200 -200 -200 -200
300 300 -100 -100 -100
400 0 -400 0 0
500 100 -300 -300 -300
實例：
<style>
*{margin:0;padding:0;list-style:none;}
#box{
width: 572px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
margin: 100px auto;
position: relative;
}
#box ul{
position: absolute;
left:0;
top:0;
}
#box ul li{
width: 133px;
height: 200px;
padding: 0 5px;
float: left;
}
#lnkLeft{
width: 50%;
height: 100%;
background: red;
position: absolute;
top:0;
left:0;
z-index: 1000;
opacity: 0;
}
#lnkRight{
width: 50%;
height: 100%;
background: blue;
position: absolute;
top:0;
right:0;
z-index: 1000;
opacity: 0;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var oUl = document.getElementById('ul1');
var aLi = oUl.children;
var oLeft = document.getElementById('lnkLeft');
var oRight = document.getElementById('lnkRight');
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
var timer = null;
var W = oUl.offsetWidth / 2;
var left = 0;
function toLeft(){
clearInterval(timer);
timer=setInterval(function(){
left -= 2;
if(left < 0){
oUl.style.left = left % W + 'px';
}
else{
oUl.style.left = (left%W-W)%W + 'px';
}
document.title = left + '--' + oUl.style.left;
},30);
}
function toRight(){
clearInterval(timer);
timer=setInterval(function(){
left += 2;
if(left < 0){
oUl.style.left = left % W + 'px';
}
else{
oUl.style.left = (left%W-W)%W + 'px';
}
document.title = left + '--' + oUl.style.left;
},30);
}
oLeft.onmouseover = function(){
toLeft();
};
oRight.onmouseover = function(){
toRight();
};
toLeft();
};
</script>
</head>
<body>
<div id="box">
<a href="javascript:;" id="lnkLeft">←</a>
<a href="javascript:;" id="lnkRight">→</a>
<ul id="ul1">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
</div>
</body>
無縫滾動效果：
無縫滾動.png
4.無限運動：
無限運動：
一直運動下去谎痢，不停止
原理：遞歸調(diào)用
<style>
*{margin:0; padding:0;}
#div1{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left:0;
top:0;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var arrPos=[
{left:0,top:0},
{left:700,top:0},
{left:200,top:200},
{left:700,top:400},
{left:0,top:400},
];
var iNow = 0;
function next(){
move(oDiv,arrPos[iNow%arrPos.length],{duration:1000,complete:function(){
iNow++;
next();
}});
}
next();
/*for(var i = 0; i < 2; i++){
setTimeout(function () {
alert(i);
},0)
}*/
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
無限運動.png
5.分步運動：
分步運動：
一個接一個出現(xiàn)
原理：定時器里加運動
打字效果：
<style>
*{margin:0; padding:0}
body{
background: #000;
}
span{
font-family: 微軟雅黑;
font-size: 30px;
opacity: 0;
color: #fff;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload = function(){
var str = '自１９７１年建交以來，中秘關系';
for(var i = 0; i < str.length; i++){
var oSpn = document.createElement('span');
oSpn.innerHTML = str.charAt(i);
document.body.appendChild(oSpn);
}
var aSpan = document.getElementsByTagName('span');
var timer = null;
var iNow = 0;
timer = setInterval(function(){
move(aSpan[iNow],{opacity:1});
iNow++;
if(iNow>=aSpan.length){
clearInterval(timer);
}
},100);
};
</script>
</head>
<body>
</body>
分布運動效果：
分布運動.png
