基于javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果
更新時(shí)間：2016年03月22日 15:33:34 作者：aubin
這篇文章主要介紹了基于javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的全部代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(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、分看見(jiàn)地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德薩</li>
<li>2、分看見(jiàn)地上放聲大哭了范上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了德</li>
<li>3、分看見(jiàn)地聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>4、分看見(jiàn)地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>5、分看見(jiàn)地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
<li>6、分看見(jiàn)地上放聲大哭了范聲大哭了上放聲大哭了</li>
<li>7、分看見(jiàn)地上放聲大哭了上放聲大哭了上放聲大哭了范上放聲大哭了上放聲大哭了德</li>
<li>8、分看見(jiàn)地上放聲大哭了上放聲大哭了上放聲大哭了上放聲大哭了范德</li>
</ul>
</div>
<script type="text/javascript">
var area = document.getElementById('div');
var iliHeight = 24;//單行滾動(dòng)的高度
var speed = 50;//滾動(dòng)的速度
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript中處理數(shù)組,對(duì)象和正則的實(shí)用函數(shù)
本文主要分享一下最近項(xiàng)目中遇到的一些javascript的業(yè)務(wù)邏輯函數(shù),這些函數(shù)可以提成一個(gè)公用的工具函數(shù)以便于在以后的項(xiàng)目中進(jìn)行使用,希望對(duì)大家有所幫助2023-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript仿小米輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
一步快速解決微信小程序中textarea層級(jí)太高遮擋其他組件
這篇文章主要給大家介紹了關(guān)于如何通過(guò)一步快速解決微信小程序中textarea層級(jí)太高遮擋其他組件問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)淡出淡入輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
js中判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法例子
這篇文章主要給大家介紹了關(guān)于js中如何判斷一個(gè)數(shù)是不是素?cái)?shù)的三種方法,素?cái)?shù)(只能被1和本身整除的數(shù))規(guī)律:把這個(gè)數(shù)除以它之前的每一個(gè)數(shù)(從2開(kāi)始)只要找到一個(gè)整除(余數(shù)為0)就是非素?cái)?shù),需要的朋友可以參考下2023-10-10
微信小程序中實(shí)現(xiàn)手指縮放圖片的示例代碼
本篇文章主要介紹了微信小程序中實(shí)現(xiàn)手指縮放圖片的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
TypeScript新特性之using關(guān)鍵字的使用方法
TypeScript 5.2版本中新添加了using關(guān)鍵字,目前該關(guān)鍵字的提案也進(jìn)入了ECMAScript的Stage 3,也就是說(shuō)很快就會(huì)進(jìn)入JavaScript語(yǔ)言本身中,using和const, let和var一樣都是用于變量聲明的,那么它到底有什么與眾不同的地方呢,本文給大家介紹的非常詳細(xì)2023-11-11
在這篇文章中給大家分享了關(guān)于JavaScript實(shí)用代碼小技巧的相關(guān)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬
面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過(guò)對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬2022-10-10
利用JS實(shí)現(xiàn)頁(yè)面刪除并重新排序功能
這篇文章主要介紹了利用JS實(shí)現(xiàn)頁(yè)面刪除并重新排序功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12