模拟手风琴效果怎么实现
日期：2014-05-16 浏览次数：20521 次
模拟手风琴效果如何实现
现在我不想用任何的框架，也不想用别人封装好的类库，我现在只想用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>
------解决方案--------------------
楼主参考下，
现在我不想用任何的框架，也不想用别人封装好的类库，我现在只想用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 oInp
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
