运动框架

最新推荐文章于 2024-05-17 11:33:12 发布

montaellis

最新推荐文章于 2024-05-17 11:33:12 发布

阅读量572

点赞数

分类专栏： javascript miaov

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

miaov

13 篇文章 0 订阅

订阅专栏

运动的分享到

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var iTimer = null;
	
	oDiv1.onmouseover = function() {
		startMove(0, 10);
	}
	
	oDiv1.onmouseout = function() {
		startMove(-100, -10);
	}
	
	function startMove(iTarget, iSpeed) {
		clearInterval(iTimer);
			
		iTimer = setInterval(function() {
			
			if (oDiv1.offsetLeft == iTarget) {
				clearInterval(iTimer);
			} else {
				oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
			}
			
		}, 30);
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2">分享到</div>
    </div>
</body>
</html>

淡入淡出的图片

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
#img1 { opacity: 0.3; miaov: 妙味; filter: alpha(opacity=30); margin-left: 200px;}
</style>
<script>
//统一
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oImg = document.getElementById('img1');
	var iTimer = null;
	
	//alert(css(oImg, 'opacity'));	//currentStyle -> getAttribute()
	//alert(oImg.currentStyle['miaov'])
	
	oDiv1.onmouseover = function() {
		startMove(this, 0, 10);
	}
	
	oDiv1.onmouseout = function() {
		startMove(this, -100, -10);
	}
	
	oImg.onmouseover = function() {
		startMove2(this, 100, 10);
	}
	
	oImg.onmouseout = function() {
		startMove2(this, 30, -10);
	}
	
	function startMove(obj, iTarget, iSpeed) {
		clearInterval(iTimer);
			
		iTimer = setInterval(function() {
			
			if (obj.offsetLeft == iTarget) {
				clearInterval(iTimer);
			} else {
				obj.style.left = obj.offsetLeft + iSpeed + 'px';
			}
			
		}, 30);
	}
	
	function startMove2(obj, iTarget, iSpeed) {
		clearInterval(iTimer);
		var iCur = 0;
			
		iTimer = setInterval(function() {
			
			iCur = Math.round(css( obj, 'opacity' ) * 100);	//29.999900000045
			
			if (iCur == iTarget) {
				clearInterval(iTimer);
			} else {
				obj.style.opacity = (iCur + iSpeed) / 100;
				obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>
</head>

<body>
	<div id="div1">
    	<div id="div2">分享到</div>
    </div>
    
    <img src="1.jpg" id="img1" />
</body>
</html>