以文本方式查看主题

-  智睿软件_技术交流论坛  (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>