从http://www.php.cn/js-tutorial-350643.html处学习。
当然直接拿过来用是不行,稍微改动了一些。
改动地方:js代码拿到项目里之后,oneInner div块的位置到了网页的左下角,而不是正确的左上角。并且也不能移动。
alert出来 oneInner.offsetTop 和 oneInner.offsetLeft 看了看,和例子中的不一样。对于前端知识并不是很熟悉,遂决定直接改掉初始值试试。
初始化:
var tops = 8;
var lefts = 8;
将move方法中的初始化去掉,测试,正确。
优先级问题
这个也是问了我前端的同学,用 z-index:(数字);就可以,放在div的style里。例如:z-index:2;
z-index:控制元素层级,匀速重叠的时候,那个元素的z-index大,哪个就排上上面。
<script type="text/javascript">
window.onload=function(){
//写入
var oneInner = document.createElement("div");
oneInner.setAttribute("style","background:#CC0000;position:absolute;z-index:9999;width:200px;height:150px;border:solid 3px #2F74A7;cursor:pointer;");
var oneButton = document.createElement("input");
oneButton.setAttribute("type","button");
oneButton.setAttribute("class","btn btn-warning btn-sm");
oneButton.setAttribute("style","float:right;");
oneButton.setAttribute("value","x");
oneInner.appendChild(oneButton);
var oneSpan = document.createElement("span");
oneSpan.setAttribute("style","word-break:break-all;white-space:normal;");
oneSpan.innerHTML = "<font color='#FFFFFF'><br> 新闻内容:<br> 解决了悬浮框和轮播图优先级问题,上面是悬浮框,下面是轮播图,方法是:z-index:9999;</font>";
oneInner.appendChild(oneSpan);
document.body.appendChild(oneInner);
//定时器
var a1a = setInterval(moves,100);
//函数
var x = 10;
var y = 10;
var tops = 8;
var lefts = 8;
function moves(){
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,100);
}
//删除
oneButton.onclick=function(){
document.body.removeChild(oneInner);
}
}
</script>