首页 > 代码库 > 运动框架学习

运动框架学习

2024-10-18 04:28:39   210人阅读

move.js

		function getStyle(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr];
			}else{
				return getComputedStyle(obj,false)[attr];
			}
		}
		//运动框架
		function startMove(obj,json,fn){
			clearInterval(obj.timer);
			obj.timer = setInterval(function(){
			var flag = true;
			for(var attr in json){
					//1.取当前的值
					var icur = 0;
					if(attr == ‘opacity‘){
						icur = Math.round(parseFloat(getStyle(obj,attr))*100);
					}else{
						icur = parseInt(getStyle(obj,attr));
					}
					//2.算速度
					var speed = (json[attr] - icur)/8;
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					//3.检测停止
					if(icur != json[attr]){
						flag = false;
					}
						if(attr == ‘opacity‘){
								obj.style.filter = ‘alpha(opacity:‘+icur+speed+‘)‘;
								obj.style.opacity = (icur+speed)/100;
						}else{
						obj.style[attr] = icur+speed+"px";
						}
			}	
					if(flag){
						clearInterval(obj.timer);
						if(fn){
							fn();
						}
					}

				},10);
		}

 sport.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>淘宝效果</title>
	<style type="text/css">
		div.all { padding: 10px;border: 1px solid　blue; background: #ccc;width: 250px; position: relative;top:100px;left: 40%;float: left;}
		div#img { width: 40px;height: 50px; border: 1px solid #000;text-align: center; margin: 20px;float: left;position: relative;overflow: hidden;}
		img { width: 25px;height: 25px;margin: 2px auto;display: block;position: absolute;top: 5px;
			left: 7px;}
			span{ position: absolute;bottom: 0px;left: 3px; }
	</style>
	<script type="text/javascript" src="http://www.mamicode.com/move.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var imgs = document.getElementsByTagName(‘img‘);
			var divs = document.getElementsByTagName(‘div‘);
			
			for( var i = 0; i<imgs.length; i++){
				(function(i){
					//效果onmouseenter只触发一次，onmouseover可以同时触发多次
					divs[i+1].onmouseenter = function(){
						startMove(imgs[i],{top:-25},function(){
						imgs[i].style.top = "20px";
						startMove(imgs[i],{top:0});	
						});
					}
				})(i);
			}
			
		}
	</script>
</head>
<body>
<div class="all">
	<div id="img"><img src="http://www.mamicode.com/1.jpg" id="img1"><span>大毛</span></div>
	<div id="img"><img src="http://www.mamicode.com/2.jpg" id="img2"><span>二毛</span></div>
	<div id="img"><img src="http://www.mamicode.com/3.jpg" id="img3"><span>三毛</span></div>
	<div id="img"><img src="http://www.mamicode.com/4.jpg" id="img4"><span>四毛</span></div>
	<div id="img"><img src="http://www.mamicode.com/5.jpg" id="img5"><span>五毛</span></div>
	<div id="img"><img src="http://www.mamicode.com/1.jpg" id="img6"><span>六毛</span></div>

</div>
</body>
</html>

 技术分享

运动框架学习


联系
我们