《HTML5 开发实例大全》——1.8 无刷新弹出图片和文字

最新推荐文章于 2024-07-17 09:42:12 发布

weixin_33744854

最新推荐文章于 2024-07-17 09:42:12 发布

阅读量105

点赞数

原文链接：https://yq.aliyun.com/articles/97699

版权

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.8节,作者：张明星更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8 无刷新弹出图片和文字

c5ad1eb908f5496202d602bbace35e04bc65ded3

实例说明

本实例和上一个实例有异曲同工之妙，首先在网页中显示一行文本“想了解详情吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面同时显示图片和文本。本实例和上一个实例相比，多显示了一幅图片。本实例的素材图片是123.png，如图1-14所示。

f8068b0915be261ff6d0401e4a7b8c6e8be1e33c

具体实现

使用Dreamweaver创建一个名为“008.html”的文件，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>脚本控制交互元素<details></title>
<style type="text/css"> 
body { font-family: sans-serif; }

details {
　overflow: hidden;
　background: #e3e3e3;
　margin-bottom: 10px;
　display: block;
}

details summary {
　cursor: pointer;
　padding: 10px;
}

details div {
　float: left;
　width: 65%;
}

details div h3 { margin-top: 0; }

details img {
 float: left;
 width: 200px;
　padding: 0 30px 10px 10px;
}
</style>
</head>
<body>
　　<details>　
　　　 <summary>想了解详情吗</summary>　
　　　 <img src="123.png" alt="DDD" />　
　　　 <div>　
　　　　　<h3> 永远的高富帅 </h3>　
　　　　　<p>我的一个眼神，能够秒杀任何一切生物.............. 
　　　　　　 我的一个眼神，能够秒杀任何一切生物..............
　　　　　　 我的一个眼神，能够秒杀任何一切生物..............
　　　　　　 我的一个眼神，能够秒杀任何一切生物..............
　　　　 </p>　
　　　 </div>　
　　</details>　
</body>
</html>

执行后的效果如图1-15所示，单击文字左侧的小三角形符号后，在下方无刷新弹出一个新的区域，在这个区域内同时显示图片和文本，如图1-16所示。