JavaScript 动画 1---速度动画
JavaScript 动画 1---速度动画
奋斗的小芋头 发表于8个月前
JavaScript 动画 1---速度动画
  • 发表于 8个月前
  • 阅读 24
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 侧边广告

1、描述

鼠标悬浮则 10px/30ms向右运动 、鼠标离开 10px/30ms 向左运动/

2、要点

隐藏部分left值设为 -200 。向右运动时,offsetLeft目标为0,向左运动 offsetLeft目标为-200

假设 obj 为某个 HTML 控件

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

style.left: 
定位元素与包含它的矩形左边界的偏移量

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
	body,div,span{
		margin: 0;
		padding: 0;
	}
	#div1{
		width: 200px;
		height:200px;
		background:red;
		position: relative;
		left: -200px;
	}
	#div1 span{
		width: 20px;
		height: 100px;
		background: blue;
		position: absolute;
		left: 200px;
		top: 50px;
	}
	</style>
	
	<script>
	var timer = null;
		window.onload = function(){
			
			var cDiv1 = document.getElementById('div1');
			
			//鼠标移入
			cDiv1.onmouseover = function(){
				startMove(10,0); //移动函数
			}
			
			//鼠标移出
			cDiv1.onmouseout = function(){
			    startMove(-10,-200); //移动函数
			}
			
			/**
			 * 
			 * @param {速度} speed
			 * @param {目标} iTarget
			 */
			function startMove(speed,iTarget){
				
				clearInterval(timer); //为了避免定时器多次触发
				
				var cDiv1 = document.getElementById('div1');
				timer = setInterval(function(){
					if(cDiv1.offsetLeft == iTarget){
						clearInterval(timer); //停止定时器
					}else{
					cDiv1.style.left = cDiv1.offsetLeft+speed+'px'; //offsetLeft当前位置的值
					}
				},30)
			}//每30毫秒动一下
		}
		
		
	</script>
	</head>
	<body>
		<div id="div1">
			<span id="share">侧边广告</span>
		</div>
	</body>
</html>

 

共有 人打赏支持
粉丝 2
博文 79
码字总数 129412
×
奋斗的小芋头
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: