JS悬浮窗口如何实现

2023-02-21 07:14:02JavaScript010

JS悬浮窗口如何实现,第1张

jsp中：

<body>

</body>

//有的将position设置成fixed,我试了试效果不如position好,设置z-index，向里的深度，我这儿设置90，你要覆盖几个div，设置数大于那个数就行。

js中：

我这儿用jquery写。

$(document).ready(function(){

$(window).scroll(function(){//滚动时触发函数

$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。

})

导入jquery库，效果就出来了。

var class_name=function()

{

this.top=500//与顶部距离

//左侧广告

this.l_width=100//宽

this.l_height=100//高

this.l_left=100//与左侧的距离

this.l_src="http://img.baidu.com/img/logo-zhidao.gif"//图片路径

this.l_url="http://www.baidu.com/"//图片链接地址

//右侧广告

this.r_width=100//宽

this.r_height=100//高

this.r_right=100//与右侧的距离

this.r_src="http://img.baidu.com/img/logo-zhidao.gif"//图片路径

this.r_url="http://www.baidu.com/"//图片链接地址

}

var c=new class_name()

document.write('<div id="xf_left_gg" style="position:absolutewidth:'+c.l_width+'pxheigth:'+c.l_height+'pxleft:'+c.l_left+'pxtop:'+c.top+'px"><a href="'+c.l_url+'" target="_blank"><img src="'+c.l_src+'" width="'+c.l_width+'" height="'+c.l_height+'" border="0"></a></div>')

document.write('<div id="xf_right_gg" style="position:absolutewidth:'+c.r_width+'pxheigth:'+c.r_height+'px" right:'+c.r_right+'pxtop:'+c.top+'px"><a href="'+c.l_url+'" target="_blank"><img src="'+c.l_src+'" width="'+c.l_width+'" height="'+c.l_height+'" border="0"></a></div>')

function lxs_xf()

{

var t=(document.body.scrollTop>0)?(parseInt(document.body.scrollTop)+c.top):c.top

$("xf_left_gg").style.left=c.l_left+"px"

$("xf_left_gg").style.top=t+"px"

$("xf_right_gg").style.right=c.r_right+"px"

$("xf_right_gg").style.top=t+"px"

}

function $(id){return document.getElementById(id)}

if(window.attachEvent)

{

window.attachEvent("onload",lxs_xf)