JS悬浮窗口如何实现

JavaScript016

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

jsp中:

<body>

<div style="position: absolutez-index:90" id="div1">我不动</div>

<div>我动<div>

</body>

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

js中:

我这儿用jquery写。

$(document).ready(function(){

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

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

})

})

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

<div class="fixed" style="left: 22pxpadding-right: 196pxpadding-left: unset">

<a href="javascript:" title="微信扫一扫加好友" class="codepic">

<div><img src="/skin/images/erweima1.png" class="code" style="left: 52pxtop: 0pxright: -196px"/></div>

</a>

<a href="javascript:" title="微信扫一扫加好友" class="codepic1">

<div><img src="/skin/images/erweima2.png" class="code" style="left: 52pxtop: -52pxright: -196px"/></div>

</a>

<a href="javascript:" title="淘宝扫一扫加关注" class="codepic2">

<div><img src="/skin/images/taobao.png" class="code" style="left: 52pxtop: -104pxright: -196px"/></div>

</a>

<div style="width:52pxheight: 52px"><a href="javascript:" title="返回顶部" class="backup"></a></div>

</div>

<!--页尾结束-->

<!--页尾结束-->

<!--弹窗插件开始-->

<link rel="stylesheet" type="text/css" href="/skin/css/jquery.dialogbox.css">

<div id="type-dialogBox"></div>

<script src="/skin/js/jquery.dialogbox.js"></script>

<!--弹窗插件结束-->

修改下class 分别标记,这里加了1和2 ,,,在css里面把 你刚才的代码复制下,分别标识1和2,在找到hover 里面复制改下

火狐浏览器不能像谷歌浏览器那样方便的获取window.event事件,为了兼容,需要做以下处理:

var e = document.all ? window.event : arguments[0] ? arguments[0] : event