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

最新推荐文章于 2020-06-03 15:43:42 发布

deeerforest

最新推荐文章于 2020-06-03 15:43:42 发布

阅读量385

点赞数

分类专栏： javascript 框架

本文链接：https://blog.csdn.net/deeerforest/article/details/52022652

版权

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

框架

2 篇文章 0 订阅

订阅专栏

（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.οnlοad=function(){
	var li=document.getElementById("li1");
	li.οnmοuseοver=function(){
		move(li,'width',400,function(){
			move(li,'height',200,function(){
				move(li,'opacity',100);
			});
		});
	}
	li.οnmοuseοut=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.οnlοad=function(){
	var li=document.getElementById("li1");
	li.οnmοuseοver=function(){
		move(li,{width:400,height:200,opacity:100});
	}
	li.οnmοuseοut=function(){
		move(li,{width:200,height:100,opacity:30});
	}
	
}</script>
</head>
<body>
  <ul>
    <li id="li1"></li>
  </ul>
</body>