原生javascript无缝滚动效果

作者：简简单单 2013-08-20

提示：您可以先修改部分代码再运行

<!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>原生javascript无缝滚动效果</title>

/* YUI reset */
* {margin:0; padding:0;}
/* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;} */
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul,li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

/* my */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {*zoom:1;}

body {color:#333; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;}
a {text-decoration:none; color:#333;}
a:hover {text-decoration:underline;}

.wrapper { margin:0 auto; padding-bottom:50px;}
.ad { margin:10px auto 0;}
.ad li {padding-top:5px;}

h1 { line- font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;}

.download {display:inline-block;  line- padding:0 10px; background:#333; font-size:14px; font-weight:bold; text-align:center; color:#fff; border:1px solid #999; margin-top:10px;}
.fenxiang { padding:20px 0 10px; margin-bottom:10px;}

.shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;}
.shuoming dt { line- font-weight:bold; text-indent:10px;}
.shuoming dd {line- padding:5px 20px;}
.shuoming dd a {text-decoration:underline;}

.tongji {display:none;}
</style>

<body>
<div class="wrapper">
	<h1>原生javascript效果：无缝滚动</h1>
	
	<div id="con">
		<div class="roll">
			<ul>
				<li><a href="javascript:;">www.111com.net<br />无缝滚动演示<br />001</a></li>
				<li><a href="javascript:;">www.111com.net<br />无缝滚动演示<br />002</a></li>
				<li><a href="javascript:;">www.111com.net<br />无缝滚动演示<br />003</a></li>
				<li><a href="javascript:;">www.111com.net<br />无缝滚动演示<br />004</a></li>
			</ul>
		</div>
		<span><< 向左</span>
		<span>向右 >></span>
	</div>

</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

原生javascript无缝滚动效果

相关文章

精彩推荐