<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://www.jb51.net/workspace/js/jquery-1.7.min.js"></script>
<script>
$(function(){
//写入div
$("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");
//写入关闭按钮
$("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");
//定时器
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();
});
})
</script>
</head>
<body>
</body>
</html>
基本思路：
1.页面加载完成之后向页面插入窗口，之后向窗口插入关闭按钮
2.使用setInterval()函数触发moves（）函数开始动画
3.moves函数：首先获取当前窗口位置，之后随时间使窗口位移，每当位移到游览器边缘时反向运动
4.添加其他事件：鼠标悬停停止运动，鼠标离开继续运动，点击按钮关闭窗口
ps:不建议使用这个特效，影响用户体验
希望对你有所帮助！^_^!~~
您可能感兴趣的文章: