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

最新推荐文章于 2025-05-26 12:28:00 发布

原创最新推荐文章于 2025-05-26 12:28:00 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

框架

2 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现元素在鼠标悬停时的动态效果，包括尺寸变化和透明度渐变。通过两个实例展示了不同变化顺序的效果，并采用JSON格式来简化属性设置。

（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.