JS运动基础：分享到、侧边栏、淡入淡出、悬浮窗

最新推荐文章于 2022-07-16 08:33:31 发布

o0o0o0o0o0oo

最新推荐文章于 2022-07-16 08:33:31 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/o0o0o0o0o0oo/article/details/106753849

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

运动框架

在开始运动时，关闭已有定时器
把运动和停止隔开(if/else)

缓冲运动

逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数

运动框架实例
例子1：“分享到”侧边栏
—通过目标点，计算速度值
例子2：淡入淡出的图片
------用变量存储透明度

运动终止条件
匀速运动：距离足够近
缓冲运动：两点重合

https://blog.csdn.net/qq_35430000/article/details/80277587

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

分享到：匀速运动
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; 
			background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmouseover=function ()
	{
		startMove(0);
	};
	oDiv.onmouseout=function ()
	{
		startMove(-150);
	};
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=0;
		
		if(oDiv.offsetLeft>iTarget)
		{
			speed=-10;
		}
		else
		{
			speed=10;
		}
		
		if(oDiv.offsetLeft==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	}, 30);
}
</script>
</head>

<body>
<div id="div1">
	<span>分享到</span>
</div>
</body>
</html>

缓冲运动
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
	var oDiv=document.getElementById('div1');
	setInterval(function (){
		var speed=(300-oDiv.offsetLeft)/10;// 速度=(目标值-当前值)/缩放系数
		//当speed>0时，oDiv在目标线左边
		//当speed<0时，oDiv在目标线右边

		//speed=Math.floor(speed);向下取整
		//speed=Math.ceil(speed);向上取整
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		oDiv.style.left=oDiv.offsetLeft+speed+'px';
		
		//document.title=oDiv.offsetLeft+','+speed;
	}, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

右侧底部滑动悬浮框
右边滚动条滑动时，红色块会跑回原来的位置
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
window.onscroll=function ()
{
	var oDiv=document.getElementById('div1');
	
	//scrollTop：网页被卷去的高
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//解决兼容性问题
	
	//clientHeight：可见区域高
	//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
	startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=(iTarget-oDiv.offsetTop)/4;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	}, 30);
}
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

淡入淡出
透明度改变
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; 
		filter:alpha(opacity:30); opacity:0.3;}
		//filter:alpha(opacity:30)
		//opacity:0.3
		//都是设置透明度 设置两个是为了解决兼容性问题
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmouseover=function ()
	{
		startMove(100);
	};
	oDiv.onmouseout=function ()
	{
		startMove(30);
	};
};

var alpha=30;//将透明度保存下来
var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=0;
		
		if(alpha<iTarget)
		{
			speed=10;
		}
		else
		{
			speed=-10;
		}
		
		if(alpha==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			alpha+=speed;
			
			oDiv.style.filter='alpha(opacity:'+alpha+')';
			oDiv.style.opacity=alpha/100;
		}
	}, 30);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

对联
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
window.onscroll=function ()
{
	var oDiv=document.getElementById('div1');
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	
	//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
	//取整是为了防止抖动
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=(iTarget-oDiv.offsetTop)/4;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			//document.title=iTarget;

			document.getElementById('txt1').value=oDiv.offsetTop;
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	}, 30);
}
</script>
</head>

<body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>
</html>

o0o0o0o0o0oo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS运动基础：分享到、侧边栏、淡入淡出、悬浮窗

运动框架在开始运动时，关闭已有定时器把运动和停止隔开(if/else)缓冲运动逐渐变慢，最后停止距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数运动框架实例例子1：“分享到”侧边栏—通过目标点，计算速度值例子2：淡入淡出的图片------用变量存储透明度运动终止条件匀速运动：距离足够近缓冲运动：两点重合分享到：匀速运动<!DOCTYPE HTML><html><head><meta charset=
复制链接

扫一扫