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

冷不防 2022-08-20 04:20 95阅读 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>