javascript实现div浮动在网页最顶上并带关闭按钮效果实例

JavaScript06

javascript实现div浮动在网页最顶上并带关闭按钮效果实例,第1张

复制代码

代码如下:

<html>

<head>

<title>javascript实现div浮动在网页最顶上并带关闭按钮效果实例</title>

<style

type="text/css">

<!--

body

{

margin:

0pxpadding:

0pxtext-align:

center}

TD

{FONT-SIZE:

12px

COLOR:

#333}

#toubiao

{BORDER-BOTTOM:

#e2e2e2

1px

solid}

-->

</style>

</head>

<body>

<SCRIPT>

function

toueme(){

document.getElementById("toubiao").style.display="none"

}

</SCRIPT>

<DIV

id=toubiao>

<table

width="100%"

border="0"

cellspacing="0"

cellpadding="5">

<tr>

<td

width="82%"><a

target="_blank"

href="/">

<span

style="text-decoration:

none"><font

color="#808080">悬浮在网页顶部可关闭的工具条(浮动层),点击可以关闭哦</font></span></a></td>

<td

width="14%"

align="right"><a

style="CURSOR:

hand"

onClick=toueme()>

<img

src="../img/close3.gif"

hspace="6"

border=0></a></td>

</tr>

</table>

</DIV>

</body>

</html>

</td>

</tr>

</table>

你好 这个叫做 锚链接 并不是js的效果

Exp:

1、首先我们在网页body内最上面添加一个<span id="top" name="top"></span>

2、我们再到body内,需要出现点击后转到顶部位置添加,<a href="#top">回到顶部</a>

这样就可实现点击“回到顶部”即可本页内快速浏览到网页顶部位置。

希望能帮到你 谢谢

<html>

<head>

<script language="javascript">

function moveImage(){

document.getElementById("div1").style.left = 0

document.getElementById("div1").style.top = document.body.scrollTop

}

var t1 = window.setInterval("moveImage()",100)

</script>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>图片位移</title>

</head>

<body bgcolor="#CCCC00">

<div id="div1" style="position:absolute"><img src="images/hair.png" id="image1" /></div>

</body>

</html>

上面的是你的要求。下面是一个小例子。可以实现图片在页面上滚动。

<script language="javascript">

var left = 0

var top = 0

function moveImage(){

if(left >(document.body.clientWidth)-(document.getElementById("div1").offsetWidth)-4){

left = -left

}

if(top >(document.body.clientHeight)-(document.getElementById("div1").offsetHeight)-4){

top = -top

}

left += 4

top += 4

document.getElementById("div1").style.left = Math.abs(left)

document.getElementById("div1").style.top = Math.abs(top)

}

var t1 = window.setInterval("moveImage()",100)

</script>