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

javascript动画框架实现宽高透明度变化

2016-07-25 12:39 585 查看

（1）实现样式依次变化本例为实现一个块，当鼠标移入时，先宽度增加，再高度变高，最后改变透明度；当鼠标移出时，先宽度减小，再高度变低，最后改变透明度。

<!DOCTYPE html>
<head>
<title>untitled</title>
<meta charset="utf-8" />
<style>*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
border:1px solid #669933;
filter:alpha(opacity:30);
opacity:0.3;
}</style>
<script src="move.js"></script>
<script>window.onload=function(){
var li=document.getElementById("li1");
li.onmouseover=function(){
move(li,'width',400,function(){
move(li,'height',200,function(){
move(li,'opacity',100);
});
});
}
li.onmouseout=function(){
move(li,'opacity',30,function(){
move(li,'height',100,function(){
move(li,'width',200);
});
});
}
}</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>

2)本例为实现一个块，当鼠标移入时，宽高透明度同时变化，用到json.
<!DOCTYPE html>
<head>
<title>untitled</title>
<meta charset="utf-8" />
<style>*{margin:0;padding:0;}
ul li{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#CD3278;
margin-bottom:20px;
border:1px solid #669933;
filter:alpha(opacity:30);
opacity:0.3;
}</style>
<script src="move1.js"></script>
<script>window.onload=function(){
var li=document.getElementById("li1");
li.onmouseover=function(){
move(li,{width:400,height:200,opacity:100});
}
li.onmouseout=function(){
move(li,{width:200,height:100,opacity:30});
}

}</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>

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

标签：

相关文章推荐

新的分享

章节导航