您的位置：首页 > Web前端 > JavaScript

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

2016-08-17 18:35 621 查看

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

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

<!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像素就可以。

附件：http://down.51cto.com/data/2368060

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS HTML5 CSS3

相关文章推荐

新的分享

章节导航