各位大神，高手们，小弟又遇到难题了/这个展开特效怎么实现

goinni 2012-06-18 09:38:32
各位大神，高手们，小弟又遇到难题了，
我要做一个展开带动画效果的，我的方法是$("id").show();
单独用这一个是好用的，但是要是多个一起用就不行了，
比如：onload=function(){
$("id_1").show();//这个会好用
$("id_2").show();//这个就没有反应了
}
求高手大神们指点！！！！！.......
以下为我的代码：有点乱。。。
function $(id){
var me = document.getElementById(id);
me.show=function(){
if((me.style.height=="" || me.style.height=="0px") && me.clientHeight == 0 && intervalId == "undefined"){
intervalId=setInterval(timeExecOpen(me,slow),1);
}else{return}
};
return me;
}
//timer
var intervalId = "undefined";
var timeIndex = 0,tn = 0,h = 0;
var timeEntityArray = new Array();
//收缩盒子
function timeExecClose(entity,speed){
if(timeIndex==0){
h = entity.clientHeight;
timeEntityArray.push(new Map(entity,h));
timeIndex++;
}
h<speed?h=0:h -=speed;
entity.style.height = h+"px";
entity.style.overflow = "hidden";
if(h<=0){
timeIndex=0; tn = 0; h = 0;
stopTime();
entity.style.display="none";
}
return function(){
timeExecClose(entity,speed);
}
}
//展开盒子
function timeExecOpen(entity,speed){
if(timeIndex==0){
entity.style.display="block";
if(timeEntityArray.length>0&&timeEntityArray!=null){
for(var i=0;i<timeEntityArray.length;i++){
if(timeEntityArray[i].key==entity){
h = timeEntityArray[i].value;
timeEntityArray.splice(i,1);//查到后删除临时对象
}
}
}else{
h=entity.clientHeight;
}
timeIndex++;
}
(tn+=speed)>h?tn=h:"";
entity.style.height = tn+"px";
entity.style.overflow = "hidden";
if(tn>=h){
timeIndex=0; tn = 0; h = 0;
stopTime();
}
return function(){
timeExecOpen(entity,speed);
}
}
//停止动画
function stopTime(){
window.clearInterval(intervalId);
intervalId = "undefined";
}
//定义一个MAP对象
function Map(key,value){
this.key = key;
this.value = value;
}
...全文
111 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
eugenepada 2012-06-18
  • 打赏
  • 举报
 回复
你想要的是这样?


<!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=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

	var slow = 4, normal = 5, fast = 10;//动画特效速度级别

	function $(id) {

		var me = document.getElementById(id);

		me.show = function() {

			if (me.clientHeight == 0 && !me.intervalId) {

				me.intervalId = setInterval(timeExecOpen(me, slow), 1);

			} else {

				return

			}

		};

		me.hide = function() {

			if (((me.style.height != "" && me.style.height != "0px") || me.clientHeight > 0)

					&& !me.intervalId) {

				me.intervalId = setInterval(timeExecClose(me, slow), 1);

			} else {

				return

			}

		};

		return me;

	}

	/*************************************************************

	 * Timer 动画计时器特效 *

	 *********************************************************/

	//var intervalId = "undefined";

	var height = 300;

	var timeIndex = 0, tn = 0, h = 0;

	var timeEntityArray = new Array();

	//收缩盒子

	function timeExecClose(entity, speed) {

		if (timeIndex == 0) {

			h = entity.clientHeight;

			timeEntityArray.push(new Map(entity, h));

			timeIndex++;

		}

		h < speed ? h = 0 : h -= speed;

		entity.style.height = h + "px";

		entity.style.overflow = "hidden";

		if (h <= 0) {

			timeIndex = 0;

			tn = 0;

			h = 0;

			stopTime(entity);

			entity.style.display = "none";

		}

		return function() {

			timeExecClose(entity, speed);

		}

	}

	//展开盒子

	function timeExecOpen(entity, speed) {

		// 

		var h = entity.clientHeight;

		entity.style.display = "block";

		if(h == 0){

			entity.__h = entity.clientHeight;

		}

		(h += speed) > entity.__h ? h = entity.__h : 0;

		entity.style.height = h + "px";

		entity.style.overflow = "hidden";

		if(h >= entity.__h){

			stopTime(entity);

		}

		return function(){

			timeExecOpen(entity,speed);

		}

	}

	//停止动画

	function stopTime(entity) {

		window.clearInterval(entity.intervalId);

		entity.intervalId = null;

	}

	//定义一个MAP对象

	function Map(key, value) {

		this.key = key;

		this.value = value;

	}



	//初始化调用 的方法-------------------------------------------

	onload = function() {

		// 以下内容打开一下好用,两个同时打开第二个不好用

		$("contant1").show();//这个好用

		$("contant2").show();//两个同时开这个不好用

	}

