html 点击展开第二章图片,如何实现页面中点击+号多张图片缓慢展开，再次点击×缓慢收起...

本文内容转自“东软睿道”培训内容。

首先我们画出基本的内容，我们需要一个标题的部分然后是一个展开的按钮，这里简化为一个加号html>

更多产品+

然后我们设置一下根据屏幕大小显示几张图片：/*屏幕像素大于1024时*/

@media screen and (min-width: 1024px)

{

div.divouter

{

float: left;

width: 30%;/*设置宽度的时候要考虑给margin留下空间*/

margin: 1%;

position: relative;

}

}

/*屏幕像素介于1024 768*/

@media screen and (max-width: 1024px) and (min-width: 768px)

{

div.divouter

{

float: left;

width: 45%;

margin: 2%;

position: relative;

}

}

/*屏幕像素小于768*/

@media screen and (max-width: 768px)

{

div.divouter

{

float: left;

width: 95%;

margin: 2%;

position: relative;

}

}

div.divouter img

{

width: 100%;

opacity: 0.9;

}

div.ribbon

{

width: 100%;

height: 15px;

background-color: orange;

position: absolute;

top: 0;

display: none;

}

div.divouter:hover div.ribbon

{

display: block;

}

div.product

{

height: 0px;

overflow: hidden;/*如果子元素超出我的范围了，则超出部分不显示*/

}

最后是通过JS实现缓慢下拉和收起的效果，当然是通过定时的递归调用自己。function showproduct()

{

var productCtrl=document.getElementById("product");

var span=document.getElementById("signal");

if (productCtrl.offsetHeight>=700) {

// productCtrl.style.height="0px";

span.innerHTML="+";

var taskid=setInterval(function(){

//1.得到高度是什么height的值

// var height=productCtrl.style.height;//11px 字符串所以不用这种方式

if (productCtrl.offsetHeight==1) {

//3.height==500的时候，清除循环任务

clearInterval(taskid);

}else

{

//2.height+1，设置到height属性上

productCtrl.style.height=(productCtrl.offsetHeight-1.2)+"px";

}

},1);

}else

{

span.innerHTML="×";

var taskid=setInterval(function(){

//1.得到高度是什么height的值

// var height=productCtrl.style.height;//11px 字符串所以不用这种方式

if (productCtrl.offsetHeight>=700) {

//3.height==500的时候，清除循环任务

clearInterval(taskid);

}else

{

//2.height+1，设置到height属性上

productCtrl.style.height=(productCtrl.offsetHeight+1.2)+"px";

}

},1);

}

}

注意上面js代码中的收起效果的临界值，应该为1，如果用带有小数去减一个数，不保证可以减到0，当然，我们减不出一个高度是负的，所以就会出现卡住的现象。所以建议小于1像素就可以。