2. 程式人生 > >js實現滾動效果

js實現滾動效果

阿新 • • 發佈：2018-10-19
ul li border float ack col 原理 tag absolute func

　　滾動效果通過setInterval定時函數去實現的，setInterval定時讓ul每過一段時間就移動，移動其實是left的值在變大，讓ul移動的必須讓這個div是絕對定位的，這樣left屬性就會起效果，然後讓div的left值越來越大，這樣ul就在移動。實現移動後復制ul，讓後面的1234隱藏起來，這樣當前面的方塊1消失，會從後面的方塊1裏出現，但是當後面的方塊全走完，發現看不到滾動。這裏就需要我們做一些處理了，當後面的方塊1滾到最左邊的時候，前面的1234其實是全消失了的。這時我們就把方塊重頭再滾，每當後面的方塊1滾動最左邊就相當於重置，這樣就實現了無限滾動了

　　實現原理的草圖

　　技術分享圖片

　　代碼如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        #div1{
            height:100px;
            width:400px;
            margin-left:100px;
            position:relative;
            background:black;
            overflow:hidden;
        }
        #div1 ul{
            
            left:0px;
            top:0px;
            position:absolute;
            
        }
        #div1 ul li{
            
 
float:left;
            width:100px;
            height:100px;
            background:yellow;
            list-style:none;
            //border:1px solid #ccc;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById(‘div1‘)    //獲取到div
            
 
var oUl=oDiv.getElementsByTagName(‘ul‘)[0]  //獲取到ul
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML   //實際上是把ul內容復制了一份，會出現8個li，復制出來的li隱藏超出了div的長度，隱藏起來了
            oUl.style.width=oUl.offsetWidth+oUl.offsetWidth  //把ul長度設置為2倍，因為復制了ul
           
            setInterval(function(){
            
                if(oUl.offsetLeft<=-oUl.offsetWidth/2){     //當最後方塊1滾動最左邊的時候，就把ul還原，重新滾動，這是實現無限滾動最重要的判斷
                    oUl.style.left=‘0‘;
                }
                
                oUl.style.left=oUl.offsetLeft-2+‘px‘       //每過40毫秒left值減2，這樣就會一直往左移動
            },40)
        }
        
    </script>
<body>
    <div id="div1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

js實現滾動效果

相關推薦

js實現滾動效果

ul li border float ack col 原理 tag absolute func 　　滾動效果通過setInterval定時函數去實現的，setInterval定時讓ul每過一段時間就移動，移動其實是left的值在變大，讓ul移動的必須讓這個div是絕對定位的

js文字滾動效果實現

<!doctype html> <html> <head> <meta charset="utf-8"> <title>字幕橫向滾動</title> <script src="http://libs.baidu.com/jqu

用wow.js實現滾動頁面時觸發CSS 動畫效果的外掛

有的頁面在向下滾動的時候，有些元素會產生細小的動畫效果。雖然動畫比較小，但卻能吸引你的注意。如果你希望你的頁面也更加有趣，那麼你可以試試 WOW.js。 WOW.js 依賴 animate.css，所以它支援 animate.css 多達 60 多種的動畫效果，能滿足您的各

web複習(三):js實現公告欄效果,間歇性滾動展示

使用js實現:公告欄間歇性展示效果 :思想,使用js操作,ul的scrollTop,並配合setTimeout和setInterval實現迴圈間歇滾動 程式碼:如下: <!DOCTYPE

marquee實現滾動效果

har 一段 對齊方式 頁面 head 發現 vsp 包括 org 頁面的自動滾動效果，可由javascript來實現，但是今天無意中發現了一個html標簽 - <marquee></marquee>可以實現多種滾動效果，無需js控制。 使用marq

原生JS實現放大鏡效果

use 瀏覽器 賦值 uri 字符串 () solid adding clas 效果： 1、 鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、 鼠標移動時右邊的大圖片也會局部移動 放大鏡的關鍵原理： 鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相

HTML標簽marquee實現滾動效果

int pro return set gin 緩存 wip select lex <?phpinclude "../library/mFunction.php"; /**************選取商品一級分類**********/$result=mysql_que

js實現放大鏡效果

設置 信息 鼠標 放大 ack 視口 seo bim wid html部分 <div id="box"> <img width="100%" height="100%" src="images/1.png" alt="#">

原生js實現select效果

前言 在使用select時候原生預設樣式很難修改特別是option的樣式和滑鼠經過option時候的樣式改變很難覆蓋，能力不足尚未實現，暫且記錄後續解決，現自己寫一個選擇的效果 DOM <div class="selectBox"> <div class="se

用js實現打字機效果

1.難得有點時間，回憶下古詩文，順便練習下js，實現下打字機效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打字機</t

js實現雪花效果(超簡單)

使用js實現雪花飄落效果，話不多說直接上程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>snow</title>

HTML標籤marquee實現滾動效果

頁面的自動滾動效果，可由javascript來實現，但是今天無意中發現了一個html標籤 - 可以實現多種滾動效果，無需js控制。 使用marquee標記不僅可以移動文字，也可以移動圖片，表格等. 語法：<marquee>...</marq

2018.12.26 Jquery 使用 slideBox 實現滾動 效果

1.需要下載相關的外掛，並引用進來 　　<link href="css/jquery.slideBox.css" rel="stylesheet" /> 　　<script src="js/jquery-1.7.1.min.js"></script> 　　<sc

Js實現時鐘效果

圖片在文末 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="text/c

js實現打字效果

<!DOCTYPE html> <html> <head> <meta charset='utf-8'>

用js實現開花效果

<html> <head>    <title>JavaScript實現很漂亮的開花特效 - www.unimagical.com</title> </head> <body> <script l

JS實現滾動監聽以及滑動到頂部【轉】

以前做滾動監聽都是用jQuery來實現這樣的效果，雖然用jquery實現起來很方便，但是還是想用原生js來實現一下。 HTML程式碼： <div class="uptop" id="uptop"> <img src="i

JS實現手風琴效果

JS實現手風琴效果，這個主要是點選時內容節點或者你想要的一個節點隱藏或顯示，但是高度要為0；所以考慮用display或者height屬性值切換，不能用opacity或者visibility屬性來確定   1 <!doctype html> 2

div+js實現iframe效果

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

原生JS實現走馬燈效果

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style> * {margin:0; paddi