想像以前一样把代码剥离下来用，可是不知是哪些代码。

goolge 出来：移动版 Google Images 再次改版，可在嵌入图片浏览图层里滑动看图这个文章也没什么用。

效果图片：

如实现的 google 图片效果链接

请大家说一下这个如何实现，如何能贴一下代码教一下步骤或给个链接哪太好了。

老司机带带我！

第 1 条附言 · 2016-01-12 11:26:18 +08:00

2016-1-12 上午

1.搜索：

用 google 搜索关键词： jquery 显示隐藏 div
找到：jQuery 效果 - 隐藏和显示
最下面的： jQuery toggle() 实现的就是我想要的效果。

2.成果：

正常：

点击：

3.贴代码：下面是完整的代码都在一个 html 文件里

代码贴在回复里。

4.问题：如上图，显示的内容是在右边，不是在一整行的下边。并且宽度要 960px 。如 google 图片一样的效果。

带带

图片

Google

图层

2 条回复

v1024

2016-01-11 22:41:59 +08:00

虽然不难，但楼主着么一问，感觉一言难尽
所以楼主还是慢慢学学基础
着急实现就花钱找人办了…

98mei

2016-01-12 11:24:56 +08:00

##2016-1-12 上午

## 1.搜索：
- 用 google 搜索关键词： **jquery 显示隐藏 div**
- 找到：[jQuery 效果 - 隐藏和显示]( http://www.w3school.com.cn/jquery/jquery_hide_show.asp)
- 最下面的： jQuery toggle() 实现的就是我想要的效果。

## 2.成果：
正常：
![]( http://i4.tietuku.com/14aa7e45b1d58742.jpg)

点击：
![]( http://i4.tietuku.com/0e31edd2d34e34d3.jpg)

## 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> 

<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>

<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 图片一样的效果。

google 图片，点击搜索结果图片 弹出 浏览图层 如何实现？老司机带带我