页面浮窗简单实现

最新推荐文章于 2025-07-31 14:42:07 发布

u011287511

最新推荐文章于 2025-07-31 14:42:07 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html

本文链接：https://blog.youkuaiyun.com/u011287511/article/details/72818544

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

html

8 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现页面浮窗。通过设置样式和JavaScript事件监听，实现在页面滚动时保持浮窗的位置。根据屏幕高度设置了不同分辨率下浮窗的定位。

1.html代码：

</div>

2.js代码：

$(function(){
$("#ewm-close").click(function(){
$(this).parent().hide();
});

//相对固定悬浮窗位置
function scrollx(p) {
var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer;
if (o) {
cssPub = ";position:"+(p.f&&!ie6?'fixed':'absolute')+";"+(p.t!=undefined?'top:'+p.t+'px;':'bottom:0;');
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssPub + ('right:'+p.r+'px;');
} else {
o.style.cssText += cssPub + ('margin-left:'+p.l+'px;');
}
if(p.f&&ie6){
cssTop = ';top:expression(documentElement.scrollTop +'+(p.t==undefined?dd.clientHeight-o.offsetHeight:p.t)+'+ "px" );';
cssRight = ';right:expression(documentElement.scrollright + '+(p.r==undefined?dd.clientWidth-o.offsetWidth:p.r)+' + "px")';
if (p.r != undefined && p.l == undefined) {
o.style.cssText += cssRight + cssTop;
} else {
o.style.cssText += cssTop;
}
dd.style.cssText +=';background-image: url(about:blank);background-attachment:fixed;';
}else{
if(!p.f){
w.onresize = w.onscroll = function(){
clearInterval(timer);
timer = setInterval(function(){
//双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0
var st = (dd.scrollTop||db.scrollTop),c;
c = st - o.offsetTop + (p.t!=undefined?p.t:(w.innerHeight||dd.clientHeight)-o.offsetHeight);
if(c!=0){
o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px';
}else{
clearInterval(timer);
}
},10)
}
}
}
}
}

if(screen.height>800){//粗暴地处理分辨率对浮窗的影响
scrollx({id:'jdSmall', r:0, t:screen.height-640, f:1});
}else if(screen.height>720){
scrollx({id:'jdSmall', r:0, t:screen.height-545, f:1});
}else{
scrollx({id:'jdSmall', r:0, t:screen.height-460, f:1});
}

});