php中js实现悬浮窗口,JS实现悬浮移动窗口(悬浮广告)的特效

js方法：

New Document

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);

}

}

jquery方法：

$(function(){

//写入div

$("

//写入关闭按钮

$("

//定时器

var move = setInterval(moves,100);

var x= 10;

var y= 10;

function moves (){

var mw = $("#moveWindow").offset();

var lefts =mw.left;

var tops = mw.top;

if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)

{

x=-x

}

if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0)

{

y=-y

}

lefts+=x;

tops+=y;

$("#moveWindow").offset({top:tops,left:lefts});

}

//悬停停止运动

$("#moveWindow").mouseover(function(){

clearInterval(move);

});

//移开鼠标后继续运动

$("#moveWindow").mouseout(function(){

move = setInterval(moves,100);

});

//点击按钮关闭

$("#removeMW").click(function(){

$("#moveWindow").remove();

});

})

基本思路：

1.页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮

2.使用setInterval()函数触发moves()函数开始动画

3.moves函数：首先获取当前窗口位置，之后随时间使窗口位移，每当位移到游览器边缘时反向运动

4.添加其他事件：鼠标悬停停止运动，鼠标离开继续运动，点击按钮关闭窗口

ps:不建议使用这个特效，影响用户体验

希望对你有所帮助！^_^!~~

更多JS实现悬浮移动窗口(悬浮广告)的特效相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！