php底部悬浮广告,左右飘浮广告(jq方法实现)

思路：

在头部添加-宽度1000px的层作为左右漂浮层的参考层(position:relative)，左右漂浮层(position:absolute)。

其中，左边漂浮层 left=- 自身的宽度 ，右边漂浮层right=- 自身的宽;

左右漂浮层top= 窗口高度- 漂浮层的高度 +滚动条距页面顶部的高度(漂浮层贴浏览器底部浮动)

或 (窗口高度- 漂浮层的高度)/2 +滚动条距页面顶部的高度 (漂浮层贴浏览器中部浮动)

实例代码：

无标题文档

html,body{overflow-x:hidden; overflow-y:auto;}/* 去除因左右浮动产生的横向滚动条的 关键 */

*{margin:0;padding:0;}

ul li{ list-style:none;}

img {border:0 none;}

input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;}

.w1{ background:#CCC;}

.header{background: #CCC; position:relative;}

.header .w98{height:104px;margin:0 auto;position:relative;width:1000px; border:1px #f00 solid;z-index:10;}

.main{clear:both;height:auto !important;margin-top:-3px;padding-top:30px; background:#c1ccdc;}

.main .w1{clear:both;margin:0 auto;width:1000px;border:1px #f00 solid;}

.footer{clear:both;padding:80px 0 0;}

.footer .w1{margin:0 auto;width:1000px; border:0 none;}

/* christmas */

.cs{width:1000px; height:100px; border:1px blue solid; position:absolute;left:50%; top:0;margin-left:-500px;z-index:5;}/* 漂浮参考层用绝对定位不占页面位置*/

.csleft,.csright{width:366px;height:438px; border:1px #00CC33 solid; position:absolute; top:150px;}

.csleft{ left:-369px; background: url(https://phpvar.com/wp-content/uploads/fleft2.png) no-repeat;}

.csright{right:-368px; background: url(https://phpvar.com/wp-content/uploads/fright2.png) no-repeat;}

$(document).ready(function(e) {

//var wheight=($(window).height()-$(".csleft").height())/2; //默认中间浮动: (窗口高度- 漂浮元素本身高度)/2

var ptop=($(window).height()-$(".csleft").height())-10; //打开页面默认漂浮位置-> 底部浮动：(窗口高度- 漂浮元素本身高度),减10px 避免拉动滚动条时页面出现第2条纵向滚动条

$(".csleft,.csright").css({

top:ptop

})

//alert(ptop);

$(window).scroll(

function(){

var ftop=$(window).scrollTop();

var wheight=($(window).height()-$(".csleft").height())-6;

$(".csleft,.csright").animate({

top: wheight+ftop },150); //拉动滚动条时,top值=打开页面默认top值+滚动条距页面顶部位置的值

}

)

function winsize(){

//alert($(window).width());

if($(window).width()<1400 || window.screen.width<1440){ //当浏览器窗口小于1400px 或 分辨率小于1440(19.1寸显示屏)时,不显示浮动层

$(".csleft,.csright").hide();

}else{

$(".csleft,.csright").show();

}

}

winsize();

$(window).resize(winsize) // 窗口大小改变时调用winsize()函数

});

header 测试(header层)是否被参考层遮住：链接可否点击

左浮

右浮

main

footer

提示：你可以先修改部分代码再运行。