js多物体不同运动框架(标签样式)

                <style>
			#div1{width:50px; height: 50px;float:left;margin: 10px;
			background: red;border: 5px solid black;font-size: 14px;
			filter: alpha(opacity:30);opacity: 0.3;}
		</style>
		<!--网站中的运动框架:将不同运动封装成一个方法,
		(能实现的运动有变宽、变高、变字体大小、变透明度、变边框等等,
		大多是给标签添加的样式,)-->
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
					oDiv.onmouseover = function(){
						startMove(this,'opacity',100);
					}
					oDiv.onmouseout = function(){
						startMove(this,'opacity',30);
					}
			}
			
			// 获取当前样式
			function getStyle(obj,name){
				//解决获取当前样式在不同浏览器上的兼容问题
				if(obj.currentStyle){
					//IE7以下低版本浏览器
					return obj.currentStyle[name];
				}else{
					//火狐谷歌等高版本浏览器
					return getComputedStyle(obj,false)[name];
				}
			}
			
			var timer =null;//创建定时器
			function startMove(obj,attr,iTarget){
				clearInterval(obj.timer);//清除旧定时器
				obj.timer = setInterval(function (){
					var cur = 0;
					//单独处理透明度样式->习惯处理100这样的透明度
					//这个是原来的,只有宽和高啥的,没有透明度
					if(attr == 'opacity'){
						cur = parseFloat(getStyle(obj,attr))*100;
						
					}else{
						//除透明度以外,其他样式
						cur = parseInt(getStyle(obj,attr));
					}
					//获取当期速度,并将其取整,避免不能精准到达指定位置
					var speed = (iTarget - cur)/6;
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					
					if(cur == iTarget){
						clearInterval(obj.timer);//到达位置停止定时器
					}else{
						if(attr == "opacity"){//改变透明度的样式
							obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity = (cur+speed)/100;
						}else{//改变除透明度以外的其他样式
							obj.style[attr] = cur+speed+'px';
							
						}
					}
				},30);
				}
			//以上代码基本上适合所有运动,只要调用startMove方法,并给他传上参数,就能实现你想要的简单运
</script>
	</head>
	<body>
		<div id="div1"></div> 
	</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值