欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)目錄滾動(dòng)特效

 更新時(shí)間：2021年10月13日 10:48:10   作者：aiguangyuan  
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)目錄滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

分享一個(gè)用原生JS實(shí)現(xiàn)的文字滾動(dòng)效果，這種效果通常用在網(wǎng)頁(yè)中一些局部展示信息，如新聞、動(dòng)態(tài)、充值記錄等，效果如下：

實(shí)現(xiàn)代碼如下：

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實(shí)現(xiàn)目錄滾動(dòng)特效</title>
    <style>
        body {
            font-size: 12px;
            line-height: 24px;
            text-align: center;
        }
 
        * {
            margin: 0px;
            padding: 0px;
        }
 
        ul {
            list-style: none;
        }
 
        a img {
            border: none;
        }
 
        a {
            color: #333;
            text-decoration: none;
        }
 
        a:hover {
            color: #ff0000;
        }
 
        #mooc {
            width: 399px;
            border: 5px solid #ababab;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            border-radius: 15px;
            box-shadow: 2px 2px 10px #ababab;
            margin: 50px auto 0;
            text-align: left;
        }
 
        #moocTitle {
            height: 62px;
            overflow: hidden;
            font-size: 26px;
            line-height: 62px;
            padding-left: 30px;
            /* Firefox */
            background-image: -moz-linear-gradient(top, #f05e6f, #c9394a);
            /* Saf4+, Chrome */
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a));
            /* IE*/
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
            border: 1px solid ##f05e6f;
            /* Gecko browsers */
            -moz-border-radius: 8px 8px 0 0;
            /* Webkit browsers */
            -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
            color: #fff;
            position: relative;
        }
 
        #moocTitle a {
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: inline;
            color: #fff;
            font-size: 12px;
            line-height: 24px;
        }
 
        #moocBot {
            width: 399px;
            height: 10px;
            overflow: hidden;
        }
 
        #moocBox {
            height: 144px;
            width: 335px;
            margin-left: 25px;
            margin-top: 10px;
            overflow: hidden;
        }
 
        #mooc ul li {
            height: 24px;
        }
 
        #mooc ul li a {
            width: 180px;
            float: left;
            display: block;
            overflow: hidden;
            text-indent: 15px;
            height: 24px;
        }
 
        #mooc ul li span {
            float: right;
            color: #999;
        }
    </style>
</head>
 
<body>
    <div id="mooc">
        <h3 id="moocTitle">
            最新課程<a href="#" target="_self">更多>></a>
        </h3>
 
        <div id="moocBox">
            <ul id="con1">
                <li>
                    <a href="#" >1.絕對(duì)的屌絲逆襲</a>
                    <span>2013-09-18</span>
                </li>
                <li>
                    <a href="#" >2.tab頁(yè)面切換效果</a>
                    <span>2013-10-09</span>
                </li>
                <li>
                    <a href="#" >3.圓角水晶按鈕制作</a>
                    <span>2013-10-21</span>
                </li>
                <li>
                    <a href="#" >4.HTML+CSS基礎(chǔ)課程</a>
                    <span>2013-11-01</span>
                </li>
                <li>
                    <a href="#" >5.分頁(yè)頁(yè)碼制作</a>
                    <span>2013-11-06</span>
                </li>
                <li>
                    <a href="#" >6.導(dǎo)航條菜單的制作</a>
                    <span>2013-11-08</span>
                </li>
                <li>
                    <a href="#" >7.信息列表制作</a>
                    <span>2013-11-15</span>
                </li>
                <li>
                    <a href="#" >8.下拉菜單制作</a>
                    <span>2013-11-22</span>
                </li>
                <li>
                    <a href="#" >9.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a>
                    <span>2013-12-06</span>
                </li>
            </ul>
            <ul id="con2"></ul>
        </div>
    </div>
    <script type="text/javascript">
        //獲取滾動(dòng)列表容器
        var area = document.getElementById('moocBox');
        //獲取列表1
        var con1 = document.getElementById('con1');
        //獲取空列表2
        var con2 = document.getElementById('con2');
        //設(shè)定定時(shí)器執(zhí)行時(shí)間間隔
        var speed = 50;
 
        //設(shè)定向上滾動(dòng)變量
        area.scrollTop = 0;
 
        //復(fù)制列表1的內(nèi)容給列表2
        con2.innerHTML = con1.innerHTML;
 
        //向上滾動(dòng)函數(shù)
        function scrollUp() {
            //當(dāng)滾動(dòng)列表向滾動(dòng)的高度大于等于列表自身的高度時(shí)
            if (area.scrollTop >= con1.scrollHeight) {
                //將列表滾動(dòng)高度歸零，重新開(kāi)始滾
                area.scrollTop = 0;
                //否則
            } else {
                //繼續(xù)滾
                area.scrollTop++;
            }
        }
 
        //存儲(chǔ)定時(shí)器
        var myScroll = setInterval("scrollUp()", speed);
 
        //當(dāng)鼠標(biāo)移入的時(shí)候，清除定時(shí)器
        area.onmouseover = function () {
            clearInterval(myScroll);
        }
        //當(dāng)鼠標(biāo)移開(kāi)的時(shí)候，啟動(dòng)定時(shí)器
        area.onmouseout = function () {
            myScroll = setInterval("scrollUp()", speed);
        }
    </script>
