Web页面设计-网页JS浮动广告的分享[智睿软件

以文本方式查看主题

-  智睿软件_技术交流论坛  (http://zhirui.net/bbs/index.asp)
--  Web页面设计  (http://zhirui.net/bbs/list.asp?boardid=33)
----  网页JS浮动广告的分享  (http://zhirui.net/bbs/dispbbs.asp?boardid=33&id=3436)

--  作者：zhirui
--  发布时间：2014-10-14 15:57:58
--  网页JS浮动广告的分享

几种浮动广告的制作

例子：制作浮动的广告图片
<head>

    <title>制作浮动的广告图片</title>

    <script language="javascript" type="text/javascript">

    var advInitTop=0;//使层总置于顶端的初始值

    function move()

    {

        window.document.getElementById("advLayer").style.top=advInitTop+window.document.body.scrollTop;

     }

     window.onscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数

    </script>

</head>

<body >

<div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px; z-index:1;">

    <img src="images/bt.jpg" width="180" height="230"/>

</div>

</body>

例子:带关闭按钮的浮动的广告图片
<head>

    <title>制作浮动的广告图片</title>

    <script language="javascript" type="text/javascript">

    //使层总置于顶端的初始值

    var advInitTop=0;

    var closeInitTop=0;

    //获取广告图片所在的层上边距的初始值

    function inix()

    {

        advInitTop=parseInt(window.document.getElementById("advLayer").style.top);

        closeInitTop=parseInt(window.document.getElementById("closeLayer").style.top);

    }



    //使用广告图片所在的层与滚动条同步移动

    function move()

    {

        document.getElementById("advLayer").style.top=advInitTop+parseInt(window.document.body.scrollTop);

        document.getElementById("closeLayer").style.top=closeInitTop+parseInt(window.document.body.scrollTop);

     }



     //隐藏advLaayer closeLayer 并不为被隐藏的对象保留其物理空间

     function closeMe()

     {

        window.document.getElementById("closeLayer").style.display="none";

        window.document.getElementById("advLayer").style.display="none";

     }



     //窗口的滚动事件,当页面滚动时调用move()函数

     window.onscroll=move;

    </script>

</head>

<body onload="inix()">

<div id="advLayer" style="position:absolute;left:16px;top:80px;width:302px;height:171px; z-index:1;">

    <img alt="adv" src="images/lady_0007.jpg" width="302" height="171"/>

</div>

<div id="closeLayer" onclick="closeMe()"style="position:absolute;left:214px;top:230px;width:27px;height:19px;z-index:2;">

    <img alt="close" src="images/close.gif"/>

</div>

下载信息  [文件大小：   下载次数： ]
点击浏览该文件:jsad-code-float-248.zip

[此贴子已经被作者于2015-03-27 15:32:38编辑过]

--  作者：zhirui
--  发布时间：2014-10-14 15:58:04
--

例子: 动态显示图片

<head>

    <title>动态显示图片</title>

    <script language="javascript" type="text/javascript">

            var arr=new Array();

            arr[0]="images/arrow.gif";

            arr[1]="images/back.jpg";

            arr[2]="images/bt.jpg";

            var i=0;

        function showPic()

        {

            if(i>2)

            {

              i=0;

            }

            window.document.getElementById("pic").src=arr[i++];

            window.setTimeout("showPic()",1000);

        }

    </script>

</head>

<body onload="showPic()" >

<div id="a" style="left:20px;top:50px;width:200px;height:180px;">

<img   id="pic"src="" alt="pic" style="left:20px;top:50px;width:200px;height:180px;" />

</div>

</body>

例子: 飘浮广告
<head>

<title>飘浮广告</title>

<script language="jscript" type="text/javascript">

    //漂浮广告的初始位置

     var x=50,y=60;



     //xin为真,则向右运动,否则向左运动.

     //yin为真,则向右运动,否则向左运协.

     var xin=true,yin=true;



     //移动的距离

     var step=1;



     //移动的步长

     var delay=10;



     function floatAD()

     {

         //L左边界,T右边界

         var L=T=0;



         //层移动的右边界

         var R=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;



         //层移动的下边界

         var B=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;



         //层移动后的左边界

         window.document.getElementById("fly").style.left=x;



         //层移动后的上边界

         window.document.getElementById("fly").style.top=y;



         //判断水平方向

         x=x+step*(xin?1:-1);



         //到达边界后的处理

         if(x<L){xin=true;x=L;}

         if(x>R){xin=false;x=R}



         //判断生直方向

         y=y+step*(yin?1:-1);



         //到达边界后的处理

         if(y<T){yin=true;y=T;}

         if(y>B){yin=false;y=B;}



         //隔多少时间调用一次

         setTimeout("floatAD()",delay);

     }

</script>

</head>

<body onload="floatAD()">

<div id="fly" style="position:absolute;   left:16px;    top:80px; width:295px; height:176px; z-index:1;">

    <img src="images/lady_0007.jpg" width="295" height="176"/>

</div>

</body>

</html>

--  作者：zhirui
--  发布时间：2014-10-14 16:07:09
--
<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<a href="#" target="_blank">
<img src="/images/logo.gif" border="0">
</a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
</script>
</body>
</html>