js运动技术

最新推荐文章于 2024-11-16 20:14:35 发布

柏油

最新推荐文章于 2024-11-16 20:14:35 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏： # JAVA WEB

本文链接：https://blog.youkuaiyun.com/ldw201510803006/article/details/74967680

JAVA WEB 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS及JavaScript实现网页上的动态效果，包括元素的位置变化与透明度渐变。通过具体代码实例，展示了当鼠标悬停时，一个带有“分享到”文字的红色框如何从页面左侧滑出，以及另一个红色方块如何实现淡入淡出的效果。

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>