Rumah > hujung hadapan web > tutorial js > 实例讲解jQuery实现的文字逐行向上间歇滚动效果

实例讲解jQuery实现的文字逐行向上间歇滚动效果

小云云
Lepaskan: 2017-12-29 10:34:59
asal
1949 orang telah melayarinya

本文主要介绍了jQuery实现的文字逐行向上间歇滚动效果,涉及jQuery基于时间函数的页面元素样式动态变换相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

运行效果图如下:

具体代码如下:

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>www.jb51.net jQuery文字逐行向上滚动代码</title>

<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style>

*{ margin:0px; padding:0px; font-family:&#39;微软雅黑&#39;; -webkit-tap-highlight-color:rgba(0,0,0,0); }

li{ list-style:none }

img{ border:none}

a{text-decoration:none;}

/* -------------------------摇奖排行榜----------------------------------- */

.Top_Record{}

.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}

.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}

.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}

.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }

.maquee{ height:195px;}

.topRec_List ul{ width:100%; height:195px;}

.topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}

/*.topRec_List li:nth-child(2n){ background:#077cd0}*/

.topRec_List li p{ float:left;}

.topRec_List li p:nth-child(1){ width:17%;}

.topRec_List li p:nth-child(2){ width:18%;}

.topRec_List li p:nth-child(3){ width:25%;}

.topRec_List li p:nth-child(4){ width:40%;}

.apple a{display:block; text-decoration:none;}

.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}

.apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}

.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}

</style>

</head>

<body>

<p class="Top_Record">

  <p class="record_Top">摇奖排行榜</p>

  <p class="topRec_List">

    <dl>

      <dd>编号</dd>

      <dd>姓名</dd>

      <dd>奖项</dd>

      <dd>时间</dd>

    </dl>

    <p class="maquee">

      <ul>

        <li>

          <p>1</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>2</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>3</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>4</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>5</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>6</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>7</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

        <li>

          <p>8</p>

          <p>王**</p>

          <p>中了30元</p>

          <p>2014/12/30 14:20</p>

        </li>

      </ul>

    </p>

  </p>

</p>

<script type="text/javascript">

  function autoScroll(obj){

    $(obj).find("ul").animate({

      marginTop : "-39px"

    },1000,function(){

      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);

    })

  }

  $(function(){

    var scroll=setInterval(&#39;autoScroll(".maquee")&#39;,1500);

     $(".maquee").hover(function(){

      console.log("aaa");

      clearInterval(scroll);

     },function(){

      scroll=setInterval(&#39;autoScroll(".maquee")&#39;,1500);

     });

  });

</script>

</body>

</html>

Salin selepas log masuk

相关推荐:

javascript 单行文字向上跑马灯滚动显示_广告代码

基于jquery实现的文字向上跑动类似跑马灯的效果_jquery

jquery单行文字向上滚动效果的实现代码_javascript技巧

Atas ialah kandungan terperinci 实例讲解jQuery实现的文字逐行向上间歇滚动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan