本文内容转自“东软睿道”培训内容。
首先我们画出基本的内容,我们需要一个标题的部分然后是一个展开的按钮,这里简化为一个加号
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/testjs3.css">
<script type="text/javascript" src="js/testjs3.js"></script>
</head>
<body>
<p>更多产品<span id="signal" class="" οnclick="showproduct();">+</span></p>
<div id="product" class="product">
<div class="divouter">
<img src="p_w_picpaths/2.jpg">
<div class="ribbon"></div>
</div>
<div class="divouter">
<img src="p_w_picpaths/Sunset.jpg">
<div class="ribbon"></div>
</div>
<div class="divouter">
<img src="p_w_picpaths/3.jpg">
<div class="ribbon"></div>
</div>
<div class="divouter">
<img src="p_w_picpaths/Winter.jpg">
<div class="ribbon"></div>
</div>
<div class="divouter">
<img src="p_w_picpaths/zjn.jpg">
<div class="ribbon"></div>
</div>
<div class="divouter">
<img src="p_w_picpaths/zjnxz.jpg">
<div class="ribbon"></div>
</div>
</div>
</body>
</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像素就可以。
转载于:https://blog.51cto.com/11827362/1839666