基于javascript實現(xiàn)文字無縫滾動效果
更新時間：2016年03月22日 15:33:34 作者：aubin
這篇文章主要介紹了基于javascript實現(xiàn)文字無縫滾動效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)文字無縫滾動的全部代碼，供大家參考，具體內(nèi)容如下
效果圖：
實現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0;padding:0;}
.div{margin:100px auto 0;width:350px;height:168px; background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px; cursor: pointer;}
.div ul li{list-style:none;height:24px; line-height: 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow: hidden;}
</style>
</head>
<body>
<div class="div" id="div">
<ul>
<li>1、分看見地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德薩</li>
<li>2、分看見地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德</li>
<li>3、分看見地聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>4、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>5、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>6、分看見地上放聲大哭了范聲大哭了上放聲大哭了</li>
<li>7、分看見地上放聲大哭了上放聲大哭了上放聲大哭了范上放聲大哭了上放聲大哭了德</li>
<li>8、分看見地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
</ul>
</div>
<script type="text/javascript">
var area = document.getElementById('div');
var iliHeight = 24;//單行滾動的高度
var speed = 50;//滾動的速度
var time;
var delay= 1000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一樣的內(nèi)容
function startScroll()
{
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp()
{
if(area.scrollTop % iliHeight==0)
{
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中處理數(shù)組,對象和正則的實用函數(shù)
本文主要分享一下最近項目中遇到的一些javascript的業(yè)務(wù)邏輯函數(shù),這些函數(shù)可以提成一個公用的工具函數(shù)以便于在以后的項目中進行使用,希望對大家有所幫助2023-11-11
這篇文章主要為大家詳細介紹了JavaScript仿小米輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
一步快速解決微信小程序中textarea層級太高遮擋其他組件
這篇文章主要給大家介紹了關(guān)于如何通過一步快速解決微信小程序中textarea層級太高遮擋其他組件問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)淡出淡入輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
js中判斷一個數(shù)是不是素數(shù)的三種方法例子
這篇文章主要給大家介紹了關(guān)于js中如何判斷一個數(shù)是不是素數(shù)的三種方法,素數(shù)(只能被1和本身整除的數(shù))規(guī)律:把這個數(shù)除以它之前的每一個數(shù)(從2開始)只要找到一個整除(余數(shù)為0)就是非素數(shù),需要的朋友可以參考下2023-10-10
本篇文章主要介紹了微信小程序中實現(xiàn)手指縮放圖片的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
TypeScript新特性之using關(guān)鍵字的使用方法
TypeScript 5.2版本中新添加了using關(guān)鍵字,目前該關(guān)鍵字的提案也進入了ECMAScript的Stage 3,也就是說很快就會進入JavaScript語言本身中,using和const, let和var一樣都是用于變量聲明的,那么它到底有什么與眾不同的地方呢,本文給大家介紹的非常詳細2023-11-11
在這篇文章中給大家分享了關(guān)于JavaScript實用代碼小技巧的相關(guān)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
JavaScript面向?qū)ο缶幊虒崿F(xiàn)模擬
面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實世界中的復(fù)雜關(guān)系抽象成一個個對象,通過對象之間的分工合作對現(xiàn)實世界進行模擬2022-10-10
這篇文章主要介紹了利用JS實現(xiàn)頁面刪除并重新排序功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12