信息無縫滾動效果marquee

本文轉載自查看原文 2016-06-22 23:30 12037 前端

橫向滾動、縱向滾動

1. 解決滾動的空白

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

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

HTML:

<!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：

* {
    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：

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);
};

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 marquee+js實現某個區域的“無縫滾動效果” 替換"marquee"，實現無縫滾動 marquee滾動效果 JQ實現文字無縫滾動效果（Marquee插件使用詳解及下載演示）圖片的無縫滾動效果 HTML標簽marquee實現滾動效果 HTML標簽marquee實現滾動效果用js實現圖片的無縫滾動效果 jQuery文字無縫滾動效果代碼用js實現圖片的無縫滾動效果