實現頁面公告欄迴圈向上輪播
阿新 • • 發佈：2018-12-07
解決方案
1、 HTML
先建一個div層作為公告顯示區，裡面包裹一個公告列表(ul);
?| 1 2 3 4 5 6 7 8 |
<
div
class
=
"notice"
>
<
ul
>
<
li
>第1條公告第1條公告第1條公告第1條公告第1條公告第1條公告</
li>
<
li
>第2條公告第2條公告第2條公告第2條公告第2條公告第2條公告</
li
>
<
li
>第3條公告第3條公告第3條公告第3條公告第3條公告第3條公告</
li
>
<
li
>第4條公告第4條公告第4條公告第4條公告第4條公告第4條公告</
li
>
</
ul
>
</
div
>
|
2、 CSS
固定公告欄顯示區域的高度（35px）,每條公告資訊（li）的高度也必須是這個高度（我這裡偷懶就用了行高），後面js中還要用到這個值。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div,ul,li{
margin
:
0
;
padding
:
0
}
/*先初始化一下預設樣式*/
.notice {
width
:
300px
;
/*單行顯示，超出隱藏*/
height
:
35px
;
/*固定公告欄顯示區域的高度*/
padding
:
0
30px
;
background-color
:
#b3effe
;
overflow
:
hidden
;
}
.notice ul li {
list-style
:
none
;
line-height
:
35px
;
/*以下為了單行顯示，超出隱藏*/
display
:
block
;
white-space
:
nowrap
;
text-
overflow
: ellipsis;
overflow
:
hidden
;
}
|
3、 JavaScript
封裝函式 noticeUp.js
使用 jquery animate方法改變列表ul的marginTop值來實現滾動效果;
知識點：
1、animate 回撥函式 animate 函式執行完之後，要執行的函式。
在被選元素的結尾（仍然在內部）插入指定內容。
注意：指定內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡而言之，這相當於一個移動操作，而不是複製操作。
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*
* 引數說明
* obj : 動畫的節點，本例中是ul
* top : 動畫的高度，本例中是-35px;注意向上滾動是負數
* time : 動畫的速度，即完成動畫所用時間，本例中是500毫秒，即marginTop從0到-35px耗時500毫秒
* function : 回撥函式，每次動畫完成，marginTop歸零，並把此時第一條資訊新增到列表最後;
*
*/
function
noticeUp(obj,top,time) {
$(obj).animate({
marginTop: top
}, time,
function
() {
$(
this
).css({marginTop:
"0"
}).find(
":first"
).appendTo(
this
);
})
}
|
4、 封裝函式的呼叫
首先引入jQuery庫和自己的封裝外掛
使用定時器setInterval來控制公告資訊顯示的時間間隔，本例中是2000毫秒
?| 1 2 3 4 5 6 7 8 |
<
script
src
=
"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"
></
script
>
<
script
src
=
"noticeUp.js"
></
script
>
<
script
>
$(function () {
// 呼叫 公告滾動函式
setInterval("noticeUp('.notice ul','-35px',500)", 2000);
});
</
script
>
|