请问如何用一个函数代码实现一个页面上多处div的展开收缩效果,谢谢 10
多属性同时运动:
JS:
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
aDiv[i].onmouseover=function(){
Move(this,{width:200,height:200});
};
aDiv[i].onmouseout=function(){
Move(this,{width:150,height:150});
};
};
}
function Move(obj,json){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var stop=true;
for(var attr in json){
if(obj.currentStyle){
var cur=parseInt(obj.currentStyle[attr]);
}else{
var cur=parseInt(getComputedStyle(obj,false)[attr]);
}
var speed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){stop=false;}
cur+=speed;
obj.style[attr]=cur+"px";
}
if(stop){clearInterval(obj.timer);}
},30);
}
HTML:
<div></div>
<div></div>
<div></div>
CSS:
*{padding: 0;margin:0;}
div{width: 150px;height: 150px;background: blue;float: left;margin: 10px;border: #000 dashed 5px;}
我看了一下,这不是我想要的效果,我想要的在不同的div层里面的文字介绍的收缩展开效果(单独收缩展开)
2013-02-25
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建文档</title>
<script type="text/javascript" src="Js/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btns").click(function(e) {
var strId = this.id;
var keyId = strId.substring(3, strId.lenght);
var status = $("#div" + keyId).css("display");
if (status != "none") {
status = "none";
}
else {
status = "block";
}
$("#div" + keyId).css("display", status);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" class="btns" value="按钮1" />
<div id="div1" style="display:none; color:Red">按钮1控制的地方</div>
<input type="button" id="btn2" class="btns" value="按钮2" />
<div id="div2" style="display:none; color:Blue">按钮2控制的地方</div>
</body>
</html>
//利用id对应来控制