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

    xiaoxiao2024-04-05  103

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

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

    相关资源:Html5游戏开发实例源码集锦
    最新回复(0)