</script>

</head>



<body>

	<div id="contant1"

		style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容1</div>

	<div id="contant2"

		style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容2</div>

</body>

</html>
goinni 2012-06-18
  • 打赏
  • 举报
 回复
高手啊，果然好用了，偶像啊。。。。
能不能实现同时伸展！！望再次指教!!!!谢谢谢谢....
eugenepada 2012-06-18
  • 打赏
  • 举报
 回复 


<!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=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

	var slow = 4, normal = 5, fast = 10;//动画特效速度级别

	function $(id) {

		var me = document.getElementById(id);

		me.show = function() {

			if (me.clientHeight == 0 && !me.intervalId) {

				me.intervalId = setInterval(timeExecOpen(me, slow), 1);

			} else {

				return

			}

		};

		me.hide = function() {

			if (((me.style.height != "" && me.style.height != "0px") || me.clientHeight > 0)

					&& !me.intervalId) {

				me.intervalId = setInterval(timeExecClose(me, slow), 1);

			} else {

				return

			}

		};

		return me;

	}

	/*************************************************************

	 * Timer 动画计时器特效 *

	 *********************************************************/

	//var intervalId = "undefined";

	var timeIndex = 0, tn = 0, h = 0;

	var timeEntityArray = new Array();

	//收缩盒子

	function timeExecClose(entity, speed) {

		if (timeIndex == 0) {

			h = entity.clientHeight;

			timeEntityArray.push(new Map(entity, h));

			timeIndex++;

		}

		h < speed ? h = 0 : h -= speed;

		entity.style.height = h + "px";

		entity.style.overflow = "hidden";

		if (h <= 0) {

			timeIndex = 0;

			tn = 0;

			h = 0;

			stopTime(entity);

			entity.style.display = "none";

		}

		return function() {

			timeExecClose(entity, speed);

		}

	}

	//展开盒子

	function timeExecOpen(entity, speed) {

		if (timeIndex == 0) {

			entity.style.display = "block";

			if (timeEntityArray.length > 0 && timeEntityArray != null) {

				for ( var i = 0; i < timeEntityArray.length; i++) {

					if (timeEntityArray[i].key == entity) {

						h = timeEntityArray[i].value;

						timeEntityArray.splice(i, 1);//查到后删除临时对象

					}

				}

			} else {

				h = entity.clientHeight;

			}

			timeIndex++;

		}

		(tn += speed) > h ? tn = h : "";

		entity.style.height = tn + "px";

		entity.style.overflow = "hidden";

		if (tn >= h) {

			timeIndex = 0;

			tn = 0;

			h = 0;

			stopTime(entity);

		}

		return function() {

			timeExecOpen(entity, speed);

		}

	}

	//停止动画

	function stopTime(entity) {

		window.clearInterval(entity.intervalId);

		entity.intervalId = null;

	}

	//定义一个MAP对象

	function Map(key, value) {

		this.key = key;

		this.value = value;

	}



	//初始化调用 的方法-------------------------------------------

	onload = function() {

		// 以下内容打开一下好用,两个同时打开第二个不好用

		$("contant1").show();//这个好用

		$("contant2").show();//两个同时开这个不好用

	}

</script>

</head>



<body>

	<div id="contant1"

		style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容1</div>

	<div id="contant2"

		style="height: 300px; width: 200px; border: 1px solid red; overflow: hidden; display: none;">这里是内容2</div>

</body>

</html>
goinni 2012-06-18
  • 打赏
  • 举报
 回复
以下是我测试的代码，放到html文件里就能用，望高手帮忙看一下，指点一二，谢谢。。。。


