深度讲解改变单⼀任意值运动框架

最新推荐文章于 2024-03-09 23:33:55 发布

Mr.ZKH

最新推荐文章于 2024-03-09 23:33:55 发布

阅读量79

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100111826

版权

在多物体运动框架的前提下增加⼀个修改样式的参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>深度讲解多物体运动框架</title>
	<style type="text/css">
		#div1,div{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-right:50px;
		}
	</style>
</head>
<body>
	<div id="div1" style="color:black">111</div>
	<div id="div2"></div>
	<div id="div3"></div>

	<script type="text/javascript">
		var oDiv1 = document.getElementById('div1')
		var oDiv2 = document.getElementById('div2')
		var oDiv3 = document.getElementById('div3')

		//给div1添加鼠标移入事件
		oDiv1.onmouseover=function(){
				moving(this,'fontSize',50)
		}

		//给div1添加鼠标移出事件
		oDiv1.onmouseout=function(){
				moving(this,'fontSize',12)
		}

		//给div2添加鼠标移入事件
		oDiv2.onmouseover=function(){
				moving(this,'width',400)
		}

		//给div2添加鼠标移出事件
		oDiv2.onmouseout=function(){
				moving(this,'width',100)
		}
		//给div2添加鼠标移入事件
		oDiv3.onmouseover=function(){
				moving(this,'height',400)
		}

		//给div2添加鼠标移出事件
		oDiv3.onmouseout=function(){
				moving(this,'height',100)
		}

		//oDiv.style.xxx只能获取行内样式 (内联样式)
		//console.log(oDiv1.style.color,'颜色')
		//console.log(oDiv1.style.width,'宽度')
		//获取内样式(写在style标签内部的)   外部样式(通过link引入的样式表)
		//在chrome浏览器下getComputedStyle
		//console.log(getComputedStyle(oDiv1,false)['width'])
		//在ie浏览器下oDiv1.currentStyle

		//写一个方法获取我们需要改变的样式的值
		function getStyleValue(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr]
			}else{
				return getComputedStyle(obj,false)[attr]
			}
		}
		console.log(getStyleValue(oDiv1,'background'))


		function moving(obj,attr,target){
			clearInterval(obj.timer)
			obj.timer=setInterval(function(){
				//定义一个变量接收我们需要改变的样式的值
				var currvalue = parseInt(getStyleValue(obj,attr))
				//变速变量
				var speed = (target-currvalue)/8
				//做向上取整和向下取整处理
				speed = speed>0?Math.ceil(speed):Math.floor(speed)
				if(currvalue==target){
					clearInterval(obj.timer)
				}else{
					obj.style[attr] = currvalue + speed + 'px'
				}
			},30)
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深度讲解改变单⼀任意值运动框架

在多物体运动框架的前提下增加⼀个修改样式的参数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>深度讲解多物体运动框架</title> <style type="text/css"> #div1,div{ w...
复制链接

扫一扫