如何设计页面固定广告的效果

来源：互联网发布：1688和淘宝的区别编辑：程序博客网时间：2024/04/29 08:24

转自：http://www.cnblogs.com/dennisit/archive/2013/03/20/2971969.html

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

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

固定广告的设计思路

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);
            }

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;

            /*单击触发的事件*/
            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>