原生js封装css2动画小工具

原创 fremember 随笔 javascript 440阅读 2017-08-27 20:48:26 举报

第一步:原生js获取元素的样式(行间样式、非行间样式)
getStyle函数的参数说明:obj:表示元素对象;name:元素的属性名
例如
obj = document.getElementById('div');或者obj = document.getElementsByTagName('ul')[0];等等。。。
name = 'width';或者name = 'height';等等。。。
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name];
}
}
第二步:封装运动的核心函数
function startMove(obj, json,fnEnd) {
clearInterval(obj.timer);// 每次开始一个薪的定时器前都要清楚上一个定时器
obj.timer = setInterval(function() {// 因为定时器setInterval、setTimeout都是全局的,如果多个元素都需要定时器,那么开、关某个元素的定时器是可能会影响其他元素的定时器,以属性的形式在元素身上添加一个定时器,这样就可以单独控制每个元素的定时器的开、关了
var bStop = true;// 如果都多个属性的时候,需要等到所有的属性动画都结束才会执行传入的参数,假设所有的值都已经到了
for(var attr in json) {
var current = 0;
if(attr == 'opacity') {
// 透明度为小数
// 计算机对小数存储不准确,所以要用四舍五入
current = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
// 整数的时候
current = parseInt(getStyle(obj, attr));
}
speed = (json[attr] - current) / 6;// 定义属性变化的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if(current != json[attr]) {
            bStop = false;
        }

        if(attr == 'opacity') {
            obj.style.filter = 'alpha(opacity:' + (current + speed) + ')';// 兼容处理透明度
            obj.style.opacity = (current + speed) / 100;
        } else {
            obj.style[attr] = current + speed + 'px';
        }
    }
    if(bStop) {
        clearInterval(obj.timer);
        if(fnEnd) fnEnd();// 执行传入的函数
    }
},30);

}
测试demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
<style>
{margin: 0;padding: 0;list-style: none;text-decoration: none;}
.paly{position: relative;margin: 50px auto 0;width: 300px;height: 200px;overflow: hidden;}
.paly ol{position: absolute;right: 0;bottom: 0;z-index: 999;width: 156px;height: 22px;font-size: 0;}
.paly ol li{display: inline-block;width: 30px;height: 20px;line-height: 20px;text-align: center;font-size: 14px;background: #fff;color: orange;border: 1px solid orange;cursor:pointer;}
.paly ol li:nth-of-type(2),.paly ol li:nth-of-type(3),.paly ol li:nth-of-type(4),.paly ol li:nth-of-type(5){border-left: none;}
.paly ol li.active{background: orange;color: #fff;}
.paly ul{position: absolute;left: 0;top: 0;z-index: 100;width: 300px;height: 100px;}
.paly ul li{width: 300px;height: 200px;}
.paly ul li a{display: inline-block;width: 300px;height: 200px;}
.paly ul li a img{display: inline-block;width: 300px;height: 200px;}
</style>
<script src="move.js"></script>
<script>
window.onload = function() {
// 使用json循环规律修改运动框架
var oDiv = document.getElementById('play');
var aBtn = oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUl = oDiv.getElementsByTagName('ul')[0];
var now = 0;
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
now = this.index;
tab(now);
}
}
function tab(now) {
for(var j = 0; j < aBtn.length; j++) {
aBtn[j].className = '';
}
aBtn[now].className = 'active';
// oUl.style.top = -200
this.index + 'px';
startMove(oUl,{'top': -200 now});
}
function next() {
now++;
if(now == aBtn.length) {
now = 0;
}
tab(now);
}
var timer = setInterval(next, 2000);
oDiv.onmouseover = function() {
clearInterval(timer);
}
oDiv.onmouseout = function() {
timer = setInterval(next, 2000);
}
}
</script>
</head>
<body>
<div id="play" class="paly">
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/5.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
move.js
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, json,fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for(var attr in json) {
var current = 0;
if(attr == 'opacity') {
current = Math.round(parseFloat(getStyle(obj, attr))
100);
} else {
current = parseInt(getStyle(obj, attr));
}
speed = (json[attr] - current) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if(current != json[attr]) {
            bStop = false;
        }

        if(attr == 'opacity') {
            obj.style.filter = 'alpha(opacity:' + (current + speed) + ')';
            obj.style.opacity = (current + speed) / 100;
        } else {
            obj.style[attr] = current + speed + 'px';
        }
    }
    if(bStop) {
        clearInterval(obj.timer);
        if(fnEnd) fnEnd();
    }
},30);

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复