猿问
下载APP

left和offsetLeft在js应用中的区别?

最近写了个无缝轮播图,发现在一个if判断中offsetleft和style.left的运行效果不一样,但重新写了个一模一样原理的样本,两者的效果又一样,真的不知道问题出在哪里,请大家指教一下。


代码如下:

<!DOCTYPE html><head>	<style>	body,p,i{		margin:0;		padding: 0;		color:gray;	}	i{font-style:normal;display: inline-block;vertical-align: top;}	input[type=range]{		margin-left:10px;	}	.mainbox{		width: 500px;		margin:0 auto;	}	.bannerBox{		width: 100%;		height: 200px;		position: relative;		overflow: hidden;	}	.banner{		left:0px;		width: 500%;		height: 200px;		position: absolute;		transition:left .5s;	}	.banner span{		width:500px;		height:200px;		float: left;		display: block;		text-align: center;		line-height: 200px;		font-size: 100px;		border: 1px solid gray;		box-sizing:border-box;		color:gray;	}	.controller{		width: 100%;		height: 60px;	}	.controller span{		width:50%;		height:30px;		padding-left: 3px;		float: left;		line-height: 30px;		box-sizing:border-box;		font-size: 10px;	}	.controller span p{		float: left;	}	</style></head><body><!--样本 	<div style="width:100px;height:100px;background:blue;position:absolute;left:500px;"></div>	<div style="width:100px;height:100px;background:red;position:absolute;left:500px;top:100px;"></div>	<script>	var e=document.getElementsByTagName("DIV")[0];	var e1=document.getElementsByTagName("DIV")[1];var time1=setInterval(function(){	console.log(e.style.left+"--"+e.offsetLeft);	if(e.offsetLeft>-100){e.style.left=e.offsetLeft-100+"px"		if(e.offsetLeft<=100){			setTimeout(function(){				e.style.left=500+"px";			},500);		}}		else{e.style.left=500+"px";}	},2000);var time2=setInterval(function(){	console.log(e1.style.left+"-000-"+e1.offsetLeft);	if(parseInt(e1.style.left)>-100){e1.style.left=e1.offsetLeft-100+"px"		if(parseInt(e1.style.left)<=100){			setTimeout(function(){				e1.style.left=500+"px";			},500);		}}		else{e1.style.left=500+"px";}	},2000);</script>--><div class="mainbox">		<div class="bannerBox" id="bBox">			<div class="banner" id="bLoop">				<span>1</span>				<span>2</span>				<span>3</span>				<span>4</span>				<span>1</span>				<dl>					<dd><a href="#"/></dd>					<dd><a href="#"/></dd>					<dd><a href="#"/></dd>					<dd><a href="#"/></dd>					<dd><a href="#"/></dd>				</dl>			</div>		</div>		<div class="controller">			<span>				<p>WIDTH:</p>				<input id="bWidth" type="range" min="100" max="500" value="500"/>				<i id="widthValue">500</i>			</span>			<span>				<p>HEIGHT:</p>				<input id="bHeight" type="range" min="100" max="400" alue="400"/>				<i id="heightValue">400</i>			</span>			<span>				<p>INTERVAL:</p>				<input id="bInterval" type="range" min="100" max="2000" value="2000"/>				<i id="interValue">2000</i>			</span>			<span>				<input type="file" multiple="multiple"/>			</span>		</div>	</div><script type="text/javascript">var loop=document.getElementById("bLoop");var time1=setInterval(bannerAni,2000);function bannerAni(){	if(parseInt(loop.style.left)>-2000){		loop.style.transition=".5s";		loop.style.left=loop.offsetLeft+-500+"px";		if(parseInt(loop.style.left)<=-2000){		setTimeout(function(){	//提前触发动画		loop.style.left=0+"px";		loop.style.transition="0s";		},1000)}	} 		else{		loop.style.left=0+"px";		loop.style.transition="0s";	}}function bannerLoop(){	loop.style.left="0px";	var te=document.getElementById("bBox");	te.onmouseover=function(){		clearInterval(time1);		console.log("clear");	}	te.onmouseout=function(){		time1=setInterval(bannerAni,2000);		console.log("reset");	}}function getRangeValue(rangeId){	rangeId.addEventListener("change",	function(){	rangeId.nextSibling.nextSibling.innerHTML=rangeId.value;	},false);}getRangeValue(bInterval);getRangeValue(bHeight);getRangeValue(bWidth);bannerLoop();</script></body></html>

被注释掉的是样本,大家把下面的parseInt(loop.style.left)换成loop.style,left后

原本应该无缝连接的轮播图在最后一张图时出现了停顿,而不是提前调用那个一次性定时器。

效果大家运行一下就知道区别了。


function bannerAni(){

if(parseInt(loop.style.left)>-2000){

loop.style.transition=".5s";

loop.style.left=loop.offsetLeft+-500+"px";

if(parseInt(loop.style.left)<=-2000){

setTimeout(function(){ //提前触发动画

loop.style.left=0+"px";

loop.style.transition="0s";

},1000)}

else{

loop.style.left=0+"px";

loop.style.transition="0s";

}

}

我的问题就是为什么两者的值都一模一样,但最后出来的效果却不同,真不得其解。


weibo_SonoM3_04312013
浏览 167回答 1
1回答

weibo_SonoM3_04312013

第一次提问,真格式怎么那么乱?😥总之上面那大段就是整个页面的代码了。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答