网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

在特定范围内循环上下左右平移的图层JS特效

发表于2014/6/13 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 3,739℃

点击开始按钮，该DIV就会向右平移50px后停止0.5秒再向右平移50px，再向下平移50px，再向下平移50px，再向左平移50px,不停循环以上动作。

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#playbox{ width:500px; height:500px; background:#09F; position:relative}
#box{ width:50px; height:50px; background:#FFF; position:absolute; top:50px; left:50px;}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<div id="playbox">
<div id="box" dir="e"></div>
<button type="button" id="btn">开始</button>
</div>
<script type="text/javascript">
function play(){
var n = 100; //偏移距离（单位：像素）
var t = 0.5; //停顿时间（单位：秒）
var $box = $('#box');
var dir = $box.attr('dir') || 'e';
switch(dir){
case 'e':
$box.animate({left: '+='+ n +'px'});
dir = 's';
break;
case 's':
$box.animate({top: '+='+ n +'px'});
dir = 'w';
break;
case 'w':
$box.animate({left: '-='+ n +'px'});
dir = 'n';
break;
case 'n':
$box.animate({top: '-='+ n +'px'});
dir = 'e';
break;
}
$box.attr('dir',dir);
window.fn = setTimeout(function(){
play();
},t*1000);
}
$(document).ready(function(e) {
$('#btn').click(function(){
if($(this).html()=='开始'){
$(this).html('停止');
play();
}
else{
clearTimeout(fn);
$(this).html('开始');
}
});
});
</script>
</body>
</html>

运行代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/8.html