zoukankan      html  css  js  c++  java
  • js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果

        <div id="divbox">
            <ul>
                <li class="pic1"><a href="javascript:;">床头明月光</a></li>
                <li class="pic2"><a href="javascript:;">疑似地上霜</a></li>
                <li class="pic3"><a href="javascript:;">举头望明月</a></li>
                <li class="pic4"><a href="javascript:;">低头思故乡</a></li>
            </ul>
        </div>
    
    *{padding: 0;margin: 0;list-style: none}
    #divbox{
         1000px;
    }
    ul{
         1000px;
        height: 300px;
    }
    ul li{
        height: 300px;
        float: left;/* 
         100px; */
    }
    ul li a{
        text-decoration: none;
        color:#666;
         100px;
        height: 300px;
        line-height: 300px;
        text-align: center;
        display: block;
        background-color:#fff;
        opacity: 0.3;
    }
    .pic1{
        background: url('1.png');
    }
    .pic2{
        background: url('2.png');
    }
    .pic3{
        background: url('3.png');
    }
    .pic4{
        background: url('4.png');
    }
    .active{
         700px;
    }
    </style>
    

    js代码:

    var lis=document.getElementsByTagName('li');   //获取document中的所有li
    
    /*animate动画*/
    function ani(obj){
        timer=setInterval(function(){    //设置定时器
            var speed=10;
            if(parseInt(obj.style.width)<700){     //如果传入的对象的宽小于700px
                obj.style.width=parseInt(obj.style.width)+speed+'px';   //让当前宽加speed
                speed+=10;    //每执行一次定时器,speed+10
            }else{
                return;
            }
        },20);  20ms执行一次定时器
    }
    
    for(var i=0;i<lis.length;i++){   //遍历li数组
        lis[i].index=i;         //循环把i的值赋值给li的index
        var timer;
        lis[i].onmouseover=function(){
            for(var i=0;i<lis.length;i++){
                lis[i].style.width='100px';    //当鼠标移入到某个li时,遍历循环数组,把所有li的宽都设置为100px
            }
            ani(lis[this.index]);  //使用ani方法,把鼠标移入的li的宽值变为700px
    
        }
        lis[i].onmouseout=function(){     
            lis[this.index].style.width='100px';       //鼠标移出时,把当前li的宽设置回100px
            clearInterval(timer);      //清除定时器
        }
    }
    

    这样就能实现手风琴效果了,但是还有一点点bug,因为li初始化的时候宽度是100px,当鼠标移入li时,li会变为700px,但是鼠标移开时不会按700px的宽度,仍然以100px的宽为准。如果有知道这个问题的小伙伴请大家多多指教指教。

    用jquery实现非常简单,而且效果非常好:

    $(function(){
      $(".handpic ul li").mouseover(function(){
        $(this).stop(true).animate({'width':'700px'},1000).siblings().stop(true).animate({'width':'100px'},1000);
      });
    });

    如果想要背景图片,请到本人相册下载。

  • 相关阅读:
    hdu 1698
    ACM起步要点总结(转哈工大)
    RANSAC
    Android 颜色渲染(十) ComposeShader组合渲染
    java过滤html标签函数
    Objective-C ,ios,iphone开发基础:picker控件详解与使用,(实现省市的二级联动)
    简单的三方登录SDK示例,Android Activity之间数据的传递
    搜索引擎日志分析
    继续过中等难度的题目
    包圈圈的题目
  • 原文地址:https://www.cnblogs.com/heyujun-/p/6682684.html
Copyright © 2011-2022 走看看