您的位置：首页 > Web前端 > CSS

符合W3C标准布局的js对联跟随广告（js版+css）

2013-09-11 16:29 721 查看

1、改进版

  <div>

    <script type="text/javascript">

        lastScrollY = 0;

        function heartBeat(){

        var diffY;

        if (document.documentElement
&& document.documentElement.scrollTop)

         diffY = document.documentElement.scrollTop;

        else if (document.body)

         diffY = document.body.scrollTop

        else

            {/*Netscape stuff*/}

        //alert(diffY);

        percent=.1*(diffY-lastScrollY);

        if(percent>0)percent=Math.ceil(percent);

        else percent=Math.floor(percent);

        document.getElementById("aleft").style.top
= parseInt(document.getElementById("aleft").style.top)+percent+"px";

        document.getElementById("afd").style.top
= parseInt(document.getElementById("aleft").style.top)+percent+"px";

        document.getElementById("afd").style.right
= "15px";

        lastScrollY=lastScrollY+percent;

        //alert(lastScrollY);

        }

    //下面这段删除后，对联将不跟随屏幕而移动。

        window.setInterval("heartBeat()",1);

    //-->

    </script>

    <a id="aleft" style="position:absolute;top:175px; left:15px; "></a>

    <a href="movie.aspx" id="afd" class="afd" style="position:absolute;right:15px;top:175px;display:block;width:148px;height:72px;background:url(images/introduce.png);"></a>

</div>

2、原来

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[align=left]<html xmlns="http://www.w3.org/1999/xhtml">[/align]
[align=left]<head>[/align]
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
[align=left]<title>符合标准的正常工作的对联广告</title>[/align]
[align=left]<script type="text/javascript">[/align]
[align=left]    lastScrollY = 0;[/align]
[align=left]    function heartBeat(){[/align]
[align=left]    var diffY;[/align]
    if (document.documentElement
&& document.documentElement.scrollTop)
[align=left]        diffY = document.documentElement.scrollTop;[/align]
[align=left]    else if (document.body)[/align]
[align=left]        diffY = document.body.scrollTop[/align]
[align=left]    else[/align]
        {/*Netscape
stuff*/}
[align=left]    [/align]
[align=left]    //alert(diffY);[/align]
[align=left]    percent=.1*(diffY-lastScrollY);[/align]
[align=left]    if(percent>0)[/align]
[align=left]        percent=Math.ceil(percent);[/align]
[align=left]    else[/align]
[align=left]        percent=Math.floor(percent);[/align]
    document.getElementById("leftDiv").style.top
= parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
    document.getElementById("rightDiv").style.top
= parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
[align=left]
[/align]
[align=left]    lastScrollY=lastScrollY+percent;[/align]
[align=left]    //alert(lastScrollY);[/align]
[align=left]    }[/align]
[align=left]
[/align]
[align=left]    //下面这段删除后，对联将不跟随屏幕而移动。[/align]
[align=left]    window.setInterval("heartBeat()",1);[/align]
[align=left]</script>[/align]
[align=left]
[/align]
[align=left]<style type="text/css">[/align]
[align=left]    /* 这里定义滴是页面高度，用来测试对联跟随效果滴，跟广告无关*/[/align]
[align=left]    html,body{height:1000px;}[/align]
[align=left]    #mm{height:1000px;}[/align]
[align=left]
[/align]
[align=left]    /* 这里是设置对联样式滴*/[/align]
[align=left]    #leftDiv,#rightDiv{[/align]
[align=left]       width:120px; /* 宽度*/[/align]
[align=left]       height:250px; /* 高度*/[/align]
[align=left]       background-color:#e5e5e5; /* 背景颜色*/[/align]
[align=left]       border:1px solid #ddd; /* 边框样式*/[/align]
[align=left]       position:absolute; /* 绝对定位激活*/[/align]
[align=left]    }[/align]
[align=left]</style>[/align]
[align=left]</head>[/align]
[align=left]
[/align]
[align=left]<body>[/align]
[align=left]
[/align]
<div id="leftDiv" style="top:120px; /* 距离顶部px
*/ left:2px; /* 距离左侧px
*/ ">
[align=left]        左侧广告内容</div>[/align]
<div id="rightDiv" style="top:120px; /* 距离顶部px
*/ right:2px; /* 距离右侧px
*/ ">
[align=left]        右侧广告内容</div>[/align]
[align=left]
[/align]
[align=left]<div id="mm">[/align]
[align=left]</div>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 对联跟随广告

相关文章推荐

新的分享

章节导航