纯javascript实现四方向文本无缝滚动效果
(编辑：jimmy 日期: 2026/5/5 浏览：3 次 )
实现一个文本无缝滚动的效果：
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="zh-CN" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="zh-CN" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->
<head>
<title>文字滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:20px;}
.textbox{border:1px solid #ddd;width:auto;overflow: hidden;}
.textbox ul{list-style: none;position: relative;}
.textbox ul li{padding:5px 0;}
</style>
</head>
<body class="home-page">
<div id="textbox" class="textbox">
<ul>
<li>汽车 | 运动B级车降3万5 </li>
<li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
<li>教育 | 各省前三报考华工重奖10万元/人</li>
<li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
<li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
<li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
<li>汽车 | 平行进口车加价11万</li>
<li>汽车 | 运动B级车降3万5</li>
<li>汽车 | 平行进口车加价11万</li>
<li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
</ul>
<a href="#" class="btnPrev">向左</a>
<a href="#" class="btnNext">向右</a>
</div>
<br>
<br>
<div id="textbox2" class="textbox">
<ul>
<li>汽车 | 运动B级车降3万5 </li>
<li>家居 | 这么厉害的装修 女人真的要坐不住了</li>
<li>教育 | 各省前三报考华工重奖10万元/人</li>
<li>汽车 | 运动B级车降3万5 平行进口车加价11万</li>
<li>健康 | 滥用激素酿苦果 14岁男孩10年不长个儿</li>
<li>数码 | 最新手机报价 说好的宽带降费提速呢？</li>
<li>汽车 | 平行进口车加价11万</li>
<li>汽车 | 运动B级车降3万5</li>
<li>汽车 | 平行进口车加价11万</li>
<li>运动 | 恒大亚冠生死战 猜比分赢正版球衣</li>
</ul>
<a href="#" class="btnPrev">向上</a>
<a href="#" class="btnNext">向下</a>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">
一些問題：
本地測試沒問題，但是 通過document.write()把代碼輸入執行后，垂直模式下的li的高度height()獲取會有問題。原因不明,非常不解..
以上所述就是本文的全部内容了，希望大家能够喜欢。
下一篇：Bootstrap基础学习