模拟手风琴效果如何实现

建安 2012-05-24 09:41:47

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

...全文

321 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

建安 2012-06-08

打赏
举报

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

建安 2012-05-28

打赏
举报

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

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

001007009 2012-05-26

打赏
举报

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

建安 2012-05-26

打赏
举报

我现在感觉插件，类库对于我们非常页面用户体验真的是非常好，不过我还是想了解最简单的原理之后再来直接调用别人封装好的类库文件，这样才游刃有余。[Quote=引用 11 楼的回复:]

http://www.open-lib.com/Type/122-1.jsp

jquery的各种手风琴插件
[/Quote]

ycproc 2012-05-25

打赏
举报

http://www.open-lib.com/Type/122-1.jsp

jquery的各种手风琴插件

建安 2012-05-25

打赏
举报

这个也太复杂了，我只是想从最简单的入手，不过这个我会努力去研究的
[Quote=引用 9 楼的回复:]

楼主参考下，

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>
<met……
[/Quote]

001007009 2012-05-25

打赏
举报

楼主参考下，



<!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>

建安 2012-05-25

打赏
举报

这个很不错我，我现在在想的是怎么让它到一定距离之后就停止呢？
[Quote=引用 7 楼的回复:]

点下按钮移动，接下来自己发挥：
<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" lang……
[/Quote]

hch126163 2012-05-25

打赏
举报

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

建安 2012-05-24

打赏
举报

我还是想从最简单的下手，只有让我知道了原理，我才能更好的应用各种库

001007009 2012-05-24

打赏
举报

参照一下已经封装好的，研究一下吧。

lc_myth 2012-05-24

打赏
举报

点下按钮移动，接下来自己发挥：
<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>

建安 2012-05-24