頁面浮窗簡單實現
1.html程式碼：
<div id="jdSmall" style="position: absolute; right: 0px;top :screen.height-450; z-index: 9999;">
<a href="#"><img class="img_piaochuang1" src="">
</a>
<a href="javascript:void(0)" id="ewm-close" style="width:27px; height:21px; position:absolute; right:0; top:0; background:url()) no-repeat right 0;"></a>
</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});
}
});