1.8 无刷新弹出图片和文字
实例说明
本实例和上一个实例有异曲同工之妙，首先在网页中显示一行文本“想了解详情吗？”。当单击左侧的小三角符号后，将在下方无刷新弹出一个下拉区域，在里面同时显示图片和文本。本实例和上一个实例相比，多显示了一幅图片。本实例的素材图片是123.png，如图1-14所示。
具体实现
使用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所示。
在本实例中，当页面加载时将只会看到summary文本。如果想要默认显示这样的状态，需要把openattribute添加到details元素里：< details open >。
时间： 2024-12-06 07:42:10