社群學習工具庫休閒

繁体中文

首頁 > web前端 > js教程 > javascript上下左右定时滚动插件_文字特效

javascript上下左右定时滚动插件_文字特效

WBOY

發布： 2016-05-16 18:24:54

原創

1374 人瀏覽過

核心代码:

复制代码代码如下:

控制使用代码:

复制代码代码如下:

效果演示:

<script type="text/javascript"> 
function Marquee() { 
this.ID = document.getElementById(arguments[0]); 
this.Direction = arguments[1]; 
this.Step = arguments[2]; 
this.Width = arguments[3]; 
this.Height = arguments[4]; 
this.Timer = arguments[5]; 
this.WaitTime = arguments[6]; 
this.StopTime = arguments[7]; 
if (arguments[8]) { this.ScrollStep = arguments[8]; } else { this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; } 
this.CTL = this.StartID = this.Stop = this.MouseOver = 0; 
this.ID.style.overflowX = this.ID.style.overflowY = "hidden"; 
this.ID.noWrap = true; 
this.ID.style.width = this.Width; 
this.ID.style.height = this.Height; 
this.ClientScroll = this.Direction > 1 ? this.ID.scrollWidth : this.ID.scrollHeight; 
this.ID.innerHTML += this.ID.innerHTML; 
this.Start(this, this.Timer, this.WaitTime, this.StopTime); 
} 
Marquee.prototype.Start = function(msobj, timer, waittime, stoptime) { 
msobj.StartID = function() { msobj.Scroll(); } 
msobj.Continue = function() { 
if (msobj.MouseOver == 1) { setTimeout(msobj.Continue, waittime); } 
else { clearInterval(msobj.TimerID); msobj.CTL = msobj.Stop = 0; msobj.TimerID = setInterval(msobj.StartID, timer); } 
} 
msobj.Pause = function() { msobj.Stop = 1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue, waittime); } 
msobj.Begin = function() { 
msobj.TimerID = setInterval(msobj.StartID, timer); 
msobj.ID.onmouseover = function() { msobj.MouseOver = 1; clearInterval(msobj.TimerID); } 
msobj.ID.onmouseout = function() { msobj.MouseOver = 0; if (msobj.Stop == 0) { clearInterval(msobj.TimerID); msobj.TimerID = setInterval(msobj.StartID, timer); } } 
} 
setTimeout(msobj.Begin, stoptime); 
} 
Marquee.prototype.Scroll = function() { 
switch (this.Direction) { 
case 0: 
this.CTL += this.Step; 
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } 
else { if (this.ID.scrollTop >= this.ClientScroll) this.ID.scrollTop -= this.ClientScroll; this.ID.scrollTop += this.Step; } 
break; 
case 1: 
this.CTL += this.Step; 
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } 
else { if (this.ID.scrollTop <= 0) this.ID.scrollTop += this.ClientScroll; this.ID.scrollTop -= this.Step; } 
break; 
case 2: 
this.CTL += this.Step; 
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } 
else { if (this.ID.scrollLeft >= this.ClientScroll) this.ID.scrollLeft -= this.ClientScroll; this.ID.scrollLeft += this.Step; } 
break; 
case 3: 
this.CTL += this.Step; 
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } 
else { if (this.ID.scrollLeft <= 0) this.ID.scrollLeft += this.ClientScroll; this.ID.scrollLeft -= this.Step; } 
break; 
} 
} 
</script> 
下方是我的HTML代码，一看就明白怎么回事了:

<ul id="s1"> 
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li> 
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li> 
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li> 
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li>
<li>第三帝国发大概得法规的非官方的鬼地方鬼地方</li> 
</ul> 
<script type="text/javascript"> 
 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相關標籤：

上下左右定时滚动

來源：php.cn

上一篇：基于jquery的滚动新闻列表_jquery 下一篇：jquery 弹出层注册页面等(asp.net后台)_jquery

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

什麼是 NullPointerException，如何修復它？

2024-10-22 09:46:29
從新手到程式設計師：您的旅程從 C 基礎知識開始

2024-10-13 13:53:41
使用 PHP 解鎖 Web 開發：初學者指南

2024-10-12 12:15:51
揭秘 C：為新程式設計師提供一條清晰簡單的道路

2024-10-11 22:47:31
釋放您的編碼潛力：絕對初學者的 C 編程

2024-10-11 19:36:51
釋放你內心的程式設計師：C 絕對初學者

2024-10-11 15:50:41
使用 C 自動化您的生活：適合初學者的腳本和工具

2024-10-11 15:07:41
PHP 變得簡單：Web 開發的第一步

2024-10-11 14:21:21
使用 Python 建立任何東西：釋放創造力的初學者指南

2024-10-11 12:59:11
編碼的關鍵：為初學者釋放 Python 的力量

2024-10-11 12:17:31

最新問題

PHP數組從URL參數中取得的行為不如預期我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...

來自於 2024-04-06 22:09:02

0

1

1428

透過新增 Width 屬性將內容向左移動我已經為主體提供了邊距。主要{左邊緣：200px;右邊距：200px；文本對齊：居中}由於我想以兩行而不是一行顯示文本，因此我在樣式中添加了width屬性。 .p{字體大小：12p...

來自於 2024-04-06 22:01:35

0

3

816

數獨檢查器無法運作？誰能幫我辨識錯誤？我嘗試了在線編輯器上的所有方法，但仍然收到錯誤。但當我在我的機器上的VSCode上執行此操作時，它工作正常。我很困惑，在沒有發現錯誤的情況下無法提交程式碼。我不知道該去哪裡找了。我...

來自於 2024-04-06 21:21:07

0

1

474

MySQL從多個表中取得數據我有一個eg_design表，其中包含以下幾列：和eg_domains表，其中包含以下列：和eg_fonts表，其中包含以下幾列：現在，基於$domain_id我想獲取eg_des...

來自於 2024-04-06 18:42:44

0

2

479

放大 d3.js 時散佈圖點不會保持值這是我第一次使用d3.js，所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止，我幾乎一切正常，但當我縮放時，...

來自於 2024-04-06 18:16:26

0

1

403

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1422755
php入門教程之一週學會PHP

4267807
JAVA 初級入門影片教學

2531773
小甲魚零基礎入門學習Python影片教學

507141
PHP 零基礎入門教學

862246

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板