博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何设计页面固定广告的效果
阅读量:6849 次
发布时间:2019-06-26

本文共 3354 字,大约阅读时间需要 11 分钟。

处于盈利的需要,很多网页上都会放置文字或图片广告,固定位置的广告出现在页面固定的位置,在用户拖动滚动条浏览网页的过程中,广告会根据页面滚动的位置自动调整,保持出现在用户的视野内.

 

接下来介绍如何设计该种效果

固定广告的设计思路

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.bodyscrollTop属性获取垂直滚动条的滚动距离,通过document.bodyscrollLeft属性获取水平滚动条的滚动距离.

为了视觉上的动态效果,使用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.特殊处理

当用户拖动滚动条时,如果上一次的移动距离效果还没有完成,则需要终止上一次的移动,从当前的位置开始新的移动效果.否则会出现连续拖动滚动条后广告图片抖动的不良效果.

 

效果图:

完整代码:

            
固定位置的广告

效果完成,欢迎前端大牛批评指教.

转载请注明出处:[]

 

你可能感兴趣的文章
解决浏览器不兼容websocket
查看>>
C语言 · 完数
查看>>
nova系列一:虚拟化介绍
查看>>
BZOJ3565 : [SHOI2014]超能粒子炮
查看>>
如何用Go实现一款类似滴滴优步的网络约车软件(含源码)
查看>>
JavaScript判断是否全为中文,是否含有中文
查看>>
Uubntu14.04下 Hadoop集群环境搭建
查看>>
java 5.0引入的新特性-枚举
查看>>
vue 项目心得
查看>>
redirect_uri 参数错误
查看>>
Solidedge如何新建参考平面 参考面
查看>>
IE11下javascript报堆栈溢出问题的解决
查看>>
黑马day16 jquery&属性过滤选择器
查看>>
新概念英语(1-49)At the butcher's
查看>>
springMVC新理解
查看>>
【iOS】UIWebView HTML5 扩展
查看>>
Codeforces 460 D. Little Victor and Set
查看>>
spring datasource和mybatis的datasource来源在哪里
查看>>
洛谷2017 5月月赛R1
查看>>
android开发环境搭建教程
查看>>