js實現無縫向上滾動

阿新 • • 發佈：2018-12-09

說那麼多幹嘛，還是直接看程式碼吧。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無縫向上滾動新聞</title 
>

    <style type="text/css">
        .inform {
            border: 1px solid #E5E5E5;
            padding: 1px;
        }
        .inform h2 {
            background: none repeat scroll 0 0 #015198;
            font-weight: normal;
            line-height: 30px;
        }
        .inform h2 span 
 {
            color: #FFFFFF;
            font-size: 16px;
            padding-left: 10px;
        }
        .inform h2 a {
            color: #FFFFFF;
            float: right;
            font-size: 14px;
            padding-right: 3px;
        }
        .inform ul {
            height: 170px;
            margin-top 
: 7px;
            overflow: hidden;
            list-style: none;
        }
        .inform ul a{
            text-decoration: none;
            color: #000;
        }
        .inform ul li {
            line-height: 26px;
            padding-left: 12px;
        }
    </style>
</head>

<body>
    <div class="inform">
      <div style="height:170px; overflow:hidden">
        <ul id="marquee">
            <li>
                <a title="新增時間：2014-06-05 點選次數：139" href="/index.php?r=archives/default/new&id=6044&t=1401953184" target="_blank">華醫學會臨床醫學科研專項資金...</a>
            </li>
            <li>
                <a title="新增時間：2014-06-05 點選次數：192" href="/index.php?r=archives/default/new&id=6043&t=1401953184" target="_blank">第四屆職工文化藝術節活動方案</a>
            </li>
            <li>
                <a title="新增時間：2014-06-04 點選次數：154" href="/index.php?r=archives/default/new&id=6040&t=1401953184" target="_blank">關於開展國家技術標準資源服務...</a>
            </li>
            <li>
                <a title="新增時間：2014-06-04 點選次數：145" href="/index.php?r=archives/default/new&id=6038&t=1401953184" target="_blank">科技部關於組織申報科技基礎性...</a>
            </li>
            <li>
                <a title="新增時間：2014-06-03 點選次數：203" href="/index.php?r=archives/default/new&id=6032&t=1401953184" target="_blank">關於印發《國家自然科學基金優...</a>
            </li>
            <li>
                <a title="新增時間：2014-06-03 點選次數：89" href="/index.php?r=archives/default/new&id=6031&t=1401953184" target="_blank"> UpToDate資料庫培訓講座</a>
            </li>
            <li>
                <a title="新增時間：2014-05-29 點選次數：288" href="/index.php?r=archives/default/new&id=6015&t=1401953184" target="_blank"> 手衛生工作簡訊</a>
            </li>
            <li>
                <a title="新增時間：2014-05-26 點選次數：675" href="/index.php?r=archives/default/new&id=5831&t=1401953184" target="_blank"> 2014年“端午節”門急診醫...</a>
            </li>
            <li>
                <a title="新增時間：2014-05-21 點選次數：736" href="/index.php?r=archives/default/new&id=5671&t=1401953184" target="_blank">國家自然科學基金委員會關於受...</a>
            </li>
            <li>
                <a title="新增時間：2014-05-21 點選次數：622" href="/index.php?r=archives/default/new&id=5669&t=1401953184" target="_blank">UpToDate資料庫試用通知</a>
            </li>

            <li>&nbsp;</li>  
        </ul>
    </div>

    <script type="text/javascript">
        window.onload = function() {  
            setTimeout("startmarquee(34, 40, 0, 'marquee')", 1000);
        }
        function startmarquee(lh,speed,delay,id) {  

            var t;  
            var p = false;  
            var o = document.getElementById(id);  
            o.innerHTML += o.innerHTML + o.innerHTML + o.innerHTML;  
            o.onmouseover = function() {  
                p = true;  
            }  
            o.onmouseout = function() {  
                p = false;  
            }  
            o.scrollTop = 0;  

            function start() {  
                t = setInterval(scrolling,speed);  
                if(!p) o.scrollTop += 2;  
            }  

            function scrolling() {  
                if(o.scrollTop%lh != 0) {  
                    o.scrollTop += 2;  
                    if(o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;  
                } else {  
                    clearInterval(t);  
                    setTimeout(start,delay);  
                }  
            }  
            setTimeout(start,delay);  
        } 

    </script>
</div>
</body>
</html>

js實現無縫向上滾動

說那麼多幹嘛，還是直接看程式碼吧。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

JS 實現無縫滾動動畫原理（初學者入）

padding absolute hidden 高度 pos sof add align meta 　　這段時間在教培訓班的學生使用原生javascript實現無縫滾動的動畫案例，做了這個原理演示的動畫，分享給自學JS的朋友！博主希望對你們有幫助！在講解之前先看一下de

js實現無縫滾動

tab ntb asc list chrome webkit form ack target 代碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

JS實現無縫滾動上

小福餅關注 2018.03.22 17:19 字數 116 閱讀 98評論 1喜歡 1 首先上一張效果圖原理圖1 圖2 在可視區域內，list1向上滾動，在滾動至圖2的位置時，達到滾動連線臨界

jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果

轉：https://www.jb51.net/article/105618.htm 這篇文章主要為大家詳細介紹了jQuery常用外掛jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小夥伴們可以參考一下 1.html程式碼 <head> &

js實現html頁面滾動條向下拉到一定的程度時，某個div就固定在頂部，向上拉時返回原位置。

實現程式碼 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

js實現無縫滾動，點選可實現左右滾動

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>無縫滾動——左右</title> <st

原生js實現無縫滾動輪播圖（移動端）-自動輪播

想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。 head部分，沒什麼好說的： <meta charset="utf-8"> <me

JS實現無縫滾動輪播圖的原理

NPU func etl () initial body position com hidden 用JS實現無縫滾動輪播圖的方法有很多，我自己瞎琢磨了一個，原理非常簡單，就是點擊按鈕的一瞬間，把 ul 拉到某一個位置，然後再滑動，這樣就成了無縫滑動為

ligerGrid實現無縫動態滾動行（生成新/刪除舊）

兩種方案：一種是從上往下滾動： //addData是一行新資料，如{"id":1,"name":"abc"} //manager.getRow(0)是第一行 manager.addRow(addData,manager.getRow(0),true);//在頂部增加行 var l

利用原生js實現自定義滾動條（可點選到達，拖動到達）

1.HTML檔案 div1是滾動條，div2是滾動小球，div3是文字區域容器，div4是文字區域。 <div id="div"> <div id="div1"> <div id="div2"> </div> </div&

JS實現圖片自動滾動(圖片橫向滾動)

實現的效果就是一排圖片自動橫向滾動,滑鼠指向的時候,暫定滾動,滑鼠離開,繼續滾動首先看下html程式碼:隨便加入四張圖片 <div id="div1"> <ul> <li><img src="img/logo-black.png"

原生js實現無縫輪播

cli spl city ive ont eve 通過動畫 change 原生js實現無縫輪播　　因為要做到無縫，所以就要把第一張圖片和最後一張連接起來，在此處采用js克隆了第一張圖片的節點，添加到最後，顯示圖片序號的小圓按鈕也是使用js動態添加的。 html部分

js實現文字上下滾動效果【贊】

大家都知道，做html頁面時，為了提升網頁的使用者體驗，我們需要在網頁中加入一些特效，比如單行區域文字上下滾動就是經常用到的特效。如下圖示效果：完整 html 頁面程式碼，可以直接執行 <html> <head> <title>js實現文字上下滾

js 實現選單左右滾動顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JS 實現自定義滾動效果2

//獲得當前scroll var timer = null; var ulList = $(".scroll .scrollBox"); myScrollFunction(ulList, timer); function myScrollFunction(obj, timerObj) {

JS 實現自定義滾動效果

var timer = null; //獲得當前滾動盒子scrollBox var ulList = $(".scroll ul.scrollBox"); //獲得當前scrollBox裡面滾動元素的個數 var ulNum = $(".scroll ul.scrollBox").childre

listview實現自動向上滾動，快速滾動，和滾動條的一些設定

1 android:windowSoftInputMode=”adjustResize” 也無法解決問題。通過部落格，在listview中新增以下三個屬性，可行：繼承於view and

用css、js實現字幕橫向滾動

最近，在寫電子房價牌頁面時，關於電子房價的提示，需要用到橫向滾動字幕的效果，本文用的是jquery.js的方法來實現的。在網上查閱資料的時候，發現以前會使用<marque>的html標籤來處理，但是，最新的MDN已將該標籤廢棄。一、例項相關情況介紹

JS實現可左右滾動產品圖片展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js實現無縫向上滾動

相關推薦