1、左边广告
<DIV id="floaterleft" style="Z-INDEX: 100; LEFT: 10px; VISIBILITY: visible; WIDTH: 145px; POSITION: absolute; float: left;display: none;" >
<div style="width: 145px;"><img src="<s:property value="basePath"/>/resources/p_w_picpaths/ggcancle.png" style="float: right;cursor: pointer;" οnclick="$('#floaterleft').html('');$('#floaterleft_sta').val('1');"/></div>
广告内容
</DIV>
2、右边广告
<DIV id="floaterright" style="Z-INDEX: 100; RIGHT: 10px; VISIBILITY: visible; WIDTH: 145px; POSITION: absolute; float: right;display: none;" >
<div style="width: 145px;"><img src="<s:property value="basePath"/>/resources/p_w_picpaths/ggcancle.png" style="float: right;cursor: pointer;" οnclick="$('#floaterright').html('');$('#floaterright_sta').val('1');"/></div>
广告内容
</DIV>
3、创建js文件,用来处理页面滚动时自动滚动广告
/*首页广告左右两边随滚动条滚动 移动*/
var myggTimer;//时间间隔
var gdggtime = 10;//间隔时间长度(单位毫秒)
var height_body_gg = document.documentElement.clientHeight;//当前浏览器窗口高度
var width_body_gg = document.documentElement.clientWidth;//当前浏览器窗口宽度
var height_scroll_gg = document.documentElement.scrollTop;//垂直滚动条滚动高度
var left_scroll_gg = document.documentElement.scrollLeft;//水平滚动条滚动高度
var top_left;//左右两边广告 到 顶部的距离
var top_right;//左右两边广告 到 顶部的距离
var prev_scroll_top;//先前的scrolltop值
var prev_scroll_left;//先前的scrollleft值
var prev_height_body = height_body_gg;//先前的bodyheight值
var prev_width_body = width_body_gg;//先前的bodywidth值
var width_gg_margin = (width_body_gg - 1008 - 290)/4;//广告的left right值
$(document).ready(function(){
height_scroll_gg = document.documentElement.scrollTop;//滚动条滚动高度
prev_scroll_top = height_scroll_gg;
prev_scroll_left = left_scroll_gg;
top_left = (height_body_gg - $('#floaterleft').css('height').replace("px",""))/2 + height_scroll_gg;//对象高度带px
top_right = (height_body_gg - $('#floaterright').css('height').replace("px",""))/2 + height_scroll_gg;//对象高度带px
if(top_left<0){
top_left = 0;
}
if(top_right<0){
top_right = 0;
}
if(width_gg_margin<0){
width_gg_margin = 0;
}
$('#floaterleft').css("top",top_left);
$('#floaterright').css("top",top_right);
$('#floaterleft').css("left",width_gg_margin+left_scroll_gg);
$('#floaterright').css("right",width_gg_margin-left_scroll_gg);
$('#floaterleft').css("display","");
$('#floaterright').css("display","");
ggmove();
});
//重新获得当前广告 相关参数 然后定位
function ggmove(){
height_scroll_gg = document.documentElement.scrollTop;//滚动条滚动高度
height_body_gg = document.documentElement.clientHeight;//当前浏览器窗口高度
width_body_gg = document.documentElement.clientWidth;//当前浏览器窗口宽度
left_scroll_gg = document.documentElement.scrollLeft;//滚动条滚动高度
if(prev_scroll_top!=height_scroll_gg || prev_height_body!=height_body_gg || prev_width_body!=width_body_gg || prev_scroll_left!=left_scroll_gg){
width_gg_margin = (width_body_gg - 1008 - 290)/4;
prev_scroll_top = height_scroll_gg;
prev_width_body = width_body_gg;
prev_height_body = height_body_gg;
prev_scroll_left = left_scroll_gg;
top_left = (height_body_gg - $('#floaterleft').css('height').replace("px",""))/2 + height_scroll_gg;//对象高度带px
top_right = (height_body_gg - $('#floaterright').css('height').replace("px",""))/2 + height_scroll_gg;//对象高度带px
if(top_left<0){
top_left = 0;
}
if(top_right<0){
top_right = 0;
}
if(width_gg_margin<0){
width_gg_margin = 0;
}
$('#floaterleft').css("top",top_left);
$('#floaterright').css("top",top_right);
$('#floaterleft').css("left",width_gg_margin+left_scroll_gg);
$('#floaterright').css("right",width_gg_margin-left_scroll_gg);
}
myggTimer = setTimeout("ggmove()", gdggtime);//设定过一段时间 自动执行方法 ggmove()
}
转载于:https://blog.51cto.com/695956013/1226892