<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var slow=4,normal=5,fast=10;//动画特效速度级别
function $(id){
var me = document.getElementById(id);
me.show=function (){
if(me.clientHeight == 0 && intervalId == "undefined"){
intervalId=setInterval(timeExecOpen(me,slow),1);
}else{return}
};
me.hide=function (){
if(((me.style.height!="" && me.style.height!="0px") || me.clientHeight>0) && intervalId == "undefined"){
intervalId=setInterval(timeExecClose(me,slow),1);
}else{return}
};
return me;
}
/*************************************************************
* Timer 动画计时器特效 *
*********************************************************/
var intervalId = "undefined";
var timeIndex = 0,tn = 0,h = 0;
var timeEntityArray = new Array();
//收缩盒子
function timeExecClose(entity,speed){
if(timeIndex==0){
h = entity.clientHeight;
timeEntityArray.push(new Map(entity,h));
timeIndex++;
}
h<speed?h=0:h -=speed;
entity.style.height = h+"px";
entity.style.overflow = "hidden";
if(h<=0){
timeIndex=0; tn = 0; h = 0;
stopTime();
entity.style.display="none";
}
return function(){
timeExecClose(entity,speed);
}
}
//展开盒子
function timeExecOpen(entity,speed){
if(timeIndex==0){
entity.style.display="block";
if(timeEntityArray.length>0&&timeEntityArray!=null){
for(var i=0;i<timeEntityArray.length;i++){
if(timeEntityArray[i].key==entity){
h = timeEntityArray[i].value;
timeEntityArray.splice(i,1);//查到后删除临时对象
}
}
}else{
h=entity.clientHeight;
}
timeIndex++;
}
(tn+=speed)>h?tn=h:"";
entity.style.height = tn+"px";
entity.style.overflow = "hidden";
if(tn>=h){
timeIndex=0; tn = 0; h = 0;
stopTime();
}
return function(){
timeExecOpen(entity,speed);
}
}
//停止动画
function stopTime(){
window.clearInterval(intervalId);
intervalId = "undefined";
}
//定义一个MAP对象
function Map(key,value){
this.key = key;
this.value = value;
}


//初始化调用 的方法-------------------------------------------
onload=function(){
// 以下内容打开一下好用,两个同时打开第二个不好用
$("contant1").show();//这个好用
$("contant2").show();//两个同时开这个不好用
}
</script>
</head>

<body>
<div id="contant1" style="height:300px; width:200px; border:1px solid red; overflow:hidden; display:none;">这里是内容1</div>
<div id="contant2" style="height:300px; width:200px; border:1px solid red; overflow:hidden; display:none;">这里是内容2</div>
</body>
</html>
statichu2 2012-06-18
  • 打赏
  • 举报
 回复
在调用show方法前用clearInterval把intervalId清掉吧
statichu2 2012-06-18
  • 打赏
  • 举报
 回复
$("id_1").show(); 执行这个方法的时候程序进入了 intervalId=setInterval(timeExecOpen(me,slow),1);执行正常，当show第二个元素的时候 $("id_2").show(); 程序进入了else 都执行了return 肯定就显示出不来了
goinni 2012-06-18
  • 打赏
  • 举报
 回复
嗯，我也是这么想的，但是不知道应该怎么改。。。。。。。求救。。。
乌镇程序员 2012-06-18
  • 打赏
  • 举报
 回复
先在控制台下看看有没有报错？没有报错的话，问题可能出在共用了setInterval()返回的id值。

整理一份可供测试的html代码发上来。
eugenepada 2012-06-18
  • 打赏
  • 举报
 回复
应该是
//timer
var intervalId = "undefined";

共用了或错乱了
goinni 2012-06-18
  • 打赏
  • 举报
 回复
偶像啊，太帅了，谢谢谢谢，我现在只有这么多分，不多，全给你了，以后我分多了给你补上，哈哈
Android 开发即时聊天工具 YQ (更新)
Android 开发即时聊天工具 YQ ,仿QQ，实现网络即时聊天。
俄羅斯大神 Ratiborus 的推特
俄羅斯大神 Ratiborus 的推特，不過他已經很少更新了。https://twitter.com/ratiborus58?lang=en 他專用的網盤地址：https://www.solidfiles.com/folder/bd7165a0d4/ 需要備註一下，壓縮包的密碼就是 password旁邊...
编写程序python输入任意大的自然数、输出各位数字之和_计算一个自然数的各位数字之和，在主函数中输入自然数，并输出结果。求大神解答编写程序,计算一个自然数的各位...
计算一个自然数的各位数字之和，在主函数中输入自然数，并输出结果。求大神解答 编写程序,计算一个自然数的各位www.zhiqu.org 时间： 2020-12-07#include#includeint main(){int i=0,t=0;char a[100];scanf("%s",a...
2019年CSDN排名前10名大神
截止到2019年4月20日，CSDN前十的大神： 排名第1：https://blog.csdn.net/stpeace 排名第2：https://blog.csdn.net/yuanmeng001 排名第3：/************此位大神不知去何方***********/ 排名第4：...
Unity shader护盾特效
身为小白的我看到某大神用 amplify shader editor 插件做了护盾特效，很酷。 蓝色是大神做的，红色那个是我的（感觉和大神的低了几个档次，哈哈） 大神的视频链接： ......
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章