您的位置：首页 > Web前端 > JavaScript

JS实现动画

2015-09-09 18:30 666 查看

实现的效果：当鼠标移动到目标图片时，图片会不断变宽高和透明度，当变化到目标值以后停止；当鼠标移开后，图片做相反的动画（变窄变矮…）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Animation</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
font-size: 14px;
}
#block{
float: left;
width: 200px;
height: 200px;
background-image: url(img.jpg);
filter:alpha(opacity:100);
opacity: 1;
}
</style>

<script type="text/javascript">
window.onload=function(){
var obj = document.getElementById("block");
obj.onmouseover=function(){
startAnim(obj,{"height":400,"width":400,"opacity":30});
}
obj.onmouseout=function(){
startAnim(obj,{"height":200,"width":200,"opacity":100});
}
}

function startAnim(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in json){
var curr = 0;
if(attr=="opacity"){
curr = Math.round(parseFloat(getStyle(obj,attr)*100));
}else{
curr = parseInt(getStyle(obj,attr));
}

obj.speed = (json[attr]-curr)/10;
obj.speed = obj.speed>0?Math.ceil(obj.speed):Math.floor(obj.speed);
if(curr!=json[attr]){
flag = false;
}

if(attr=="opacity"){
obj.style.filter="filter:alpha(opacity:"+(obj.speed+curr)+");"
obj.style.opacity=(obj.speed+curr)/100;
}else{
obj.style[attr] = curr+obj.speed+"px";
}
}

if(flag){
clearInterval(obj.timer);
// alert("hahha");
if(fn){
fn();
}
}

},30);
}

/*
style 只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
currentStyle 可以弥补style的不足，但是只适用于IE。
getComputedStyle 同currentStyle作用相同，但是适用于FF、opera、safari、chrome
*/
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
}
}
</script>

</head>
<body>
<h2 align="center">Animation</h2>
<hr>
<div id="block"></div>
</body>
</html>

该框架可以在以后的开发中复用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航