</body>
 
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 生成二維碼方法匯總

    生成二維碼方法匯總

    這篇文章主要匯總介紹了生成二維碼方法的相關(guān)資料,需要的朋友可以參考下
    2014-12-12
  • js如何改變文章的字體大小

    js如何改變文章的字體大小

    這篇文章主要介紹了js改變文章字體大小的方法，大家在使用word文檔時(shí)工具欄為大家提供更改字體大小的選項(xiàng)，那js是如何改變文章字體大小，下文為大家揭曉，需要的朋友可以參考下
    2016-01-01
  • JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序

    JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-03-03
  • Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實(shí)現(xiàn)代碼

    Bootstrap響應(yīng)式導(dǎo)航由768px變成992px的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Bootstrap響應(yīng)式導(dǎo)航由768px變成992px,需要的朋友可以參考下
    2017-06-06
  • JavaScript重載函數(shù)實(shí)例剖析

    JavaScript重載函數(shù)實(shí)例剖析

    通過(guò)本文給大家簡(jiǎn)單介紹下JavaScript重載函數(shù)的相關(guān)知識(shí)，在js中有沒(méi)有重載函數(shù)這個(gè)概念呢？很多朋友都很模糊，說(shuō)不太清楚，下面通過(guò)本文給大家介紹js重載函數(shù)，一起學(xué)習(xí)吧
    2016-05-05
  • 可能是全網(wǎng)最詳細(xì)小程序中使用echarts的教程

    可能是全網(wǎng)最詳細(xì)小程序中使用echarts的教程

    在開(kāi)發(fā)微信小程序時(shí),有需求需要使用到柱狀圖,餅圖等圖表,下面這篇文章主要給大家介紹了關(guān)于小程序中使用echarts的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 淺析javascript中的事件代理

    淺析javascript中的事件代理

    這篇文章主要介紹了淺析javascript中的事件代理，由一道面試題講起，感興趣的小伙伴們可以參考一下
    2015-11-11
  • JavaScript匿名函數(shù)之模仿塊級(jí)作用域

    JavaScript匿名函數(shù)之模仿塊級(jí)作用域

    這篇文章主要介紹了JavaScript匿名函數(shù)之模仿塊級(jí)作用域的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法

    require導(dǎo)入module.exports 或 exports導(dǎo)出的使用方法

    module.exports用于導(dǎo)出整個(gè)模塊的內(nèi)容,可以通過(guò)賦值給 module.exports 導(dǎo)出一個(gè)對(duì)象、函數(shù)或值,導(dǎo)出的內(nèi)容可以被其他模塊通過(guò)require 導(dǎo)入,本文給大家介紹require導(dǎo)入module.exports 或 exports導(dǎo)出的使用,感興趣的朋友一起看看吧
    2023-11-11
  • JavaScript獲取當(dāng)前時(shí)間戳5種方法匯總

    JavaScript獲取當(dāng)前時(shí)間戳5種方法匯總

    很多時(shí)候我們都把時(shí)間戳作為id值,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取當(dāng)前時(shí)間戳的5種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10

最新評(píng)論