html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css属性运动框架</title>
<style>
body,div{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background: yellowgreen;
margin-bottom: 20px;
filter:alpha(opacity:30);
opacity: 0.3;
border:4px solid #666666;
}
</style>
<script src="js/move.js"></script>
<script>
window.onload=function(){
var Li1=document.getElementById('li1');
var Li2=document.getElementById('li2');
var Li3=document.getElementById('li3');
var Li4=document.getElementById('li4');
var Li5=document.getElementById('li5');
Li1.onmouseover=function(){
startMove(this,{height:200});
}
Li1.onmouseout=function(){
startMove(this,{height:100});
}
Li2.onmouseover=function(){
startMove(this,{width:400});
}
Li2.onmouseout=function(){
startMove(this,{width:200});
}
Li3.onmouseover=function(){
startMove(this,{opacity:100});
}
Li3.onmouseout=function(){
startMove(this,{opacity:30});
}
Li4.onmouseover=function(){
startMove(Li4,{width:400},function(){
startMove(Li4,{height:200},function(){
startMove(Li4,{opacity:100},function(){
});
});
});
}
Li4.onmouseout=function(){
startMove(Li4,{opacity:30},function(){
startMove(Li4,{height:100},function(){
startMove(Li4,{width:200});
});
});
}
Li5.onmouseover=function(){
startMove(Li5,{width:400,height:200,opacity:100});
}
Li5.onmouseout=function(){
startMove(Li5,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1">高动画</li>
<li id="li2">宽动画</li>
<li id="li3">透明度动画</li>
<li id='li4'>高宽透明度链式动画</li>
<li id='li5'>高宽透明度同时动画</li>
</ul>
</body>
</html>
引入的JS代码,运动框架move.js
//运动
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag=true;//标杆,假设所有运动都达到了目标值
for(var attr in json)
{
//1.去当前的值
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat获取小数.Math.round四舍五入
} else {
icur = parseInt(getStyle(obj, attr)); //parseInt获取整数
}
//2.算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测属性动画是否全部达到目标值
if(icur !== json[attr])
{
flag=false;//如果不是所有的动画都达到目标值，标杆设为false
}
if(attr == 'opacity')
{
obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
obj.style.opacity = (icur + speed) / 100;
}
else
{
obj.style[attr] = icur + speed + 'px';
}
}
//在动画结束的时候检测是否有回调函数,如果检测到有回调函数，执行
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
//获取对象属性
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE
}
else{
return getComputedStyle(obj,false)[attr];//火狐 chrome
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。