本文内容转自“东软睿道”培训内容。
首先我们画出基本的内容,我们需要一个标题的部分然后是一个展开的按钮,这里简化为一个加号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像素就可以。