想制作一个类似于子弹连续发射效果，可第二个开始移动时，第一个停了，请教有弄过这个的吗
日期：2014-05-16 浏览次数：20308 次
想制作一个类似于子弹连续发射效果，可第二个开始移动时，第一个停了，请问有弄过这个的吗？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery.min.js"></script>
<title>13</title>
<style>
</style>
</head>
<body>
<input type="button" value="连续点击" id="btn1"/>
<script>
$("#btn1").click(f1)
function f1(){
$div=$("<div style='background:yellow; width:100px; height:100px;z-index:2;position:absolute; left:40px; top:40px';></div>")
$("body").append($div);
var haha=setInterval(move,10);
function move(){
var curLeft=$div.css('left');
$div.css('left',parseInt(curLeft)+4+'px');
if(parseInt($div.css('left'))+130>document.documentElement.clientWidth){
clearInterval(haha);
$div.remove()
}
}
}
</script>
</body>
</html>
------解决方案--------------------
$div 前加了 var
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery.min.js"></script>
<title>13</title>
<style>
</style>
</head>
<body>
<input type="button" value="连续点击" id="btn1"/>
<script>
$("#btn1").click(f1)
function f1(){
$div=$("<div style='background:yellow; width:100px; height:100px;z-index:2;position:absolute; left:40px; top:40px';></div>")
$("body").append($div);
var haha=setInterval(move,10);
function move(){
var curLeft=$div.css('left');
$div.css('left',parseInt(curLeft)+4+'px');
if(parseInt($div.css('left'))+130>document.documentElement.clientWidth){
clearInterval(haha);
$div.remove()
}
}
}
</script>
</body>
</html>
------解决方案--------------------
$div 前加了 var
$("#btn1").click(f1);
function f1(){
var $div=$("<div style='background:yellow; width:100px; height:100px;z-index:2;position:absolute; left:40px; top:40px';></div>")
$("body").append($div);
var haha=setInterval(move,10);
function move(){
var curLeft=$div.css('left');
$div.css('left',parseInt(curLeft)+4+'px');
if(parseInt($div.css('left'))+130>document.documentElement.clientWidth){
clearInterval(haha);
$div.remove()
}
}
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
