網頁效果-簡單的時間軸實現

時間 2019-11-11

標籤網頁效果簡單時間軸實現欄目 HTML 简体版

原文原文鏈接

以前在網上看到，有不少人寫的時間軸效果，因而本身也模仿着寫了寫。
如下貼出本身寫的解決方法(橫向軸與縱向軸)。

簡單的時間軸效果容易實現，但若是須要看起來有模有樣，就須要對頁面進行設計佈置了。javascript

1.利用Js加簡單的界面佈置，實現時間軸鼠標點擊輪換圖片效果(縱向)。

實現思路：利用多個div加背景色作縱向時間軸的樣式，用CSS進行定位佈局(時間軸通常都相對於瀏覽器窗口位置進行定位，避免浮動)，再加上相應的文字描述。（:after,:before等同樣能實現其效果），最後在用Js添加一些簡單的鼠標事件。css

HTML代碼java

<div id="timeline">
        <div id="textout">
            <div class="text" onmousemove="movecolor(1)" onmouseout="outcolor(1)">雲海</div>
            <div class="text" onmousemove="movecolor(2)" onmouseout="outcolor(2)">瀑布</div>
            <div class="text" onmousemove="movecolor(3)" onmouseout="outcolor(3)">古樹</div>
            <div class="text" onmousemove="movecolor(4)" onmouseout="outcolor(4)">夕陽</div>
            <div class="text" onmousemove="movecolor(5)" onmouseout="outcolor(5)">大海</div>
        </div>
        <div id="lineout">
            <div class="line" id="l1" onmousemove="movecolor(1)" onmouseout="outcolor(1)"></div>
            <div class="line" id="l2" onmousemove="movecolor(2)" onmouseout="outcolor(2)"></div>
            <div class="line" id="l3" onmousemove="movecolor(3)" onmouseout="outcolor(3)"></div>
            <div class="line" id="l4" onmousemove="movecolor(4)" onmouseout="outcolor(4)"></div>
            <div class="line" id="l5" onmousemove="movecolor(5)" onmouseout="outcolor(5)"></div>
        </div>
    </div>
    <div id="picture"><img id="backgroundimg" src="img/pic1.jpg"></div>

CSS代碼jquery

#timeline{
                position: fixed;
                width: 100%;
                height: 100%;
                left:30px;
                top: 180px;
                
            }
            #textout{
                width:35px;
                float: left;
                height: 100%;
                margin-left: 20px;
                padding-top:10px;
                cursor:pointer;
            }
            #lineout{
                width:4px;
                height: 100%;
                float: left;
                margin-left: 5px;
            
            }
            .line{
                width: 4px;
                height: 50px;
                background: #ccc; 
                
            }
            .text{
                width: 35px;
                height: 50px;
            }
            #picture{
                width: 1000px;
                height: 500px;
                margin-top: 50px;
                margin-left:auto ;
                margin-right:auto;
                
            }

JS代碼：瀏覽器

<script type="text/javascript">
             function movecolor(num){
                 document.getElementById("l"+num).style.background = "#98E0FA" ;
                 document.getElementById("backgroundimg").src="img/pic"+num+".jpg";
             }
             function outcolor(num){
                 document.getElementById("l"+num).style.background = "#ccc" ;
             }
 </script>

效果圖：ide

2.利用Jquery加簡單的界面佈置，實現時間軸鼠標點擊輪換圖片效果(橫向)。

實現思路，利用一個div設置背景圖片，作出橫向時間軸的樣式；在其中加入塊級元素li，加入簡單的背景圖片，用來實現簡單的時間節點效果；最後在用Jquery加上相應的鼠標事件，對其餘的頁面元素進行操做。佈局

HTML代碼this

<body>
<div class="clearfix course_nr">
    <ul class="course_nr2">
        <li>
            長城
            <div class="shiji">
                <h1>長城</h1>
            </div>
        </li>
        <li>
            長江
            <div class="shiji">
                <h1>長江</h1>
            </div>
        </li>
        <li>
            上海
            <div class="shiji">
                <h1>上海</h1>
            </div>
        </li>
        <li>
            世博會
            <div class="shiji">
                <h1>世博會</h1>
            </div>
        </li>
        <li>
            中國城
            <div class="shiji">
                <h1>中國城</h1>
            </div>
        </li>
        <li>
            故宮
            <div class="shiji">
                <h1>故宮</h1>
            </div>
        </li>

    </ul>
</div>
<div id="backgroundpic"></div>
</body>

CSS代碼：url

.course_nr{
    width: 1100px;
    height:158px; 
    background:url(../img/ico1.gif) repeat-x center;
    margin-left: 120px;
    }
.course_nr li{ 
    float:left; 
    background:url(../img/ico2.gif) no-repeat center top; 
    padding-top:30px; 
    width:140px; 
    text-align:center; 
    position:relative; 
    margin-top:65px;
    
    }
.shiji{ 
    position:absolute; 
    width:100%; 
    left:0; 
    top:-20px; 
    display:none;
    }
.shiji h1{ 
    height:67px; 
    line-height:67px; 
    color:#518dbb; 
    font-weight:bold; 
    background:url(../img/ico3.gif) no-repeat center top; 
    margin-bottom:8px;
    }
.shiji p{ 
    line-height:14px; 
    color:#999;
    }
#backgroundpic{
        width: 1000px;
        height: 500px;
        margin-top: -38px;
        margin-left: auto;
        margin-right: auto;
        background-image:url(../img/長城.jpg);
    }

JS代碼：spa

<script type="text/javascript" src="js/jquery1.10.2.js"></script>
<script type="text/javascript">
$(function(){
    $('.course_nr2 li').hover(function(){
        $(this).find('.shiji').slideDown(600);
        var urltext = 'img/'+$(this).find('.shiji').text().trim()+'.jpg';
        $('#backgroundpic').css('background-image','url('+ urltext +')');
    },function(){
        $(this).find('.shiji').slideUp(400);
    });
});
</script>

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。