js浮动侧边拦

最新推荐文章于 2021-07-14 18:02:34 发布

xidianyueyong

最新推荐文章于 2021-07-14 18:02:34 发布

阅读量369

点赞数 1

分类专栏： html5 js小部件，前端文章标签： javascript 浮动的侧边拦

本文链接：https://blog.csdn.net/xidianyueyong/article/details/76692493

版权

html5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

js小部件，前端

6 篇文章 0 订阅

订阅专栏

利用javascript 写网页动态浮动的侧边拦

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
	#div1
	{
		width:100px;
		height:100px;
		background-color:red;
		position:absolute;
		left:-100px;
	}
	#enjoy
	{
		width:20px;
		height:60px;
		line-height:15px;
		color:#CF3;
		position:absolute;
		left:100px;
		background-color:#C93;
	}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动侧边拦</title>
<script type="text/javascript" language="javascript" src="heightmove.js"></script>
<script type="text/javascript">
	
var timer1;
function enjoymove(ispeed,itarget)
{
	var oDiv=document.getElementById("div1");
	clearInterval(timer1);
	
	timer1=setInterval(function(){
		if(itarget>=0)
		{

			if(oDiv.offsetLeft>=itarget)
			{
				clearInterval(timer1);
			}
			else
			{
				oDiv.style.left=oDiv.offsetLeft+ispeed+'px';	
			}
		}
		else
		{
			
			if(oDiv.offsetLeft<=itarget)
			{
				clearInterval(timer1);
			}
			else
			{
				oDiv.style.left=oDiv.offsetLeft+ispeed+'px';	
			}
		}
		
	},30);
	
};
window.onload,window.οnscrοll=function()
{
	var oDiv=document.getElementById("div1");
	
	oDiv.οnmοuseοver=function()
	{
		enjoymove(10,0);
	}
	oDiv.οnmοuseοut=function()
	{
		enjoymove(-10,-100);
	}
	var oscroll=document.documentElement.scrollTop||document.body.scrollTop;
	var ch=document.documentElement.clientHeight||document.body.clientHeight;
	var itarget=oscroll+(ch-oDiv.offsetHeight)/2+'px';
	heightmove(oDiv,itarget);
		
};
</script>
</head>
<body   style="height:2000px;">
    <div id="div1">
    <span id="enjoy">分享到</span>
    </div>
</body>
</html>

上下移动的js：

var timer=null;
function heightmove(id,itarget)
{
		clearInterval(timer);
		timer=setInterval(function(){
		var ispeed=(parseInt(itarget)-id.offsetTop)/8;
		ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
		//id.innerHTML=ispeed+"<br/>";
		if(id.offsetTop>=itarget)
		{
			clearInterval(timer);	
		}
		else
		{
			//alert(parseInt(itarget));
			id.style.top=id.offsetTop+ispeed+'px';
		}
		
		
	},30);	
}

xidianyueyong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js浮动侧边拦

利用javascript 写网页动态浮动的侧边拦代码如下： #div1 { width:100px; height:100px; background-color:red; position:absolute; left:-100px; } #enjoy { width:20px; height:60px; line-height:15px;
复制链接

扫一扫