论广告图片在浏览器的固定位置

大家在上网时经常会看到有一些网页左侧、右侧或右下底部的广告图片,无论滚动条如何滚动这些内容一直在浏览器的固定位置。两种实现方式:

一:通过CSS3的position属性的值fixed,即固定定位。它的定位基准不是祖先元素,而是浏览器窗口。

二:通过JavaScript中的DOM对象获取元素位置设定。可以做成一个工具类,方便以后使用,不需要再调网页中元素的位置。

var adverTop;//层距页面顶端距离
var adverLeft;//层距页面左端距离
var adverObj;//层对象
function inits(){

    adverObj=document.getElementById("float");//获得层对象

//IE浏览器

    if(adverObj.currentStyle){
        adverTop=parseInt(adverObj.currentStyle.top);
        adverLeft=parseInt(adverObj.currentStyle.left);

    }else {

//其他浏览器

        adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);
        adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);
    }


}


function move() {
    var sTop=parseInt(document.documentElement.scrollTop || document.body.scrollTop);
    var sLeft=parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
    adverObj.style.top=adverTop+sTop+"px";
    adverObj.style.left=adverLeft+sLeft+"px";
}
window.onload=inits;
window.onscroll=move;

猜你喜欢

转载自blog.csdn.net/jinchunzhao123/article/details/80806935
今日推荐