求一个js特效要求一个div层在网页的左上角飘到右下角循环

时间有限大概写了一下
<html>
<head>
<title>test</title>
<script language="javascript">

</script>
</head>
<body onLoad="moveText()">
<div id="txt" style="position:absolute;width=385">test</div>
</body>
</html>

demo here
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div = $('#div')
    div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 3000)
</script>
</body>
</html>

可以让他循环吗<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div = $('#div')
    function foo(){
        div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 3000, 'swing', function(){
            $(this).css({ top : 0, left : 0});
            if(div.css('top') == '0px'){
                foo();
            }
        });
    }
    foo();
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>漂浮</title>
<style type="text/css">
* {margin:0;padding:0}
img{border:none}
</style>
<script language="javascript" src="http://www.angelweb.cn/Inc/jquery-1.6.4.min.js"></script>
<script language="javascript">
(function($){
$.fn.adFloat=function(options){
return new AdFloat(this,options);
}
var AdFloat=function(element,options){
this.element=$(element);
this.options=$.extend({
width:100, //默认的广告的宽
height:150, //默认的广告的高
top:0, //默认的广告的Y坐标
left:0, //默认的广告的X坐标
delay:30, //延迟
step:4 //默认的广告每次移动的距离(像素)
},options);
this.interval=null;
this.xPos=this.options.left;
this.yPos=this.options.top;
this.yon=0;
this.xon=0;
this.isPause=false;
this.init();
};
AdFloat.prototype={
init:function(){
var me=this;
me.element.css("display","block");
me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,overflow:"hidden"})
me.element.hover(function(){clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);});
$(document).ready(function(){me.start();});
},
changePos:function(){
var me=this;
var clientWidth=$(window).width();
var clientHeight=$(window).height();
var Hoffset=me.options.height;
var Woffset=me.options.width;
me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()});
if(me.yon){
me.yPos=me.yPos+me.options.step;
}else{
me.yPos=me.yPos-me.options.step;
}
if(me.yPos<0){me.yon=1;me.yPos=0;}
if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);}
if(me.xon){
me.xPos=me.xPos+me.options.step;
}else{
me.xPos=me.xPos-me.options.step;
}
if(me.xPos<0){me.xon=1;me.xPos=0;}
if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);}
},
start:function(){
var me=this;
me.element.css("top",me.yPos);
me.interval=setInterval(function(){me.changePos();},me.options.delay);
}
}
})(jQuery);
</script>
</head><body style="overflow:auto">
<div id="GuangGao" style="display:none;border:1px solid red"><a href="http://www.angelweb.cn" target="_blank"><img src="http://www.angelweb.cn/images/logo.gif" /></a></div>
<div style="height:1400px;width:2300px;border:1px solid red">

</div>
<script language="javascript">
$(function(){
$("#GuangGao").adFloat({width:50,height:50,top:0,left:0})
});
</script>
</body>
</html>

可以让他循环吗<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div = $('#div')
    function foo(){
        div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 3000, 'swing', function(){
            $(this).css({ top : 0, left : 0});
            if(div.css('top') == '0px'){
                foo();
            }
        });
    }
    foo();
</script>
</body>
</html>
悬停和关闭放手继续移动方便给完善下吗?

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div = $('#div')
    function foo1(){
        div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 3000, 'swing', function(){
                foo2();
        });
    } function foo2(){
        div.animate({top :0, left : 0}, 3000, 'swing', function(){
                foo1();
        });
    }
    foo1();
</script>
</body>
</html>

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
#div1{ position:relative; width:100px; height:100px;}
#div1 i{ position:absolute; display:block; width:20px;height:20px; right:0;top:0;cursor:pointer;border:1px solid #ddd;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"> <div id="div1">
<i>X</i>
<div>
</div>
<script type="text/javascript">
    var div = $('#div') div.mouseover(function(){
div.stop();
}); div.mouseout(function(){
foo();
}); $("#div1 i").click(function(){
div.hide();
});
    function foo(){
        div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 6000, 'swing', function(){
            $(this).css({ top : 0, left : 0});
            if(div.css('top') == '0px'){
                foo();
            }
        });
    }
    foo();
</script>
</body>
</html>

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{ position:absolute;top: 0;left: 0; width:100px; height:100px;background: #f1f1f1;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div = $('#div')
    function foo1(){
        div.animate({top : $(window).height() - div.height(), left : $(window).width() - div.width()}, 3000, 'swing', function(){
                foo2();
        });
    } function foo2(){
        div.animate({top :0, left : 0}, 3000, 'swing', function(){
                foo1();
        });
    }
    foo1();
</script>
</body>
</html>
网上代码很多的

调试易

求一个js特效要求一个div层在网页的左上角飘到右下角循环

解决方案 »

求一个js特效 要求一个div层在网页的左上角飘到右下角 循环

解决方案 »

求一个js特效要求一个div层在网页的左上角飘到右下角循环