模拟手风琴效果如何实现
现在我不想用任何的框架，也不想用别人封装好的类库，我现在只想用js来改变div的宽度，或者是用js来移动div的位置来实现手风琴效果，请各位大侠们帮帮忙。给几句关键性的提醒就好了。
[解决办法]
参照一下已经封装好的，研究一下吧。
[解决办法]
点div，触发div的click句柄。里面维护一个setInterval，改变div的style就行
[解决办法]
http://rainsilence.iteye.com/blog/1081323
你可以参考我早些时候的博客。
[解决办法]
点下按钮移动，接下来自己发挥：
<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>
[解决办法]
楼主参考下，
- HTML code
<!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>
[解决办法]
http://www.open-lib.com/Type/122-1.jsp
jquery的各种手风琴 插件
[解决办法]
纯js 纯javascript 手风琴效果
http://download.csdn.net/detail/hch126163/4320047