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/images/ggcancle.png" style="float: right;cursor: pointer;" onclick="$('#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/images/ggcancle.png" style="float: right;cursor: pointer;" onclick="$('#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()
}