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、布局转化
将浮动布局转化成定位布局
2、鼠标移入修改每个li 的left/top
3、鼠标移出修改每个li 的left/top为 数组中的值
实例：
<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');
//布局转化
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元素，是一件非常耗性能的事情
数字规律：
向左滚动： 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.无限运动：
无限运动：
一直运动下去，不停止
原理：递归调用
<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.分步运动：
分步运动：
一个接一个出现
原理：定时器里加运动
打字效果：
<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
