2. 程式人生 > >web複習(三):js實現公告欄效果,間歇性滾動展示

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

阿新 • • 發佈：2019-02-05

使用js實現:公告欄間歇性展示效果

:思想,使用js操作,ul的scrollTop,並配合setTimeout和setInterval實現迴圈間歇滾動

程式碼:如下:

<!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>
</head>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0;
padding:0;
border:0;
}
body{
margin:0 auto;
}
#container{
    width:300px;
    position:relative;
    top:50px;
    }
 

#title{
    width:100%;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size:1.3em;
    background-color:#0FF;
    }
#scrollBox{
width:300px;
height:144px;
overflow:hidden;
    }
#scrollBox ul{
    height:144px;
    width:300px;
    }
#scrollBox ul li{
    height:24px;
    width:100%;
    text-align
 
:left;
    font-size:24px;
    line-height:24px;
    }
#scrollBox ul li a{
    text-decoration:none;
    color:#f60;
    }
#scrollBox ul li a:hover{
        color:#000;
        font-size:smaller;
}
</style>

<body>
<div id="container">
<div id="title"><a href="#">更多</a></div>
<div id="scrollBox">
<ul>
<li><a href="#">1:C語言學習</a></li>
<li><a href="#">2:html學習</a></li>
<li><a href="#">3:css學習</a></li>
<li><a href="#">4:javascript學習</a></li>
<li><a href="#">5:jquery學習</a></li>
<li><a href="#">6:htmll5和css3學習</a></li>
</ul>
</div>
<div>
<script type="text/javascript">


//window.onload=function(){
    //獲取滾動部分
        var area=document.getElementById("scrollBox");
        //設定全域性定時器
        var timer=null;
        //定義延遲
        var delay=2000;
        //獲取高度
        var oLiHeight=$("#scrollBox li").height();
        //速度
        var speed=50;
        area.scrollTop=0;
area.innerHTML+=area.innerHTML;
function startScroll(){//開始運動
     timer=setInterval("scrollUp()",speed);
     area.scrollTop++;
    }
function scrollUp(){//迴圈運動
    if(area.scrollTop%oLiHeight==0){
        clearInterval(timer)
        setTimeout(startScroll,delay);
        }else{
            area.scrollTop++;
             if(area.scrollTop >= area.scrollHeight/2){
                 area.scrollTop =0;
                 }
            }
    }
    //頁面載入兩秒後運動
     setTimeout(startScroll,delay)
    //滑鼠事件
    $("#scrollBox").mouseover(function(){clearInterval(timer)});
    $("#scrollBox").mouseout(function(){timer=setInterval('scrollUp()',speed)});


</script>


</body>
</html>

注意1:必須要注意,html文件的載入順序,必須要保證,js在文件載入後執行

效果:

這裡寫圖片描述

速度和一次滾動的條目數,可以在程式碼中修改

相關推薦

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

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

原生JS實現放大鏡效果

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

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>

Js實現時鐘效果

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

FR決策表單JS實現自動滾屏/滾動效果

選中決策報表中的報表塊report0，點選工具欄上的凍結，彈出重複與凍結設定對話方塊，勾選並設定重複標題行從第1行至第2，勾選凍結第1行至第2行， 選中報表塊report0，新增初始化後事件，程式碼如下：   if(window.interval2){clearInterval(win

手把手教小白如何用css+js實現頁面中圖片放大展示效果

1.前言 很多童鞋會在專案中遇到一些上傳圖片，展示圖片的操作，但是圖片呢有大有小，為了頁面的美觀，有時候我們需要將圖片展示成固定寬高度，但是呢，領導就會說，我想看大圖片，怎麼辦？想看就看呀，來來來，我

js實現打字效果

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

js實現公告欄文字從右向左勻速迴圈滾動，且公告內容可以隨時增減

實現思路 滾動內容的left值初始化為外部box寬度（注意：css中設定相對定位）； 每0.05s ,left值-2，直到left值=-滾動內容寬度，證明滾動到頭了（此處可根據實際體驗效果設定具體數值）

用js實現開花效果

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

JS實現手風琴效果

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

Web版 掃雷 JS實現

這幾天中毒了，無比迷戀掃雷遊戲（摔！明明是機房機器渣到只能玩掃雷），於是在上網路互聯與路由課的時候，寫了個Web版的掃雷遊戲，起碼能玩了，還在完善中，嘿嘿，晚上又增加了一些有趣的東東，還有個彩蛋。DEMO：http://imgbattle.cn/mine/ 其

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

js-實現鼠標滑輪滾動實現換頁

css else false 所有 body 瀏覽器 event 頁面 代碼 html頁面： 1 <!--首頁一--> 2 <div id="nav_div1">　　　　<div class="nav_size"></div&

JS實現div隨螢幕滾動到一定高度後固定

在有些網頁中我們會發現會有這樣的現象：某個div會隨著螢幕的滾動達到一定高度的時候位置就固定下來了。例如淘寶的導航條：那麼這裡就需要用到JS的邏輯方法來實現了。下面是HTML程式碼簡單實現：<!DOCTYPE html> <html> <head

JS實現文字的左右滾動

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

js實現文字從右滾動到左邊程式碼迴圈滾動例項

以下是程式碼例項： <div style="background:#333;"> <div id="tgBigox"> <div id