悬浮广告/按钮制作实例
文章来源：365jz.com 点击数：667 更新时间：2018-11-04 08:12 参与评论
悬浮广告有三种形式
悬浮侧栏（120*270）、悬浮按钮（100*100）和悬浮视窗（300*250）。
悬浮侧栏 可以配置在两侧同时展现，或在仅左侧，仅右侧进行展现。当两侧同时展现的时候，通常情况下，左右两侧的推广物料和内容是不同的，关闭一侧的侧栏不影响另一侧侧栏的展示。
悬浮按钮 可以配置在两侧同时展现，或在仅左侧，仅右侧进行展现。在两侧同时展现的时候，通常情况下，左右两侧的推广物料和内容是不同的，关闭一侧的侧栏不影响另一侧侧栏的展示。
悬浮视窗 只能在窗口右下角进行展示。
悬浮广告/按钮制作实例1：
<style type="text/css"> div{ position:relative; width: 200px; height: 200px; } img{ width: 200px; height: 200px; position: absolute; border-radius: 50%; } </style> </head> <body> <div id="floatdiv"><img src="img/god.gif"></div> </body> </html> <script type="text/javascript"> var div=document.getElementById("floatdiv"); var x=0,y=0; var xSpeed=2,ySpeed=2; var w=document.body.clientWidth-200,h=document.body.clientHeight-100; function floatdiv(){ if(x>w||x<0) xSpeed= -xSpeed; if(y>h||y<0) ySpeed= -ySpeed; x+=xSpeed; y+=ySpeed; div.style.top=y+"px"; div.style.left=x+"px"; setTimeout("floatdiv()",10); } floatdiv(); </script>
悬浮广告/按钮制作实例2:
<!doctype html> <html> <he> <meta charset="utf-8"> <title>广告</title> <style type="text/css"> *{ pding:0px; margin:0px; } #ad{ position:absolute; left:0px; top:0px; width:200px; height:50px; line-height:50px; text-align:center; color:black; background-color:orange; border-rius: 2%; } </style> </he> <body> <p id="ad">广告位招商</p> </body> <script type="text/javascript"> //获取img ad=document.getElementById("ad"); //初始化横坐标 x=0; //设置纵坐标 y=0; //设置加速度 yv=10; xv=10; function fun(){ //范围 //左右 if(x<0||x>window.innerWidth-ad.offsetWidth){ xv=-xv; } //上下 if(y<0||y>window.innerHeight-ad.offsetHeight){ yv=-yv; } x+=xv; y+=yv; //获取到的x值赋值给ad的left ad.style.left=x+"px"; //获取到的y值赋值给ad的top ad.style.top=y+"px"; } mytime=setInterval(fun,100); //给ad绑定鼠标移入事件 ad.onmouseover=function(){ //清除定时器 clearInterval(mytime); } //鼠标移出 ad.onmouseout=function(){ mytime=setInterval(fun,100); } </script> </html>
悬浮广告/按钮制作实例3:
<div class="close-ad" style=" position: fixed; right: 0; bottom: 260px;cursor:pointer;"> <a title="关闭" onclick="this.style.display='none';document.getElementById('广告盒子id').style.display='none'" href="javascript:void(0)"> <img src="https://www.365jz.com/images/common/close-ad.gif"> </a> </div>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容
