<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>漂浮窗</title>
<style>
#Driftbox {
z-index: 100;
320px;
height: 220px;
left: 0;
top: 0;
box-shadow: 0 0 5px #0083C9;
position: absolute;
border: 1px solid #0083C9;
border-radius: 8px;
}
#Driftbox h2 {
padding:20px 4px ;
font-size: 20px;
color:#0083C9;
margin: 0;
}
#Driftbox p{
padding:10px 4px ;
font-size:20px;
color:#0083C9;
line-height: 20px;
text-align: center;
font-weight: bold;
margin: 0;
}
.closebox{
position: absolute;
top: -8px;
left: 290px;
border: none;
color:#0083C9;
z-index: 101;
}
/*图标*/
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1558400625929'); /* IE9 */
src: url('iconfont.eot?t=1558400625929#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALQAAsAAAAABoQAAAKBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBEIEgATYCJAMICwYABCAFhG0HMBvGBRHVkwdkX0JONrqQlJCk2r4b0wn66tz+WbAPhqL9QFP4ChIAAAAAIHji9/eduXc+mZaK28EGJjWxEgkpbYgbilGlUJ6e7N/NmFpsYpKClm1tGq5V2E4ZoViyVzuWmp6Rhx0uhA7jl1CqPfA/Cfh/r60Ai+UHjXzTTe/A6/kRRVolie5uAPxx7/TP8y6Q+c67XMYYtMagLsA4kALcC6MtXCSxN4zdROAQzkMAP1lUIPWNxwsECpgmgIwNpyFEzo2iVsyL4K5Zq8guLrxm2xwCO/z78hGIFwwuCyhoHVgl0C8TTLDkDHooggcEbbMLsEAFoCCdteFmhFhUiz9s5MG+cgVevqgJ2eufh7gB2UEAMlTBPQmx6FbZDQAK/aEUqB71NrDBDGv28oH5xfXn5Ytt6ooneJchB6ZvHqtD/tU+WUA0dW7mczuHXMojkrSIS09yNUB2Ceym3JYeClWeLlr4B5wb/FsICIQCe+7+yPLvLQXgLnmaO50b0s8KvOewCPwrYc82DcXAaNQX1sYNpdh7qPHjBxzo9jjPYzWpG4sLXlK3Z/WQmYLFSwGqZAW4CFAJbrxUgZ9ymjYHSDCDEPUBZawrIETZB0OYA7BEOUKVfAIXab7ATVQs+OmW0Z4BikTL7REKlRKMXpjH3BhkVlvknijtq1CyYk67kXS5D33HK8Y21JDMsaC7p4GqQSNc41q5jKqKsRUuKFYnU20XrmvqbuTEXIMNIxQqJRi9MI+5MbS72qXPnyjtq1BaWgacN5IuHxx9x+uBbhRNr5Z7uaa7p4GqQSNc41oZRVXF2NaPKihWJxsRbBcu7GT6Kpz1VfXX7QH8ALTGgsMsnvZhE+UAAAAA') format('woff2'),
url('iconfont.woff?t=1558400625929') format('woff'),
url('iconfont.ttf?t=1558400625929') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1558400625929#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 34px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-guanbi:before {
content: "e7b7";
}
</style>
</head>
<body>
<div id="Driftbox">
<h2> 通 知:</h2>
<p>通知内容通知内容通知内容</p>
<p>通知内容通知内容通知内容</p>
<p>通知内容通知内容通知内容</p>
<span class="iconfont icon-guanbi closebox" onclick="showimagecloseu();"></span>
</div>
<script>
function showimagecloseu()
{
var objbox=document.getElementById("box");
objbox.style.display = 'none';
};
//水平 //上下
var speedX = 0;speedY = 0;
var sxinu = true; yinu = true;
var stepu = 1;
var delaspeedY = 88;
var objbox=document.getElementById("Driftbox");
var bdspeedY = document.body;
if (document.compatMode && document.compatMode != "BackCompat")
bdspeedY = document.documentElement;
else
bdspeedY = document.body;
function floatADu()
{
var bdy_scrollTop = document.body.scrollTop | document.documentElement.scrollTop;
var Lu24=Tu24=0;
var Ru24= bdspeedY.clientWidth-objbox.offsetWidth;
var Bu24 = bdspeedY.clientHeight-objbox.offsetHeight;
objbox.style.left = speedX + bdspeedY.scrollLeft+"px";
objbox.style.top = speedY + bdy_scrollTop+"px";
speedX = speedX + stepu*(sxinu?1:-1);
if(speedX < Lu24)
{
sxinu = true;
speedX = Lu24;
}
if(speedX > Ru24)
{
sxinu = false;
speedX = Ru24;
}
speedY = speedY + stepu*(yinu?1:-1);
if(speedY < Tu24)
{
yinu = true;
speedY = Tu24;
}
if(speedY > Bu24)
{
yinu = false;
speedY = Bu24;
}
}
var itlu24;
if(window.navigator.userAgent.indexOf("MSIE")>=1)
{
window.attachEvent('onload', adftu24);
}
else
{
window.addEventListener('load',adftu24, false);
}
function adftu24()
{
itlu24 = setInterval("floatADu()", delaspeedY);
}
objbox.onmouseover=function(){clearInterval(itlu24);};
objbox.onmouseout=function(){itlu24=setInterval("floatADu()", delaspeedY)};
</script>
</body>
</html>