运动：多图片展开、无缝滚动、无限运动、分步运动

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容