怎样在网页中加上浮动图标？_IT百科

脚本说明:

第一步:把如下代码加入<head>区域中

<!--

hexa = new Array(16)

for(var i = 0i <10i++) hexa[i] = i

hexa[10]="a"

hexa[11]="b"

hexa[12]="c"

hexa[13]="d"

hexa[14]="e"

hexa[15]="f"

function hex(i)

{

if (i <0) return "00"

else if (i >255) return "ff"

else return "" + hexa[Math.floor(i/16)] + hexa[i%16]

}

function setbgColor(r, g, b)

{

var hr = hex(r)

var hg = hex(g)

var hb = hex(b)

document.bgColor = "#"+hr+hg+hb

}

function fade(sr, sg, sb, er, eg, eb, step)

{

for(var i = 0i <= stepi++)

{

setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),

Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *

((step-i)/step) + eb * (i/step)))

}

//-->

</SCRIPT>

第二步:把如下代码加入<body>区域中

<!--

for(i=1i<=10i++)

{

document.write("<div id=\"star"+i+"\" style=\"position:absolutetop:80%left:"+(Math.floor(Math.random()*5)+9*(i-1))+"%width:21height:21visibility:hidden\"><dd><img src=\"star.gif\" WIDTH=\"21\" HEIGHT=\"21\"></dd></div>")

}

function randommove()

{

for(i=1i<=10i++)

eval("star"+i+".style.top=get_top()")

}

function get_top()

{

var t,t2

t=Math.floor(Math.random()*380)

t2=t.toString()+"px"

return(t2)

}

function set_visible()

{

for(i=1i<=10i++)

eval("star"+i+".style.visibility=\"visible\"")

banner.style.visibility="visible"

friends.style.visibility="visible"

high(pic)

}

function bar_show()

{ bar.style.visibility="visible"

}

function start_it()

{

fade(255,255,255, 0,0,0, 50)

setInterval("randommove()",1000)

set_visible()

setTimeout("bar_show()",2000)

}

function end_it()

{

banner.style.visibility="hidden"

friends.style.visibility="hidden"

pic.style.visibility="hidden"

fade(0,0,0,255,255,255,10)

}

-->

</SCRIPT>

第三步:把<body>改为

<BODY aLink=#ffffff bgColor=#ffffff link=#ffffff onload=start_it()

onunload=end_it() text=#ffffff topMargin=0 vLink=#ffffff>

1、首先创建一个名为“topwindows.html”的网页文件，其中的内容将被展示主页浮动窗口中。

2、网页浮动窗口对应的部分代码如下所示：

<html>

<style>

.img_wd{

font-size:30padding-top:20px

text-align:leftpadding-left:70pxline-height:40px

background:url(110.jpg) top center no-repeat

width:252pxheight:127pxline-heiht:10px

text-align:center

font-family:"微软雅黑,仿宋,楷体,黑体"

color: #fafafa

text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px

}

</style>

<body>

青春就是这么任性！<Br>

Younger GOOD

</div>

</body>

</html>

3、接着将如图所示的代码添加到主页<Body>和</Body>之间：

其中标签"fdck”中的属性SRC指向浮动窗口的网页地址。

</iframe>

</div>

4、接下来需要添加浮动窗口随时运行的行为，对应代码如下：

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

img.style.top = yPos

function changePos() {

width = document.body.clientWidth

height = document.body.clientHeight

Hoffset = img.offsetHeight

Woffset = img.offsetWidth

img.style.left = xPos + document.body.scrollLeft

img.style.top = yPos + document.body.scrollTop

if (yon) {yPos = yPos + step}

else {yPos = yPos - step}

if (yPos <0) {yon = 1yPos = 0}

if (yPos >= (height - Hoffset)) {yon = 0

yPos = (height - Hoffset)}

if (xon) {xPos = xPos + step}

else {xPos = xPos - step}

if (xPos <0) {xon = 1xPos = 0}

if (xPos >= (width - Woffset)) {xon = 0xPos = (width - Woffset)}

}

function start() {

img.style.visibility = "visible"

interval = setInterval('changePos()', delay)}

start()

</script>

5、在此需要说明一点，需要将以上所有代码（包括JS脚本）全部放置在<body>和</body>之间。

6、最后查看一下浮动窗口的效果，会发现浮动窗口在网页中不断的移动，当鼠标悬停其上时会停止移动，点击“隐藏”按钮将自动隐藏悬浮窗口。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11885424.html

怎样在网页中加上浮动图标？

发表评论

评论列表（0条）