//三种写法
//第一种
<!DOCTYPE HTML>
<html>
<head>
<title>浮动 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload=function(){
//写入
var oneInner = document.createElement("div");
oneInner.setAttribute("style","position:relative; top:0px; left:0px;")
var oneButton = document.createElement("input");
var span=document.createElement("span");
var p=document.createElement("p");
oneInner.setAttribute("style","background:#f57c19;position:absolute;400px;height:140px;border:solid 3px #f57c19;cursor:pointer;");
oneButton.setAttribute("type","button");
oneButton.setAttribute("value","x");
oneButton.setAttribute("style","border:none;float:right;margin:6px 6px 0 0;");
oneButton.style.color="red";
oneButton.style.Opcity="0.6";
if (oneButton.style.cssFloat)
{
oneButton.style.cssFloat="right"
}
else{
oneButton.style.styleFloat="left"
}
span.innerHTML=" 温馨提示";
span.style.font="1rem 微软雅黑";
span.style.color="red";
p.innerHTML="原煤回收65%以上,出产率1.1吨,含配煤软件435万美金";
p.setAttribute("style"," border-top:solid 1px #fff;text-align:center;");
p.style.font="1rem 微软雅黑";
p.style.color="#fff";
p.style.lineHeight="50px";
oneInner.appendChild(oneButton);
oneInner.appendChild(span);
oneInner.appendChild(p);
document.body.appendChild(oneInner);
//定时器
var a1a = setInterval(moves,10);
//函数
var x = 1;
var y = 1;
function moves(){
var tops = oneInner.offsetTop
var lefts = oneInner.offsetLeft
if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)
{
x=-x
}
if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
{
y=-y
}
tops+=y;
lefts+=x;
oneInner.style.top=tops+"px"
oneInner.style.left=lefts+"px"
}
//悬停停止
oneInner.onmouseover=function(){
clearInterval(a1a);
}
//放手继续运动
oneInner.onmouseout=function(){
a1a =setInterval(moves,10);
}
//删除
oneButton.onclick=function(){
document.body.removeChild(oneInner);
}
bun.onclick=function(){
document.body.removeChild(oneInner);
}
}
</script>
</head>
<body>
</body>
</html>
//第二种
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.title{
color: red;
font-size: 16px;
margin-top: 6px;
margin-left: 10px;
}
#textbox{
98%;
margin: 10px auto;
border-top: 1px solid #f5f5f5;
}
h2{
color: white;
font-weight: bold;
font-size: 18px;
padding-top: 10px;
line-height: 24px;
}
span{
font-size: 1rem !important;
color: red;
}
.title{
color: red;
font-size: 16px;
margin-top: 6px;
margin-left: 10px;
}
#btn{
float: right;
margin-right: 6px !important;
opacity: 0.6;
border:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
//写入
var btn=document.getElementById("btn");
var oneInner = document.getElementById("float");
oneInner.setAttribute("style","background:#f57c19;position:absolute;400px;height:140px;border:solid 3px #f57c19;cursor:pointer;");
document.body.appendChild(oneInner);
//定时器
var a1a = setInterval(moves,10);
//函数
var x = 1;
var y = 1;
function moves(){
var tops = oneInner.offsetTop
var lefts = oneInner.offsetLeft
if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)
{
x=-x
}
if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)
{
y=-y
}
tops+=y;
lefts+=x;
oneInner.style.top=tops+"px"
oneInner.style.left=lefts+"px"
}
//悬停停止
oneInner.onmouseover=function(){
clearInterval(a1a);
}
//放手继续运动
oneInner.onmouseout=function(){
a1a =setInterval(moves,10);
}
//删除
btn.onclick=function(){
document.body.removeChild(oneInner);
}
}
</script>
</head>
<body>
<div id="float">
<span class="title">温馨提示</span>
<button type="button" class="close ar" data-dismiss="modal" aria-label="Close" id="btn"><span aria-hidden="ulue">×</span></button>
<div id="textbox">
<h2>原煤回收65%以上,出产率1.1吨,含配煤软件435万美金</h2>
</div>
</div>
</body>
</html>
<!-- 漂浮广告 -->
html部分
<div class="floatguanggao1 pf" id="floatguanggao1">
<button type="button" class="close ar" data-dismiss="modal" aria-label="Close" id="floatguanggaobtn1"><span aria-hidden="ulue">×</span></button>
<h2 class="ac animated bounce" id="guanggao1h2" style="animation-delay: 0.3s;">本公司现有车险活动<span>"一次消费,双倍回馈,买车险送等值商品"</span>与多家保险公司合作 ,并郑重承诺车险保单未下之前保护您的资金安全</h2>
</div>
<div class="floatguanggao2 pf" id="floatguanggao2">
<span class="title">温馨提示</span>
<button type="button" class="close ar" data-dismiss="modal" aria-label="Close" id="floatguanggaobtn2"><span aria-hidden="ulue">×</span></button>
<div class="textbox">
<h2 class="ac animated flipInX infinite" id="ani1-h2">原煤回收65%以上,出产率1.1吨,含配煤软件435万美金</h2>
</div>
</div>
<div class="floatguanggao3 pf" id="floatguanggao3" style="height: 170px;">
<!-- <span class="title">温馨提示</span> -->
<button type="button" class="close ar" data-dismiss="modal" aria-label="Close" id="floatguanggaobtn3"><span aria-hidden="ulue">×</span></button>
<div class="textbox" style="border-top: none;margin-top: 0;">
<h2 class="ac animated flipInX infinite" id="ani1-h3" style="padding-top: 14px;">为急需资金企业（国企，政府性投资公司，大型民营企业，各中小型企业），提供融资渠道，数额大（几亿到几百亿均可），审批流程简洁，放款快（最快一个月），利率低，融资模式多样化（发债，抵押贷款，ppp项目，融资租赁，以及思路融资）。</h2>
</div>
</div>
css3部分
#floatguanggao1{
100%;
height: 116px;
/*透明度兼容方法一*/
/*background-color: black;
opacity: 0.7;
filter: alpha(opacity=70);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);*/
/*透明度兼容方法二*/
background: rgba(0,0,0,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#b2000000);
left: 0;
top: -116px;
z-index: 100;
padding: 0 10px;
}
#floatguanggao1 #floatguanggaobtn1{
margin-right: 6px;
}
#floatguanggao1 #floatguanggaobtn1>span{
color: white;
margin: 0 4px;
}
#floatguanggao1 h2{
color: white;
font-weight: bold;
font-size: 26px;
margin: 30px auto;
display: none;
line-height: 36px;
}
#floatguanggao1 h2 span{
color: red;
font-size: 30px;
margin: 0 6px;
}
/*悬浮广告二*/
#floatguanggao2{
padding: 6px;
400px;
height: 140px;
background-color: #f57c19;
left: 0;
bottom: 28%;
z-index: 10;
opacity: 1;
filter: alpha(opacity:100);
animation: animatechange2 20s linear alternate infinite;
}
#floatguanggao2:hover{
animation-play-state: paused;
}
#floatguanggao2 span.title{
color: red;
font-size: 16px;
margin-top: 6px;
margin-left: 10px;
}
#floatguanggao2 #floatguanggaobtn2{
margin-right: 6px;
}
#floatguanggao2 #floatguanggaobtn2>span{
color: red;
}
#floatguanggao2 .textbox{
98%;
margin: 10px auto;
border-top: 1px solid #f5f5f5;
}
#floatguanggao2 .textbox h2{
color: white;
font-weight: bold;
font-size: 18px;
padding-top: 20px;
line-height: 24px;
}
#ani1-h2{
animation-duration: 2s;
}
/*悬浮广告三*/
#floatguanggao3{
padding: 6px;
400px;
height: 140px;
background-color: #00b957;
right: 0px;
bottom: 6%;
z-index: 10;
animation: animatechange3 20s linear alternate infinite;
}
#floatguanggao3:hover{
animation-play-state: paused;
}
#floatguanggao3 span.title{
color: red;
font-size: 16px;
margin-top: 6px;
margin-left: 10px;
}
#floatguanggao3 #floatguanggaobtn3{
margin-right: 6px;
}
#floatguanggao3 #floatguanggaobtn3>span{
color: red;
}
#floatguanggao3 .textbox{
98%;
margin: 10px auto;
border-top: 1px solid #f5f5f5;
}
#floatguanggao3 .textbox h2{
color: white;
font-weight: bold;
font-size: 18px;
padding-top: 10px;
line-height: 24px;
}
#ani1-h3{
animation-duration: 2s;
}
/*动画序列一*/
/*@keyframes animatechange1 {
0%{
left: 0px;
opacity: 0.8;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
left: 100%;
transform: translateX(-400px);
opacity: 0.8;
}
}*/
@keyframes animatechange2 {
0%{
left: 0px;
opacity: 0.8;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
left: 100%;
transform: translateX(-400px);
opacity: 0.8;
}
}
/*动画序列三*/
@keyframes animatechange3 {
0%{
left: 100%;
transform: translateX(-400px);
opacity: 0.8;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
left: 0%;
opacity: 0.8;
}
}
<!-- 漂浮广告 -->