Question

我有以下jsfiddle链接

我试图挤压网页以显示正确的广告

在dekstop浏览器上正常工作

但它没有受到ipad safari / chrome浏览器的挤压

以下是用于挤压/解压缩网页的功能

 function squeeze_page(){
    d.body.style.paddingRight='160px';
    d.body.style.paddingLeft='160px';
    d.body.style.marginLeft='-160px';
    d.body.style.overflowX='hidden !important'; 
    is_page_squeezed=true;
 }

 function unsqueeze_page(){
   d.body.style.paddingRight='';
   d.body.style.paddingLeft='';
   d.body.style.marginLeft='';
   is_page_squeezed=false;
 }

如果有任何其他方式我可以挤压网页，请告诉我

Answer 1

也许这就是您正在寻找的内容：JSFIDDLE

如果您希望在展示时从右侧滑动AD幻灯片，最好在我的示例中使用CSS transition。

首先，您需要有一个内容容器，在我的示例中，我添加

<div id="container">
    ...
    <!-- Your Content Here -->
    ...
</div>

包含您的所有<p>内容，然后使用CSS，我设置此

#test {
    position:fixed;
    width:160px;
    background:blue;
    right:-160px;
    top:0px;
    bottom:0px;
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
}
#test.show {
    right:0;
}

position:fixed;，只要您滚动它，top和bottom设置为0，就可以将其固定在视口中以使其成为＆＃＃39;高度已满，而transition则表示它在显示时从右向左滑动

与使用此款式的div container相同

#container {
    margin-right:0;
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
}
#container.squeezed {
    margin-right:160px;
}

这样看起来它被AD挤压了

然后使用此script添加或删除class和#container

中的#test

window.onscroll = function () {
    if (pageYOffset > 100) {
        $("#test").addClass("show");
        $("#container").addClass("squeezed");
    } else if (pageYOffset < 100) {
        $("#test").removeClass("show");
        $("#container").removeClass("squeezed");
    }    
}

挤压网页以显示广告

1 个答案: