应该是你代码问题吧,我按你说的试了一下,完全没有问题,在边缘怎么疯狂试探都没事
代码在哪里?
从-200到0的第一次运动是:目标值减去元素的left/20 就是(0--200)/20。向目标值移动了10;
第二次是(0--190)/20。再次移动了9.5;
第三次是(0--180.5)/20.移动了9.025
第四次(0--171.475)/20.移动了8.57375;
第五次(0--162.901625)/20 .移动8.14508125;
。。。。。
第N次(0--8.5523424223)/20.结果是0.4332312315,不满一个像素,所以停止
只保留前两位小数
这是谷歌浏览器自带的默认样式,可以百度如何清除,我记得是有一大段css代码的,直接拷贝到自己的css文件夹调用即可。
speed = speed < 0 ? Math.ceil(speed) : Math.floor(speed); 这句错了;
速度为正时,要往上取整,速度为负时,往下取整,你刚好写反了。
你与教程视频里的区别在与,教程中判断时 speed>0,你这判断的是<0,所以语句顺序也要改一下。
还有重复了<style type="text/css">,按理说这种写错了软件应该会提醒的。
加油~
id="div1" 没有加引号
如果speed是正数的话,向上取整,比如0.5取到1才有意义,毕竟0.5是有速度的而不是0;
如果speed是负数的话,向下取整,比如-0.5取到-1,-0.5会进行反向运动从而达到停止条件iTarget == icur,如果为负数向上取整则Math.ceil(-0.5) = -0则达不到iTarget == icur。因此负数要像下取整Math.floor()
{'width' : 400, 'height':400, 'opacity':100} 是把css属性当做一个对象的写法,其中width、height、opacity是对象的属性,后面的是属性值,对象属性值一般需要用引号引起来,所以jq中把'250px'引起来。
至于move的参数写法,其实是不太规范的。
你把那些定义speed 的内容放在setInterval()里面试一试
time不定义的话是没有这个变量的
搞了半天 我还在纳闷怎么不行。var speed = (iTarget - oBox.offsetLeft)/30;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
这两行 要写在setinterval这个函数里面
假设-200 》 0的过程,
speed = ( iTarget - oDiv.offsetLeft )/20
随着移动的过程,oDiv.offsetLeft 值会越来越大,-200 ... -100 .. -50 .. -20 ... -10
对应的值speed就越来越小,200/20 100/20 50/20 20/20 10/20 5/20
很明显,后面的值是0<speed<1的 而且speed越来越小,
所以在
oDiv.style.left = oDiv.offsetLeft + speed +"px"; 中就无法达到目标值,
所以采取向上取整的形式把speed=0.*的情况都取值为1,
1,var div=document.getElementById('div'); 放在move函数里面
2,math改成大写 Math
<script> window.onload=function(){ var div=document.getElementById('div'); div.onmouseover=function(){ move(0); } div.onmouseout=function(){ move(-200); } } var timer; function move(iTarget){ var div=document.getElementById('div'); clearInterval(timer); timer=setInterval(function(){ var speed = (iTarget-div.offsetLeft)/20; speed = speed >0 ? Math.ceil(speed):Math.floor(speed); if(div.offsetLeft==iTarget){ clearInterval(timer); }else{ div.style.left=div.offsetLeft+speed+'px'; } },30); } </script>
我自己解决了
55行,if(fuck.offLeft==-200){,offsetLeft漏拼
speed=speed>0?Math.ceil(speed):Math.floor(speed);
上述这段代码用的三元运算符,如同下面代码意思:
var a = 5; var b = 8;
var result = a > b ? a : b;
alert(result);
如果a大于b就把?后面a的值保存在result这个变量里面,alert(弹出a结果),如果b大就是其反。
var result = 如果a>b就是a给result,如果不大于就把b结果给result,
speed=speed>0?Math.ceil(speed):Math.floor(speed);
speed这个参数大于0就会先去找(?)问号后面的Math.ceil(speed)看他成不成立是不是它要的结果,如果不是就去找(:)后面的Math.floor(speed)的这句话,至于是找Math.ceil(speed)还是Math.floor(speed)那就因speed传的值决定。
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
var speed =(iTarget-oDiv.offsetLeft)/10;
speed=speed>0? Math.ceil(speed):Math.floor(speed);
} ------------这个花括号去掉
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30)
《《 -----------------这个地方加上花括号
还有上面的div样式里left:-200加上单位px;
没有oDiv.offsetAlpha这个属性,改成alpha就行啦
你的这句话写错了:
var timerId=setInterval(function move()
你先前已经定义过了,但是你这里又重新定义了一遍,但是javascript的运行是从上到下的,他认为你重新定义了一个新的timerId,简单说你去掉这个var就正常了,改成这样:
timerId=setInterval(function move()
同学 需要哪一部分的源代码?
已有解决方案 虽然不够好 但是好在代码简单
var timer; function shareTabToggle(iTarget){ clearInterval(timer); var ele = document.getElementById("share"); var temp = ele.offsetLeft; var speedLst = []; var speed = 0; while(true){ speed = (iTarget - temp)/10; speed = speed > 0 ? Math.ceil(speed) : (speed < 0 ? Math.floor(speed) : speed); speedLst.push(speed); temp += speed; if(temp == iTarget){ break; } } var speedSize = speedLst.length-1; console.log(speedLst); timer = setInterval(function(){ // 数组正着读就是由快到慢, 倒着读就是慢到快 ele.style.left = ele.offsetLeft + speedLst[speedSize--] + "px"; if(speedSize == -1){ clearInterval(timer); } },30); }; window.onload = init; function init(){ var shareTab = document.getElementById("share"); if(shareTab.addEventListener){ shareTab.addEventListener('mouseover',function(event){ event.stopPropagation();shareTabToggle(0);},false); shareTab.addEventListener('mouseout',function(){shareTabToggle(-200);},false); }else if(shareTab.attachEvent){ shareTab.attachEvent('onmouseover',function(event){ event.cancelBubble=true;shareTabToggle(0);}); shareTab.attachEvent('onmouseout',function(){shareTabToggle(-200);}); }else{ shareTab.onmouseover = function(event){ event.stopPropagation(); shareTabToggle(0); }; shareTab.onmouseout = function(){ shareTabToggle(-200); }; } }
if (oDiv.offsetLeft=iTarget)写错了,应该是 if (oDiv.offsetLeft==iTarget)
我也想知道
程序的第24行
应该是小于号
for(var i=0;i<aLi.length;i++){
像素有小数时会四舍五入,所以speed小于1大于0.5时还会动,10px左右的时候停止是刚好speed在0.5的分界线
我猜是因为像素有小数时会四舍五入,所以speed小于1大于0.5时还会动,10px左右的时候停止是刚好speed在0.5的分界线
要检测就要不断刷新不断去获取某个元素的属性,setTimeout只能执行一次,达不到不断刷新获取属性的作用!
timer=setInterval(function(){ if(oDiv.offsetLeft==iTarget){ clearInterval(timer); } //增加两个else if语句 else if(iTarget<0&&iTarget-oDiv.offsetLeft>0){ oDiv.style.left=iTarget+'px'; }else if(iTarget==0&&iTarget-oDiv.offsetLeft<0){ oDiv.style.left=iTarget+'px'; } else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },20);
问题的起因是由于反复的进行鼠标移入移出,导致oDiv.offsetLeft+speed的值超过iTarget这一边界,从而不能清除定时器。