用纯javascript做一个层伸缩动态效果

本帖最后由 guanyelong 于 2013-09-27 12:30:33 编辑

解决方案 »

  1.   

    我们没有jquery  类库。所以不让用。
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'>
    body { margin:0; padding:0; }
    ul,li { margin:0; padding:0; }
    ul { list-style:none; }
    ul li { float:left; display:inline; width:100px; height:100px; line-height:100px; text-align:center; margin:0 2px; border:1px solid #000; background-color:red; }
    ul li { opacity:0; }
    ul li.li-a { opacity:1; }
    </style>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script type='text/javascript'>
    function fns() {
    var timer;
    var lis = document.getElementById('content').getElementsByTagName('li');
    var obja = document.getElementById('content').getElementsByTagName('li')[3];
    var objb = document.getElementById('content').getElementsByTagName('li')[0];
    for(var i=0; i<3; i++) {
    lis[i].style.opacity = 0;
    }
    obja.style.opacity = 1;
    obja.onclick = function() {
    timer = setInterval(function() {
    for(var i=0; i<3; i++) {
    var opacity = parseFloat(lis[i].style.opacity);
    opacity = opacity + 0.01;
    lis[i].style.opacity = opacity;
    if(lis[i].style.opacity == 1) {
    clearInterval(timer);
    }
    }
    }, 100);
    }
    objb.onclick = function() {
    clearInterval(timer);
    timer = setInterval(function() {
    for(var i=1; i<4; i++) {
    var opacity = parseFloat(lis[i].style.opacity);
    opacity = opacity - 0.01;
    lis[i].style.opacity = opacity;
    if(lis[i].style.opacity < 0) {
    clearInterval(timer);
    }
    }
    }, 100);
    }
    }
    window.onload = function() {
    fns();
    }
    </script>
    </head><body>
    <div id='content'>
    <ul>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li class='li-a'>A</li>
    </ul>
    </div>
    </body>
    </html>
      

  3.   

    随便哪里就可以下载一个jquery了..有简单的方法为什么不用..