悬浮广告/按钮制作实例
文章来源：365jz.com 点击数：822 更新时间：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>如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
