JS控制HTML元素的显示和隐藏+网站浮标

最新推荐文章于 2022-06-05 15:17:59 发布

伍六七AI编程

最新推荐文章于 2022-06-05 15:17:59 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Prepared/article/details/78204893

本文介绍使用JavaScript来控制网页中DIV元素的位置及显示隐藏状态的方法。通过具体实例展示了如何利用DOM操作实现元素的动态定位，并提供了浮动图标的具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）JS控制div位置，举例：浮标

img2.style.left = xPos + document.body.scrollLeft;
img2.style.top = yPos + document.body.scrollTop;

2）js控制DIV的显示和隐藏

document.getElementById("img2").visibility = "visible";
document.getElementById("img2").visibility = "hidden";

还可以：

document.getElementById("img2").style.display= "none"
document.getElementById("img2").style.display= "block"

浮标代码：

<html>
<head>
<title></title>

</head>
<body>
  		<!-- 浮动图标 -->
		<div id="img2" style="position:absolute; left:0px; top:0px;">
			
			<a href="http://sea.weather.gov.cn/weatherRisk/" target="_blank"><img
				src="logo.jpg" height="50px" width="50px"
				border="0"></a>
				<a href="javascript:void(0);" onclick="hideDiv()" ><img src="error.png" style="padding-top:0px;"/></a>
				<br>
				风险评估
		</div>
		<!-- 浮动图标 -->
		<script type="text/javascript">
function hideDiv(){
	document.getElementById('img2').style.visibility="hidden";
};
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var img2 = document.getElementById("img2");
img2.style.top = yPos;

function changePos() {
	width = document.body.clientWidth;
	height = document.body.clientHeight;
	Hoffset = img2.offsetHeight;
	Woffset = img2.offsetWidth;
	img2.style.left = xPos + document.body.scrollLeft;
	img2.style.top = yPos + document.body.scrollTop;
//或者
 //document.getElementById('img2').style.top = yPos +"px";
	//document.getElementById('img2').style.left = xPos + "px";
	//img2.style.top=110;
	if (yon) {
		yPos = yPos + step;
		//alert(yPos);
	}
	else {
		yPos = yPos - step;
		//alert(yPos);
	}
	if (yPos < 0) {
		yon = 1;
		yPos = 0;
	}
	if (yPos >= (height - Hoffset)) {
		yon = 0;
		yPos = (height - Hoffset);
	}
	if (xon) {
		xPos = xPos + step;
	}
	else {
		xPos = xPos - step;
	}
	if (xPos < 0) {
		xon = 1;
		xPos = 0;
	}
	if (xPos >= (width - Woffset)) {
		xon = 0;
		xPos = (width - Woffset);
	}
}
function www() {
	img2.visibility = "visible";
	interval = setInterval('changePos()', delay);
}
www();

</script>
</body>
</html>


参考：http://www.cnblogs.com/unpolishedgem/p/3247098.html