信息無縫滾動效果marquee

時間 2019-11-13

標籤信息無縫滾動效果 marquee 简体版

原文原文鏈接

橫向滾動、縱向滾動css

1. 解決滾動的空白html

向左向右滾動的話，能夠根據父級定位left，每次加或者減可使物體向左或右運動，用top也能夠實現向上或向下運動spa

上下滾動實現無縫滾動
1. innerHTML
2. scrollTop
3. offsetHeight
4. setInterval()
5. clearInterval()code

HTML:htm

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>信息無縫滾動效果</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div id="box">
    <ul id="cont1">
        <li><a href="#">111111111111</a></li>
        <li><a href="#">222222222222</a></li>
        <li><a href="#">333333333333</a></li>
        <li><a href="#">444444444444</a></li>
        <li><a href="#">555555555555</a></li>
        <li><a href="#">666666666666</a></li>
        <li><a href="#">777777777777</a></li>
        <li><a href="#">888888888888</a></li>
        <li><a href="#">999999999999</a></li>
    </ul>
    <ul id="cont2"></ul>
</div>

<script src="script.js"></script>

</body>
</html>

CSS：blog

* {
    padding: 0;
    margin: 0;
}

body {
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

ul {
    list-style: none;
}

a img {
    border: none;
}

a {
    color: #333333;
    text-decoration: none;
}

a:hover {
    color: #ff0000;
}

#box {
    width: 335px;
    height: 144px;
    margin: 50px auto 0 auto;
    overflow: hidden; /*  這個必定要加，超出的內容部分要隱藏，省得撐高中間部分 */
}

/*#cont1 {
    background: lightcoral;
}

#cont2 {
    background: lightblue;
}*/

JS：seo

var area = document.getElementById('box');
var cont1 = document.getElementById('cont1');
var cont2 = document.getElementById('cont2');

area.scrollTop = 0;
// 克隆cont1給cont2
cont2.innerHTML = cont1.innerHTML;

function myScroll() {
    if(area.scrollTop >= cont1.scrollHeight) {
        area.scrollTop = 0;
    }else {
        area.scrollTop++;
    }
}

var time = 50;
var interval = setInterval('myScroll()', time);

area.onmouseover = function () {
    clearInterval(interval);
};

area.onmouseout = function () {
    // 繼續執行以前的定時器
    interval = setInterval('myScroll()', time);
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。