39、JavaScript的运动----淡入淡出的图片

分手后的思念是犯贱 2022-09-21 13:07 157阅读 0赞

1、JavaScript的运动----淡入淡出的图片

1.1 透明度的兼容性写法

1.2 利用变量来保存透明度的变化

1.3 代码

<!DOCTYPE html>
    <html>
    
    	<head>
    		<style>
    			/*用于兼容浏览器*/
    			
    			#img1 {
    				/*IE*/
    				filter: alpha(opacity: 30);
    				/*FF和Chrome*/
    				opacity: 0.3;
    			}
    		</style>
    		<meta charset="UTF-8">
    		<title>淡入淡出的图片</title>
    		<script type="text/javascript">
    			window.onload = function() {
    				var oImg = document.getElementById('img1');
    				oImg.onmouseover = function() {
    					startMove('img1', 100);
    				}
    				oImg.onmouseout = function() {
    					startMove('img1', 30);
    				}
    			}
    			var timer = null;
    			//因为获取图片的透明度比较难,所以利用一个变量来保存图片的透明度
    			var alpha = 30;
    			/**
    			 * 
    			 * @param {Object} objId 运动对象的id
    			 * @param {Object} iTarget 运动的目标数值
    			 */
    			function startMove(objId, iTarget) {
    				var oImg = document.getElementById(objId);
    				clearInterval(timer);
    				timer = setInterval(function() {
    					var iSpeed = 0;
    					//根据目标点的位置,计算速度
    					if (alpha < iTarget) {
    						iSpeed = 1;
    					} else {
    						iSpeed = -1;
    					}
    					if (alpha == iTarget) {
    						clearInterval(timer);
    					} else {
    						alpha += iSpeed;
    						oImg.style.filter = 'alpha(opacity:' + alpha + ')';
    						oImg.style.opacity = alpha / 100;
    					}
    				}, 30);
    			}
    		</script>
    	</head>
    
    	<body>
    		<img id="img1" src="Desert.jpg" />
    	</body>
    
    </html>

1.4 用到的图片

![20160620163055605][]

[20160620163055605]: /images/20220721/7f84418b47234cf487ca13f8857d8864.png