最新消息:红方科技年末特惠:.com域名55元、云虚机五折优惠,买3年送2年,更有智能建站套餐等你来取!

JS浮动/悬浮特效[自己动手,丰衣足食]

JS yinhexi 1832浏览 0评论

利用jquery

前提:body {position:relative;}

1.构造浮动/悬浮层

var float_top = document.documentElement.clientHeight-50; //悬浮层距页面顶部绝对距离
var float_left = document.documentElement.clientWidth-200;  //悬浮层距页面左边绝对距离
$('body').append("<div class='floatDiv'>此处为悬浮层内容</div>"); //渲染悬浮层(class为floatDiv)
$('.floatDiv').css({
'position':'absolute',
'top':float_top,
'left':float_left,
'backgroundColor':'#ccc',
'zIndex':'100',
'width':'199',
'height':'49',
'borderLeft':'1px #666 solid',
'borderTop':'1px #666 solid'
});
window.onscroll = autoFloatTop;
function autoFloatTop() {
    $('.floatDiv').css('top', document.documentElement.scrollTop + float_top);
    setTimeOut("autoFloatTop()", 1);
};

转载请注明:红方博客 » JS浮动/悬浮特效[自己动手,丰衣足食]