首頁 > web前端 > js教程 > JavaScript實作標題列文字輪播效果程式碼_javascript技巧

JavaScript實作標題列文字輪播效果程式碼_javascript技巧

WBOY
發布: 2016-05-16 15:35:29
原創
2640 人瀏覽過

本文實例講述了JavaScript實作標題列文字輪播效果程式碼。分享給大家參考,具體如下:

這裡示範的JS文字輪播,顯示在標題列區域,以前個人主頁時候經常見到的效果,不過現在都規範了,標題列一般都不加入這種效果了。但可以學習JS製作實現一些文字特效,運行效果後請查看標題列。

運作效果截圖如下:

線上示範網址如下:

http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/

具體程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>文字循环出现</title>

</head>

<body>

<SCRIPT LANGUAGE="JavaScript">

var message = new Array();

message[0] = "欢迎光临脚本之家";

message[1] = "这里有javascript";

message[2] = "网页特效";

message[3] = "图片和背景特效等";

message[4] = "非常多的资源";

message[5] = "你一定会有所收获的";

message[6] = "欢迎你再次光临";

message[7] = "";

var reps = 2;

var speed = 60;

var p = message.length;

var T = "";

var C = 0;

var mC = 0;

var s = 0;

var sT = null;

if (reps < 1) reps = 1;

function doTheThing() {

T = message[mC];

A();

}

function A() {

s++;

if (s > 9) { s = 1;}

if (s == 1) { document.title = '|||★★★★★=====|||----- ['+T+' -----'; }

if (s == 2) { document.title = '|||=★★★★★====|||----- ['+T+' -----'; }

if (s == 3) { document.title = '|||==★★★★★===|||----- ['+T+' -----'; }

if (s == 4) { document.title = '|||===★★★★★==|||----- ['+T+' -----'; }

if (s == 5) { document.title = '|||====★★★★★=|||----- ['+T+' -----'; }

if (s == 6) { document.title = '|||=====★★★★★|||----- ['+T+' -----'; }

if (s == 7) { document.title = '|||====★★★★★=|||----- ['+T+' -----'; }

if (s == 8) { document.title = '|||===★★★★★==|||----- ['+T+' -----'; }

if (s == 9) { document.title = '|||=★★★★★===|||----- ['+T+' -----'; }

if (C < (8 * reps)) {

sT = setTimeout("A()", speed);

C++;

}

else {

C = 0;

s = 0;

mC++;

if(mC > p - 1) mC = 0;

sT = null;

doTheThing();

  }

}

doTheThing();

</script>

</body>

</html>

登入後複製

希望本文所述對大家JavaScript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板