浮动飘窗效果js加html，css

最新推荐文章于 2023-02-27 14:54:20 发布

努力的愤青

最新推荐文章于 2023-02-27 14:54:20 发布

阅读量9.4k

点赞数

分类专栏： JavaScript 文章标签： javascript html css

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>

<script type="text/javascript">
window.οnlοad=function(){
//写入
var oneInner = document.createElement("div");
oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");
var oneButton = document.createElement("input");
oneButton.setAttribute("type","button");
oneButton.setAttribute("value","x");
if (oneButton.style.cssFloat)
{
oneButton.style.cssFloat="right"
}
else
{oneButton.style.styleFloat="right"}
oneInner.appendChild(oneButton);
document.body.appendChild(oneInner);

//定时器
var a1a = setInterval(moves,100);
//函数

var x = 10;
var y = 10;

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.οnmοuseοver=function(){
clearInterval(a1a);
}
//放手继续运动
oneInner.οnmοuseοut=function(){
a1a =setInterval(moves,100);
}
//删除
oneButton.οnclick=function(){
document.body.removeChild(oneInner);
}
}
</script>

</head>

<body>

</body>
</html>