js小动画效果完整版

来源：互联网发布：防火墙 vlan 网络隔离编辑：程序博客网时间：2024/05/16 02:05

<!DOCTYPE html>

<html>

<head>

#div1{

width: 100px;

height: 100px;

background-color: red;

opacity: 0.3;

}

</style>

</head>

<body>

var oDiv = document.getElementById('div1');

oDiv.onmouseover = function(){

startMove(this,{width:200,height:200,opacity:1});

}

oDiv.onmouseout = function(){

startMove(this,{width:100,height:100,opacity:0.3});

}

</script>

</body>

</html>

/*perfectMove.js*/

//获得标签属性

function getStyle(obj, attr/*属性*/) {

if(obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

function startMove(obj, json, fn) {

clearInterval(obj.time);//防止多次触发事件改变运动

obj.time = setInterval(function() {

//用来判断所有运动都结束

var isStop = true;

for(var attr in json) {

var curr = 0;

var speed = 0;

//如果是不透明度

if(attr == "opacity") {

//取到起始点

curr = parseFloat(getStyle(obj, attr));

//设置速度

speed = (json[attr] - curr) * 100 / 8;

} else {

//取到起始点

curr = parseInt(getStyle(obj, attr));

//设置速度

speed = (json[attr] - curr) / 8;

}

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

//如果有一个属性值未达到目标值的时候

if(curr != json[attr]) {

isStop = false;

}

//如果是不透明度

if(attr == "opacity") {

obj.style[attr] = parseFloat((curr + speed / 100).toFixed(2));

} else {

obj.style[attr] = curr + speed + "px";

}

//当所有属性值到达目标值时，停止

if(isStop) {

clearInterval(obj.time);

if(fn) {

fn();

}

}, 30);

}

1 0