zoukankan      html  css  js  c++  java
  • 钢琴快案例及手风琴案例

    //钢琴快案例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #ha{
    600px;
    height:200px;
    border:red 1px solid;
    margin:100px auto;
    position:relative;
    }
    #ha>span{
    50px;
    height:40px;
    background:#369;
    display:inline-block;
    position:absolute;
    bottom:0;
    transition:all 500ms linear;
    }
    </style>
    </head>
    <body>
    <div id="ha">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>
    </body>
    </html>
    <script>
    var ha=document.getElementById("ha");
    spans=ha.getElementsByTagName("span");
    for(var o=0;o<spans.length;o++){
    spans[o].style.left=80*o+"px";
    }
    document.onkeydown=function(ev){
    var ev=ev||window.event;
    var code=ev.keyCode-49;
    if(code<0||code>6){
    rest(spans)
    }
    else{
    rest(spans)
    spans[code].style.height=100+"px";

    console.log(code)
    }

    }
    function rest(spans){
    for(var j=0;j<spans.length;j++){
    spans[j].style.height="";
    }
    }
    </script>

    //手风琴案例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    #ha{
    725px;
    height:240px;
    border:red 1px solid;
    margin:100px auto;
    position:relative;
    overflow:hidden;
    }
    #ha img{
    position:absolute;
    }
    </style>
    </head>
    <body>
    <div id="ha">
    <img src="img/妹1.jpg" />
    <img src="img/妹2.jpg"/>
    <img src="img/张慧雯.jpg"/>
    <img src="img/柳岩.jpg"/>
    </div>
    </body>
    </html>
    <script>
    var ha=document.getElementById("ha");
    var imgs=ha.getElementsByTagName("img");
    var num=425;
    var t=null;
    var um=0;
    function fn(){
    for(var i=1;i<imgs.length;i++){
    imgs[i].style.left=num+100*(i-1)+"px";
    }
    }
    fn()
    for(var i=0;i<imgs.length;i++){
    ~function(i){
    imgs[i].onmouseover=function(){
    fn()
    for(var j=1;j<=i;j++){
    imgs[j].style.left=100*j+"px";
    }
    um=i;
    }
    }(i)
    }
    ha.onmouseover=function(){
    clearInterval(t)
    }
    ha.onmouseout=function(){
    t=setInterval(function(){
    bn()
    },1000)
    }

    t=setInterval(function(){
    bn()
    },1000)
    function bn(){
    um++
    if(um>imgs.length-1){
    um=0;
    fn()
    }
    imgs[um].style.left=100*um+"px";
    imgs[um].style.transition="all 500ms linear";
    }
    </script>

  • 相关阅读:
    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛
    2577 医院设置
    2488 绿豆蛙的归宿
    3315 时空跳跃者的魔法
    1079 回家
    1365 浴火银河星际跳跃
    1074 食物链 2001年NOI全国竞赛
    2596 售货员的难题
    wetask.cn领度任务全新试用体验
    多线程--生产者消费者--简单例子
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10375287.html
Copyright © 2011-2022 走看看