js运动技术

一时失言乱红尘 2024-02-17 23:10 51阅读 0赞

1、“分享栏”：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {width: 150px;height: 200px;background: red;position: absolute;left: -150px;}
    			#div1 span{width: 20px;height: 60px;position: absolute;top: 70px;right: -20px;
    			background: green;line-height: 20px;}
    		</style>
    		
    		<script>
    			window.onclick = function(){
    				var oDiv = document.getElementById("div1");
    			
                    oDiv.onmouseover = function(){
                    	startMove(10);
                    }
    				
    				oDiv.onmouseout = function(){
    					startMove(-10);
    				}
    			}
    			
    			var timer = null;
    			
    			function startMove (speed){
    				clearInterval(timer);
    				var oDiv = document.getElementById("div1");
    				timer = setInterval(function(){
    				if(speed > 0 && oDiv.offsetLeft == 0){
    					clearInterval(timer);
    				}else if(speed < 0 && oDiv.offsetLeft == -150){
    					clearInterval(timer);
    				}else {
    					oDiv.style.left = oDiv.offsetLeft + speed + 'px';
    				 }
    				},30);
    			}
    				
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<span>分享到</span>
    		</div>
    	</body>
    </html>

2、淡入淡出：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;
    			filter: alpha(opacity:30) ;opacity: 0.3;}  //透明度浏览器兼容问题,前者支持IE; 后者支持FF,Chrome
    		</style>
    	</head>
    	<script>
    		window.onclick = function(){
    		  var oDiv= document.getElementById("div1");
    		  
    		  oDiv.onmouseover = function(){
    		  	startMove(100);
    		  }
    		  
    		  oDiv.onmouseout = function(){
    		  	startMove(30);
    		  }
    		}
    		
    		var timer = null;
    		var alpha = 30;
    		function startMove(iTarget){
    			var oDiv = document.getElementById("div1");
    			var speed = 0;
    			clearInterval(timer);
    			timer = setInterval(function(){
    				if(alpha < iTarget){
    					speed = 10;
    				}
    				else {
    					speed = -10;
    				}
    				
    				if(alpha == iTarget){
    					clearInterval(timer);
    				}
    				else {
    					alpha += speed; 
    					oDiv.style.filter = 'alpha(opacity:'+ alpha +')';
    					oDiv.style.opacity = alpha/100;
    				}
    			},30);
    		}
    	</script>
    	<body>
    		<div id = "div1">
    		</div>
    	</body>
    </html>