处于盈利的需要,很多网页上都会放置文字或图片广告,固定位置的广告出现在页面固定的位置,在用户拖动滚动条浏览网页的过程中,广告会根据页面滚动的位置自动调整,保持出现在用户的视野内.
接下来介绍如何设计该种效果
固定广告的设计思路
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.特殊处理
当用户拖动滚动条时,如果上一次的移动距离效果还没有完成,则需要终止上一次的移动,从当前的位置开始新的移动效果.否则会出现连续拖动滚动条后广告图片抖动的不良效果.
效果图:
完整代码:
固定位置的广告 广告标题关闭
效果完成,欢迎前端大牛批评指教.
转载请注明出处:[]