模拟手风琴效果如何实现

现在我不想用任何的框架，也不想用别人封装好的类库，我现在只想用js来改变div的宽度，或者是用js来移动div的位置来实现手风琴效果，请各位大侠们帮帮忙。给几句关键性的提醒就好了。

解决方案 »

  1.   

    现在把问题再简单化，就是如何用js实现，点击一个按钮 实现一个div移动一定距离
      

  2.   

    点div，触发div的click句柄。里面维护一个setInterval，改变div的style就行
      

  3.   

    http://rainsilence.iteye.com/blog/1081323
    你可以参考我早些时候的博客。
      

  4.   

    点下按钮移动，接下来自己发挥：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type= "text/javascript" language="javascript">
    function move(){
    var oldLeft = parseInt(document.getElementById("show").style.marginLeft);
    document.getElementById("show").style.marginLeft = oldLeft+2+"";
    setTimeout("move()",50);
    }
    </script>
    </head>
    <body>
    <input type="button" value="移动" onclick="move()"/>
    <div id="show" style="width:100px;height:100px;background:red; margin-left:100px;">....</div>
    </body>
    </html>
      

  5.   

    楼主参考下，
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>运动框架（面向对象版）</title>
    <style>
    body,div{margin:0;padding:0;}
    #wrap{width:500px;margin:10px auto;}
    .box{position:relative;height:100px;border:1px solid #666;margin-top:10px;}
    .box span{position:absolute;top:10px;left:10px;width:20px;height:20px;background:#999;display:block;opacity:1;}
    </style>
    <script type="text/javascript">
    //面向对象版运动框架
    var Animate = function (oElement, options, callback) {this.initialize.apply(this, arguments)};Animate.prototype = {
    initialize: function (oElement, options, callback)
    {
    var oThis = this;
    this.options = options;
    this.callback = callback;
    this.oElement = typeof oElement === "string" ? document.getElementById(oElement) : oElement;
    clearInterval(this.timer);
    this.timer = setInterval(function ()
    {
    oThis.doMove()
    }, 30)
    },
    css: function (attr, value)
    {
    if (arguments.length == 1)
    {
    return parseFloat(this.oElement.currentStyle ? this.oElement.currentStyle[attr] : getComputedStyle(this.oElement, null)[attr])
    }
    else if (arguments.length == 2)
    {
    attr == "opacity" ? (this.oElement.style.filter = "alpha(opacity=" + value + ")", this.oElement.style.opacity = value / 100) : this.oElement.style[attr] = value + "px"
    }
    },
    doMove: function ()
    {
    var opt = this.options;
    var bComplete = true;
    for (var p in opt)
    {
    var iCur = p == "opacity" ? parseInt(this.css(p).toFixed(2) * 100) : this.css(p);
    var iSpeed = (opt[p] - iCur) / 5;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    opt[p] == iCur || (bComplete = false, this.css(p, iCur + iSpeed))
    }
    bComplete && (clearInterval(this.timer), this.callback && this.callback.call(this))
    }
    };
    //运动框架应用
    window.onload = function ()
    {
    var oSpan = document.getElementsByTagName("span")[0];
    var oInput = document.getElementsByTagName("input")[0];
    //定义运动路径
    var aData = [
    {width:20, height:20},
    {width:80, height:80},
    {left:10}, {left:408},
    {opacity:100},
    {opacity:0},
    {opacity:100},
    {width:80, height:80, left:408},
    {top:10},
    {width:20, height:20, left:468},
    {top:70},
    {left:10},
    {top:10},
    {left:468},
    {width:20, height:20, left:468},
    {width:80, height:80, left:408}
    ];
    var bOrder = true;
    var i = 0;
    oInput.disabled = false;
    //按钮点击事件(开始/返回)
    oInput.onclick = function ()
    {
    var oThis = this;
    oThis.disabled = true;
    function begin()
    {
    bOrder ? i++ : i--;
    var obj = new Animate(oSpan, aData[i], begin);
    if (i == aData.length || i < 0)
    {
    clearInterval(obj.timer);
    bOrder = !bOrder;
    oThis.value = bOrder ? "\u5f00\u59cb" : "\u539f\u8def\u8fd4\u56de";
    oThis.disabled = false;
    return
    }
    }
    begin()
    };
    //去除按钮虚线
    oInput.onfocus = function ()
    {
    this.blur();
    }
    }
    </script>
    </head>
    <body>
    <div id="wrap">
        <input type="button" value="开始" />
        <div class="box"><span></span></div>
    </div>
    </body>
    </html>
      

  6.   

    http://www.open-lib.com/Type/122-1.jspjquery的各种手风琴 插件
      

  7.   

    纯js 纯javascript 手风琴效果
    http://download.csdn.net/detail/hch126163/4320047
      

  8.   

    楼主 DOM的动画 就是 setInterval 不停地改变其css，楼主 先试着 封装个动画库
    能实现 移动 改变大小 透明度等，那么你要实现手风琴 也就快了。
      

  9.   

    我已经做好了一个样式的我就希望它能动起来，你能帮我看看吗？http://topic.csdn.net/u/20120526/09/39f20247-62a9-4d12-a820-f404dd3b0cb9.html
      

  10.   

    这个效果我没有用插件也做出来了，用jquery的animate函数模拟出来了。