JavaScript菜单抖动

挖出了一些很怀念的代码。

这是一段我最早写的JS代码,大概时间是2008年中期的事了,实现的是一个菜单抖动的效果。看看这些代码,总是能回想起刚开始写JS时的兴奋之情。

DEMO

<html>  
<head>  
<title>test</title>  
</pre>  
<pre lang="css" line="4">  
<style type="text/css">  
    #wrapper{
        position:relative;
        width:720px;
        height:500px;
        left:50%;
        margin-left:-360px;
        border:solid black 1px;
    }
    #d1,#d2,#d3,#d4,#d5,#d6{
        position:absolute;
        border:1px black solid;
        margin-left:0;
        margin-right:auto;
        width:100px;
        text-align:center;
    }
    #d1{
        margin:5px;
    }
    #d2{
        top:20px;
        margin:10px 0 0 5px;
    }
    #d3{
        top:40px;
        margin:15px 0 0 5px;
    }
    #d4{
        top:60px;
        margin:20px 0 0 5px;
    }
    #d5{
        top:80px;
        margin:25px 0 0 5px;
    }
    #d6{
        top:100px;
        margin:30px 0 0 5px;
    }
    #content{
        position:absolute;
        border:1px solid black;
        width:605px;
        height:490px;
        left:110px;
        top:5px;
    }
    .contents{
        padding:10px;
        display:none;
    }
    #content1{
        display:block;
    }
</style>  
</pre>  
<pre lang="javascript" line="60">  
<script type="text/javascript">  
    var currunt=0
    function dis(menu_number){
        currunt=menu_number;
        width=30;
        speed=5;
        positionX=0;
        preSpeed=0;
        flag=1;
        document.getElementById("content"+menu_number).style.display="block";
        hidRest(menu_number);
    }
    function hidRest(menu_clicked){
        var MENU_LENGTH=6;
        for(i=1;i<=MENU_LENGTH;i++){
            if(i!=menu_clicked){
                document.getElementById("content"+i).style.display="none";
            }
        }
    }
    function shake(){
        if(flag==1){
            speed=1-speed*0.8
            positionX+=speed;
            positionX-=preSpeed;
            document.getElementById("d"+currunt).style.left=positionX
            if(Math.abs(speed)<1.0){
                document.getElementById("d"+currunt).style.left=0;
                flag=0;
            }
            preSpeed=speed;
            setTimeout("shake()",50)
        }
    }
</script>  
</pre>

<pre lang="html" line="95">  
</head>  
<body>  
    <div id="wrapper">
        <div id="d1" onmousedown="dis(1);shake()">Home</div>
        <div id="d2" onmousedown="dis(2);shake()">Products</div>
        <div id="d3" onmousedown="dis(3);shake()">Download</div>
        <div id="d4" onmousedown="dis(4);shake()">News</div>
        <div id="d5" onmousedown="dis(5);shake()">Support</div>
        <div id="d6" onmousedown="dis(6);shake()">About</div>
        <div id="content">
            <div class="contents"  id="content1">Home page:<br/>www.google.com</div>
            <div class="contents"  id="content2">Products list:
                <br/>AKG K701
                <br/>Sennheiser HD650
                <br/>beyerdynamic DT880
                <br/>Sony SA5000</div>
            <div class="contents"  id="content3">Download list:
                <br/>realtek_alc880_182_xp.zip
                <br/>Analog_soundmaxhd_drv510014310.rar
                <br/>RTL8168_565808142006.zip
                <br/>realtek_hd_205_xp.zip
                <br/>8-8_xp32_dd_67975.exe</div>
            <div class="contents"  id="content4">My first JS practice!</div>
            <div class="contents"  id="content5">Support Information:<br/>TEL:8888888</div>
            <div class="contents"  id="content6">JS demo 1.0 by iifksp</div>
        </div>

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

这段代码被最初被我发贴在蓝色理想上,http://bbs.blueidea.com/viewthread.php?tid=2899292&highlight= ,版主也很宽松的给我打了一分,当时真是有一种这辈子就写JS的冲动。然而,时过境迁,不写JS已经很久很久了。


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。