JS动画——制作鼠标移入移出的时候控件属性的变化

最新推荐文章于 2022-11-14 20:28:40 发布

tyilack_小小黑

最新推荐文章于 2022-11-14 20:28:40 发布

阅读量1.3k

点赞数 1

分类专栏： html javascript 文章标签： javascript 动画

本文链接：https://blog.csdn.net/u014520745/article/details/50611160

版权

javascript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>anim4.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<style type="text/css">
		ul,li{
			list-style: none;
		}
		
		ul li {
			width: 200px;
			height: 100px;
			background: green;
			margin-bottom: 20px;
			filter:alpha(opacity:30);
			opacity:0.3;
			border: 4px solid #000;
			text-align: center;
			font-size: 15px;
		}
	</style>
	
	<script type="text/javascript">
		window.onload = function() {
			var aLi = document.getElementsByTagName("li");
			for(var i = 0; i <aLi.length; i++) {
				aLi[i].timer = null;
				aLi[i].timer2 = null;
				aLi[i].temer3 = null;
				aLi[i].alpha = 30;
				aLi[i].onmouseover = function() {
					var _objthis = this;
					startMove(_objthis, 'width', 400, 100, 30, function() {
						startMove(_objthis, 'height', 200, 30, 15, function(){});
					});
				}
				aLi[i].onmouseout = function() {
					var _objthis = this;
					startMove(_objthis, 'width', 200, 100, 30, function() {
						startMove(_objthis, 'height', 100, 30, 15, function(){});
					});
				}
			}
			
			
			function startMove(obj, mode, iTarget, iAlpha, size, fn) {
				//改变宽度，渐变动画
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					
					var widthStyle = null;
					if(mode == 'width') {
						widthStyle = parseInt(getStyle(obj, 'width'));
					} else if(mode == 'height') {
						widthStyle = parseInt(getStyle(obj, 'height'));
					}
					var speed = (iTarget - widthStyle) / 8;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					if(widthStyle == iTarget) {
						clearInterval(obj.timer);
						
						if(fn) {
							fn();
						}
					} else {
						if(mode == 'width') {
							obj.style.width = widthStyle + speed;
						}
						if(mode == 'height') {
							obj.style.height = widthStyle + speed;
						}
					}
				}, 30);
				
				//改变透明度
				clearInterval(obj.timer2);
				obj.timer2 = setInterval(function() {
					var alphaSpeed = 0;
					if(obj.alpha > iAlpha) {
						alphaSpeed = -10;
					} else {
						alphaSpeed = 10;
					}
					if(obj.alpha == iAlpha) {
						clearInterval(obj.timer2);
					} else {
						obj.alpha += alphaSpeed;
						//IE浏览器
						obj.style.filter = "alpha(opacity:"+obj.alpha+")";
						//IE以外的浏览器
						obj.style.opacity = obj.alpha/100;
					}
				}, 30);
				
				//改变字体大小
				clearInterval(obj.timer3);
				obj.timer3 = setInterval(function() {
					var sizeSpeed = 0;
					var newSize = parseInt(getStyle(obj, 'fontSize'));
					if(newSize > size) {
						sizeSpeed = -1;
					} else {
						sizeSpeed = 1;
					}
					if(newSize == size) {
						clearInterval(obj.timer3);
					} else {
						obj.style.fontSize = parseInt(newSize + sizeSpeed + 'px');
					}
				}, 30);
			}
			
			//获取样式中的属性值
			function getStyle(obj, attr) {
				if(obj.currentStyle) {
					//IE浏览器
					return obj.currentStyle[attr];
				} else {
					//IE以外的其他浏览器
					return getComputedStyle(obj, false)[attr];
				}
			}
		}
	</script>
	
  </head>
  
  <body>
    <ul>
    	<li>Raid</li>
    	<li>Raid</li>
    	<li>Raid</li>
    </ul>
  </body>
</html>

tyilack_小小黑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动画——制作鼠标移入移出的时候控件属性的变化

anim4.html ul,li{ list-style: none; } ul li { width: 200px; height: 100px; background: green; margin-bottom: 20px; filter:alpha(opacity:30); opaci
复制链接

扫一扫

专栏目录