由于本周开始编写 宝石迷阵这款益智游戏，其中涉及到的两个效果我觉得很有趣。
- 手风琴：点击一级餐单，二级菜单动态弹出；再次点击一级菜单，二级菜单缩回；
实现方法如下：
首先，用CSS和HTML规划9个框，其中第1、4、7个相对大一点，作为我们的一级餐单。其他尺寸小的就用来做二级餐单。
其次，再每个一级菜单中嵌入一个A标签，改标签引用一个能够让我们达到效果的函数。
以下是我的函数，有点搓，但是有效果
var clickno = 1; //这个是标记变量，干嘛的呢，当标记为-1时，说第一次点击，我收缩或者展开，每次点击完自动乘以-1
function shorter(){
if(clickno >0){ //收缩函数
var makeshort = setInterval(function(){
var temphigh = parseInt($(‘cp‘).offsetHeight);
$(‘cp‘).style.height = temphigh-2+‘px‘;
$(‘pc‘).style.height = temphigh-2+‘px‘;
$(‘males‘).style.height = temphigh-2+‘px‘;
$(‘femaleb‘).style.height = temphigh-2+‘px‘;
$(‘day‘).style.height = temphigh-2+‘px‘;
$(‘mant‘).style.height = temphigh-2+‘px‘;
if(temphigh == 0 ){
clickno*=-1; //当二级菜单收缩到最小时，标记变量为负，那么下次点击时因为是-1，则执行展开函数
clearInterval(makeshort);//不可能永远收缩下去，所以二级菜单高度为0时结束收缩
}
},25)
}
if(clickno <0){ //展开函数
var makelong = setInterval(function(){
var temphigh2 = parseInt($(‘cp‘).offsetHeight);
$(‘cp‘).style.height = temphigh2+2+‘px‘;
$(‘pc‘).style.height = temphigh2+2+‘px‘;
$(‘males‘).style.height = temphigh2+2+‘px‘;
$(‘femaleb‘).style.height = temphigh2+2+‘px‘;
$(‘day‘).style.height = temphigh2+2+‘px‘;
$(‘mant‘).style.height = temphigh2+2+‘px‘;
if(temphigh2 == 30 ){
clickno*=-1; //当二级菜单展开到最大时，标记变量为正，那么下次点击时因为是+1，则执行展收缩函数
clearInterval(makelong); //不可能永远展开下去，所以二级菜单高度为0时结束展开
},25)
}
}
再次强调，有点搓，but有效果，呵呵！
2. 滑动条效果：随着时间推移，框中的颜色像水一样上涨并直至填充完整个外框，同时上边有个小标签跟着走；
首先，用HTML和CSS画出以上效果，什么？不会画三角形。设置和没高宽，粗边框、三边透明的DIV就完事了撒。
其次，再次在按钮A标签中植入JS函数，；
以下还是我比较搓的代码：
var marker =1; //标记变量，用来区分是暂停还是继续
$(‘movetips‘).style.marginLeft = 0;
function timing(){ //利用marginleft的属性随时间增加的方式让填充条变宽
var moveab = setInterval(function(){
var tempwidth = parseInt($(‘fill‘).offsetWidth);
$(‘fill‘).style.width =tempwidth+1+‘px‘;
$(‘movetips‘).style.marginLeft = parseInt($(‘movetips‘).style.marginLeft)+1+‘px‘; //小标签跟着走
var showtimes =parseInt((1- (parseInt($(‘movetips‘).style.marginLeft)/600))*60); //填充条走
$(‘time‘).innerHTML =‘<p>‘+showtimes+‘ S</p>‘; //小标签中的剩余时间显示
// console.log($(‘movetips‘).style.width)
if(tempwidth >= 600 || marker == 1){ //小机关：当填充条满了，或者标记变量为1时歇歇
clearInterval(moveab) //填充条走满了就该歇歇了
}
},100)
}
function go(){ //嵌在按钮A标签中的函数
marker*=-1; //整个干嘛的，我按钮一次就取反一次，负的继续走，正的歇歇；
timing()
}
我的这两个效果的共同点是：都放了一个标记变量用来判断是停还是走。代码体极其粗糙，but基本逻辑不粗糙。
手风琴效果和滑动条