处于盈利的需要,很多网页上都会放置文字或图片广告,固定位置的广告出现在页面固定的位置,在用户拖动滚动条浏览网页的过程中,广告会根据页面滚动的位置自动调整,保持出现在用户的视野内.
接下来介绍如何设计该种效果
固定广告的设计思路
1.广告的设计
因为希望广告放置于页面特定的位置中,所以应该通过CSS广告元素的布局方式为绝对布局方式(position:absolute),具体做法是将广告图片与关闭广告的文字放入一个div层中.在通过css指定层的样式.
2.事件的处理
单击广告内容,进行相应的页面跳转
/*单击触发的事件*/
function adOnClick(){
window.location.href="http://www.cnblogs.com/dennisit/";
}
单击广告关闭按钮,执行层获取,样式隐藏,使用divobj.innerHTML=””,进行广告销毁
/*关闭触发的事件*/
function adClosed(){
var ad = document.getElementById("ad");
//隐藏层,并清空层中的内容
ad.style.display="none";
ad.innerHTML="";
}
3.广告位置固定
使用Javascript进行事件监听操作,因为要监听的是窗体滚动事件,所以应对window对象添加onscroll事件.为了让广告保持在页面可视范围中的固定位置,
广告的纵坐标应该为:广告距离页面上端的相对距离+垂直滚动条滚动距离.
广告的横坐标应该为:广告距离页面左端的相对距离+水平滚动条滚动距离.
可以通过document.body的scrollTop属性获取垂直滚动条的滚动距离,通过document.body的scrollLeft属性获取水平滚动条的滚动距离.
为了视觉上的动态效果,使用window对象的setTimeout方法定时进行移动.每次移动坐标距离的1/5.
//记录widow.setTimeout定时操作的句柄
var timeHandler;
window.onscroll = function() {
//如果上一次的移动效果还未完成则终止
if (timeHandler) window.clearTimeout(timeHandler);
var ad = document.getElementById('ad');
/*
#ad中的相应属性值 left:10px; top:90px;
*/
var oldX = ad.offsetLeft; //获取广告的当前位置
var oldY = ad.offsetTop; //获取广告的当前位置
var targetX = 10 + document.body.scrollLeft; //计算出希望移动到的新位置
var targetY = 90 + document.body.scrollTop; //计算出希望移动到的新位置
//开始移动效果
move(oldX,oldY,targetX,targetY);
}
function move(oldX,oldY,targetX,targetY) {
var isMove = false; //是否需要移动
var ad = document.getElementById('ad');
//Y方向的判断
//判断是否已经接近了目标位置
if (oldY + (targetY - oldY) / 5 >= targetY) {
//如果已经接近了目标职位，将图片移动到目标位置
ad.style.top = targetY;
//释放句柄引用
timeHandler = null;
} else {
//如果远离目标位置，每次移动相距距离的1/5
oldY += (targetY - oldY) / 5;
ad.style.top = oldY;
isMove = true; //需要移动
}
//X方向判断
//判断是否已经接近了目标位置
if (oldX + (targetX - oldX) / 5 >= targetX) {
//如果已经接近了目标职位，将图片移动到目标位置
ad.style.left = targetX;
//释放句柄引用
timeHandler = null;
} else {
//如果远离目标位置，每次移动相距距离的1/5
oldX += (targetX - oldX) / 5;
ad.style.left = oldX;
isMove = true; //需要移动
}
//0.05秒后进行下一次移动
if(isMove){
timeHandler = window.setTimeout('move(' + oldX + ', ' + oldY + ',' + targetX + ', ' + targetY + ')', 50);
}
}
4.特殊处理
当用户拖动滚动条时,如果上一次的移动距离效果还没有完成,则需要终止上一次的移动,从当前的位置开始新的移动效果.否则会出现连续拖动滚动条后广告图片抖动的不良效果.
效果图:
完整代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=GBK"> <title>固定位置的广告</title> <style> /*用来模拟大页面,使页面出现垂直和水平滚动条*/ #container{ width:2000px; height:800px; background-color:#E6EEF9; } #ad{ position:absolute; left:10px; top:90px; width:116px; height:190px; background-color:#eee; font-size:12px; } .adtitle{ width:116px; height:25px; line-height:25px; text-align:center; color:white; background-color:#C80901; padding:0px; } .adcontent{ width:116px; height:142px; cursor:pointer; padding:0px; margin:0px; } .adclose{ padding:0px; text-align:center; width:116px; height:25px; line-height:25px; background-color:#3E3E3E; cursor:pointer; } </style> <script> //记录widow.setTimeout定时操作的句柄 var timeHandler; window.onscroll = function() { //如果上一次的移动效果还未完成则终止 if (timeHandler) window.clearTimeout(timeHandler); var ad = document.getElementById('ad'); /* #ad中的相应属性值 left:10px; top:90px; */ var oldX = ad.offsetLeft; //获取广告的当前位置 var oldY = ad.offsetTop; //获取广告的当前位置 var targetX = 10 + document.body.scrollLeft; //计算出希望移动到的新位置 var targetY = 90 + document.body.scrollTop; //计算出希望移动到的新位置 //开始移动效果 move(oldX,oldY,targetX,targetY); } function move(oldX,oldY,targetX,targetY) { var isMove = false; //是否需要移动 var ad = document.getElementById('ad'); //Y方向的判断 //判断是否已经接近了目标位置 if (oldY + (targetY - oldY) / 5 >= targetY) { //如果已经接近了目标职位，将图片移动到目标位置 ad.style.top = targetY; //释放句柄引用 timeHandler = null; } else { //如果远离目标位置，每次移动相距距离的1/5 oldY += (targetY - oldY) / 5; ad.style.top = oldY; isMove = true; //需要移动 } //X方向判断 //判断是否已经接近了目标位置 if (oldX + (targetX - oldX) / 5 >= targetX) { //如果已经接近了目标职位，将图片移动到目标位置 ad.style.left = targetX; //释放句柄引用 timeHandler = null; } else { //如果远离目标位置，每次移动相距距离的1/5 oldX += (targetX - oldX) / 5; ad.style.left = oldX; isMove = true; //需要移动 } //0.05秒后进行下一次移动 if(isMove){ timeHandler = window.setTimeout('move(' + oldX + ', ' + oldY + ',' + targetX + ', ' + targetY + ')', 50); } } /*单击触发的事件*/ function adOnClick(){ window.location.href="http://www.cnblogs.com/dennisit/"; } /*关闭触发的事件*/ function adClosed(){ var ad = document.getElementById("ad"); //隐藏层,并清空层中的内容 ad.style.display="none"; ad.innerHTML=""; } </script> </head> <body> <div id="ad"> <div class="adtitle">广告标题</div> <div class="adcontent"> <img src="images/info.png" onClick="adOnClick()"/> </div> <div class="adclose" onClick="adClosed()">关闭</div> </div> <div id="container"> </div> </body> </html>
效果完成,欢迎前端大牛批评指教.
转载请注明出处:[http://www.cnblogs.com/dennisit/archive/2013/03/20/2971969.html]