本文內容轉自“東軟睿道”培訓內容。
首先我們畫出基本的內容，我們需要一個標題的部分然後是一個展開的按鈕，這裏簡化爲一個加號
<!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="" onclick="showproduct();">+</span></p> <div id="product" class="product"> <div class="divouter"> <img src="images/2.jpg"> <div class="ribbon"></div> </div> <div class="divouter"> <img src="images/Sunset.jpg"> <div class="ribbon"></div> </div> <div class="divouter"> <img src="images/3.jpg"> <div class="ribbon"></div> </div> <div class="divouter"> <img src="images/Winter.jpg"> <div class="ribbon"></div> </div> <div class="divouter"> <img src="images/zjn.jpg"> <div class="ribbon"></div> </div> <div class="divouter"> <img src="images/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像素就可以。