98mei 最近的时间轴更新 98mei 最近的时间轴更新 |
98meiV2EX 第 155031 号会员，加入于 2016-01-11 21:29:35 +08:00 |
| google 图片，点击搜索结果图片 弹出 浏览图层 如何实现？老司机带带我
1 问与答 • 98mei • 2016-01-12 11:24:56 AM • 最后回复来自 98mei
|
2 |
| google 图片，点击搜索结果图片 弹出 浏览图层 如何实现？ 新手求助 • 98mei • 2016-01-11 21:56:19 PM |
98mei 最近回复了
2016-01-12 11:24:56 +08:00 回复了 98mei 创建的主题 › 问与答 › google 图片，点击搜索结果图片 弹出 浏览图层 如何实现？老司机带带我 |
##2016-1-12 上午
## 1.搜索：
- 用 google 搜索关键词： **jquery 显示 隐藏 div**
- 找到：[jQuery 效果 - 隐藏和显示]( http://www.w3school.com.cn/jquery/jquery_hide_show.asp)
- 最下面的： jQuery toggle() 实现的就是我想要的效果。
## 2.成果：
正常：
点击：
## 3.贴代码：下面是完整的代码都在一个 html 文件里
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Theme_box</title>
<link href="" rel="stylesheet">
<style type="text/css">
.Themes{
width: 960px;
background-color: #999999;
height: 400px;
margin: 100px auto;
}
.Theme_box{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;
line-height: 100px;
text-align: center;
}
button{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;
line-height: 100px;
text-align: center;
}
</style>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <!-- 引入 jQuery 文件 -->
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //按扭
$("p").toggle(); //内容
});
});
</script>
</head>
<body>
<div class="Themes">
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<button type="button">你好 box 按扭</button>
<!-- <button>是标记一个按扭 标记按扭 -->
<p>这是一个段落。</p> <!-- 内容 -->
<p>这是另一个段落。</p>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
</div>
</body>
</html>
```
# 4.问题：如上图，显示的内容是在右边，不是在一整行的下边。并且宽度要 960px 。如 google 图片一样的效果。
## 1.搜索：
- 用 google 搜索关键词： **jquery 显示 隐藏 div**
- 找到：[jQuery 效果 - 隐藏和显示]( http://www.w3school.com.cn/jquery/jquery_hide_show.asp)
- 最下面的： jQuery toggle() 实现的就是我想要的效果。
## 2.成果：
正常：
点击：
## 3.贴代码：下面是完整的代码都在一个 html 文件里
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Theme_box</title>
<link href="" rel="stylesheet">
<style type="text/css">
.Themes{
width: 960px;
background-color: #999999;
height: 400px;
margin: 100px auto;
}
.Theme_box{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;
line-height: 100px;
text-align: center;
}
button{
width: 158px;
height: 100px;
background-color: #ffffff;
float: left;
margin: 1px;
line-height: 100px;
text-align: center;
}
</style>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <!-- 引入 jQuery 文件 -->
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //按扭
$("p").toggle(); //内容
});
});
</script>
</head>
<body>
<div class="Themes">
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<button type="button">你好 box 按扭</button>
<!-- <button>是标记一个按扭 标记按扭 -->
<p>这是一个段落。</p> <!-- 内容 -->
<p>这是另一个段落。</p>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
<div class="Theme_box">你好 box</div>
</div>
</body>
</html>
```
# 4.问题：如上图，显示的内容是在右边，不是在一整行的下边。并且宽度要 960px 。如 google 图片一样的效果。
Select Language