您现在的位置： 365建站网 > 365文章 > 悬浮广告/按钮制作实例

悬浮广告/按钮制作实例

文章来源：365jz.com     点击数：825    更新时间：2018-11-04 08:12   参与评论

悬浮广告有三种形式

悬浮侧栏（120*270）、悬浮按钮（100*100）和悬浮视窗（300*250）。

悬浮侧栏 可以配置在两侧同时展现，或在仅左侧，仅右侧进行展现。当两侧同时展现的时候，通常情况下，左右两侧的推广物料和内容是不同的，关闭一侧的侧栏不影响另一侧侧栏的展示。　

悬浮按钮 可以配置在两侧同时展现，或在仅左侧，仅右侧进行展现。在两侧同时展现的时候，通常情况下，左右两侧的推广物料和内容是不同的，关闭一侧的侧栏不影响另一侧侧栏的展示。

悬浮视窗 只能在窗口右下角进行展示。


悬浮广告/按钮制作实例1：

</>code
  1. <style type="text/css">
  2.     div{
  3.     position:relative;
  4.     width: 200px;
  5.     height: 200px;
  6.     }
  7.     img{
  8.     width: 200px;
  9.     height: 200px;
  10.     position: absolute;
  11.     border-radius: 50%;
  12.     }
  13. </style>
  14. </head>
  15. <body>
  16.     <div id="floatdiv"><img src="img/god.gif"></div>
  17. </body>
  18. </html>
  19. <script type="text/javascript">
  20.     var div=document.getElementById("floatdiv");
  21.     var x=0,y=0;
  22.     var xSpeed=2,ySpeed=2;
  23.     var w=document.body.clientWidth-200,h=document.body.clientHeight-100;
  24.     function floatdiv(){
  25.      if(x>w||x<0) xSpeed= -xSpeed;
  26.      if(y>h||y<0) ySpeed= -ySpeed;
  27.      x+=xSpeed;
  28.      y+=ySpeed;
  29.      div.style.top=y+"px";
  30.      div.style.left=x+"px";
  31.     setTimeout("floatdiv()",10);
  32.     }
  33.     floatdiv();
  34. </script>


悬浮广告/按钮制作实例2:

</>code
  1. <!doctype html>
  2. <html>
  3. <he>
  4.     <meta charset="utf-8">
  5.     <title>广告</title>
  6.     <style type="text/css">
  7.         *{
  8.             pding:0px;
  9.             margin:0px;
  10.         }
  11.         #ad{
  12.             position:absolute;
  13.             left:0px;
  14.             top:0px;
  15.             width:200px;
  16.             height:50px;
  17.             line-height:50px;
  18.             text-align:center;
  19.             color:black;
  20.             background-color:orange;
  21.             border-rius: 2%;
  22.         }
  23.     </style>
  24. </he>
  25. <body>
  26.     <p id="ad">广告位招商</p>
  27. </body>
  28. <script type="text/javascript">
  29.     //获取img
  30.     ad=document.getElementById("ad");
  31.     //初始化横坐标
  32.     x=0;
  33.     //设置纵坐标
  34.     y=0;
  35.     //设置加速度
  36.     yv=10;
  37.     xv=10;
  38.     function fun(){
  39.         //范围
  40.         //左右
  41.         if(x<0||x>window.innerWidth-ad.offsetWidth){
  42.             xv=-xv;
  43.         }
  44.         //上下
  45.         if(y<0||y>window.innerHeight-ad.offsetHeight){
  46.             yv=-yv;
  47.         }
  48.         x+=xv;
  49.         y+=yv;
  50.         //获取到的x值赋值给ad的left
  51.         ad.style.left=x+"px";
  52.         //获取到的y值赋值给ad的top
  53.         ad.style.top=y+"px";
  54.     }
  55.     mytime=setInterval(fun,100);
  56.  
  57.     //给ad绑定鼠标移入事件
  58.     ad.onmouseover=function(){
  59.         //清除定时器
  60.         clearInterval(mytime);
  61.     }
  62.     //鼠标移出
  63.     ad.onmouseout=function(){
  64.         mytime=setInterval(fun,100);
  65.     }
  66. </script>
  67. </html>


悬浮广告/按钮制作实例3:

</>code
  1. <div class="close-ad" style=" position: fixed; right: 0; bottom: 260px;cursor:pointer;">
  2. <a title="关闭" onclick="this.style.display='none';document.getElementById('广告盒子id').style.display='none'" href="javascript:void(0)">
  3. <img src="https://www.365jz.com/images/common/close-ad.gif">
  4. </a>
  5. </div>


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (825人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号