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

最新推荐文章于 2019-04-07 20:39:00 发布

BlogChat

最新推荐文章于 2019-04-07 20:39:00 发布

阅读量147

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_39134861/article/details/79612428

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

                <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>

BlogChat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多物体不同运动框架(标签样式)

&lt;style&gt; #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;} &lt;/...
复制链接

扫一扫