·
一、首先是一段废话
第一次用简书写文章，都说Markdown很好用，于是就了解了下~
感觉确实好好用，大家也用起来~
二、言归正传-今天说一下 js 的动画
js动画无非就是：上下左右移、改透明度、换颜色、变宽高，and so on....
当然这些其实没有像我说的这么轻松哈 - -!
我个人感觉js动画还是很重要的，所以最近就研究了下。
- 首先写个简单的html
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
然后是多物体同时运动函数：startMove()
/*
- obj 指的是DOM对象
- json 指的是 CSS样式
*/
function startMove(obj,option,fn){
var flag = true;//标杆
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in option){
var icur = 0;
if(attr == 'opacity'){
// icur = parseFloat(getStyle(obj,attr))*100;
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (option[attr] - icur)/8;
speed = speed>0?(Math.ceil(speed)):(Math.floor(speed));
if(icur != option[attr]){
flag = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+ (icur + speed) +')';
obj.style.opacity = (icur + speed)/100;
}else{
obj.style[attr] = icur + speed +'px';//obj.style.width = obj.style['width']
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
这里的 “ option ”代表的其实是一个 object，在这里我给它的键和值是CSS样式，如下：
{'opacity':100,'width':201,'height':200,'paddingRight':100}
好了，继续正题..
这里还有一个用于获取元素样式的函数：
function getStyle(obj,attr){
if(obj.currentStyle){ //如果是IE浏览器
return obj.currentStyle[attr];
}else{ //firefox / chrome
return getComputedStyle(obj,false)[attr];
}
}
下面是函数运行代码：
window.onload = function(){
var ali = document.getElementsByTagName('li');
for(var i=0;i<ali.length;i++){
ali[i].onmouseover = function(){
startMove(this,{'opacity':100,'width':201,'height':200});
}
ali[i].onmouseout = function(){
startMove(this,{'opacity':30,'width':200,'height':100});
}
}
}
好了，就这些~
欢迎吐槽O(∩_∩)O~
