                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動效果制作

急求左右滾動原理

求大神帶。。

07:16

密碼是數(shù)字

2017-05-04

源自：信息滾動效果制作 2-2

關(guān)注問題我要回答

1452

操作

收起

3 回答

妙柴回答被采納 +3 積分
2017-05-04

參考老師的代碼，你左右的原理和上下是一樣的，只是把里面的行高換成整個DIV的寬度，再把滾動方向從向上改為向左或向右

0 回復有任何疑惑可以回復我~

收起回答

#1

密碼是數(shù)字提問者

非常感謝！

2017-05-05 回復有任何疑惑可以回復我~

hou110
2017-05-14

<!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=utf-8"?/>
		<title>js文字向左無縫滾動</title>
	</head>

	<body>
		<style?type="text/css">
			.qimo8?{
				overflow:?hidden;
				width:?300px;
			}
			
			.qimo8?.qimo?{
				/*width:99999999px;*/
				width:?8000%;
				height:?30px;
			}
			
			.qimo8?.qimo?div?{
				float:?left;
			}
			
			.qimo8?.qimo?ul?{
				float:?left;
				height:?30px;
				overflow:?hidden;
				zoom:?1;
			}
			
			.qimo8?.qimo?ul?li?{
				float:?left;
				line-height:?30px;
				list-style:?none;
			}
			
			.qimo8?li?a?{
				margin-right:?10px;
				color:?#444444;
			}
		</style>
		<div?id="demo"?class="qimo8">
			<div?class="qimo">
				<div?id="demo1">
					<ul>
						<li>
							<a?href='/office/194/46163.htm'>回收站里的文件刪除了怎么恢復</a>
						</li>
					</ul>
				</div>
				<div?id="demo2"></div>
			</div>
		</div>
		<script?type="text/javascript">
			var?demo?=?document.getElementById("demo");
			var?demo1?=?document.getElementById("demo1");
			var?demo2?=?document.getElementById("demo2");
			demo2.innerHTML?=?document.getElementById("demo1").innerHTML;

			function?Marquee()?{
				if(demo.scrollLeft?-?demo2.offsetWidth?>=?0)?{
					demo.scrollLeft?-=?demo1.offsetWidth;
				}?else?{
					demo.scrollLeft++;
				}
			}
			var?myvar?=?setInterval(Marquee,?30);
			demo.onmouseout?=?function()?{
				myvar?=?setInterval(Marquee,?30);
			}
			demo.onmouseover?=?function()?{
				clearInterval(myvar);
			}
		</script>
	</body>

</html>
</td>
</tr>
</table>

可以參考一下，js部分原理是一樣的，但是css關(guān)系也很大

0 回復有任何疑惑可以回復我~

收起回答