请问如何用一个函数代码实现一个页面上多处div的展开收缩效果,谢谢 10

一个页面上需要多处实现DIV展开收缩效果,但用一个函数,所有的都会同时展开收缩的!怎么改可以同一个代码让它们相互独立实现展开收缩功能?(每个收缩展开都不在同一个div中)... 一个页面上需要多处实现DIV展开收缩效果,但用一个函数,所有的都会同时展开收缩的!怎么改可以同一个代码让它们相互独立实现展开收缩功能?(每个收缩展开都不在同一个div中) 展开
 我来答
百度网友d9ac3fb66
2013-02-25 · TA获得超过1282个赞
知道小有建树答主
回答量:538
采纳率:0%
帮助的人:585万
展开全部


多属性同时运动:


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
展开全部
<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" 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对应来控制
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
fengshuang_110
2013-02-25 · 超过10用户采纳过TA的回答
知道答主
回答量:64
采纳率:0%
帮助的人:49.5万
展开全部
利用target属性!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式