基于HTML+CSS实现的可交互照片墙Web页面 |
您所在的位置:网站首页 › 个人主页照片墙 › 基于HTML+CSS实现的可交互照片墙Web页面 |
资源下载地址:https://download.csdn.net/download/sheziqiong/85723524 资源下载地址:https://download.csdn.net/download/sheziqiong/85723524 一、 实验目的本次实验目为练习 HTML+CSS 的布局与样式,以及简单的交互 二、实验内容制作一个可交互的照片墙,照片墙可以点击照片查看大图 三、实验步骤 1. 确定需求照片墙是一个可以将照片按照一定的顺序排列的 Web 页面,基本要求是照片要合理的地排布在页面上,且照片的尺寸要合适,布局要整齐。 点击照片,可以在当前页面上方显示一个新的图层,其中显示这张照片的更大尺寸的图片。点击图层的其它位置可以隐藏该图层 可以向照片墙中添加照片 可以删除照片墙中的照片 可以替换照片墙的照片 页面要具有很好的过渡效果,且满足响应式设计,适应不同尺寸的设备 2.设计页面原型根据需求,设计界面原型。 上方居中显示标题和作者 主题部分为网格化布局照片,使用空白作为网格线。在正常计算机浏览器上每行显示 4 张图片,默认初始有 12 张图片。在平板电脑(宽度小于 1024px 大于 690px)浏览器上每行显示 3 张图片。在手机(宽度小于 690px)浏览器上每行显示两张图片。且在页面右下位置有一个固定不动的添加图片按钮 底端显示提示信息 大图页面为灰色蒙层,蒙层上为一张图片。在蒙层右下位置有一个删除按钮和一个替换按钮 3. 实现布局编写 index.html、index、CSS 关键技术: 主页面 Outside_block 中为页面主题部分,其中 title_block 为标题,有两个标题标签组成,photo_block 是图片,由 12 张初始组成,bottom_block 为底端提示,由两个文字标签组成 其中图片布局采用 flex 布局,具体样式为: 对于容器整体,采用多余元素换行显示,水平、竖直以及每行行内竖直均为居中 对于容器内的图片元素,采用百分比宽度 20% 设置图片宽度,同时确保每行显示 4 个图片。 其余样式不再赘述 加号按钮 在 outside_block 外设置一个 div 作为新增图片的按钮,其中放置一个加号的图片。此外还需要添加一个隐藏的组件,用于触发选择文件。因为 div 无法单纯通过点击事件调用选择文件的接口,因此将它的点击事件绑定到可以调用选择文件事件的 input 上。 具体样式为: display:none 将 input 隐藏 position:fixed 将元素设为固定布局,固定在页面的某个位置,不随页面的移动而移动。同时设置为为 flex 容器,使其中的“+”号可以位于按钮的中央 大图图层 Big 为图层本身 Big_img 用于存放大图,其 src 为空,动态填入 两个按钮使用 button Input 作用同上 伪类动作 对所有图片、按钮,使用:hover {cursor: pointer}使的当鼠标悬停时,变为指针 对图片,使用:hover{transform.scale(1.1)}设置鼠标悬停在图片上方时,图片略微放大以指示该图片 对三个按钮,使用:hover{transform: translateY(-4px)}设置鼠标悬停在按钮上方时,按钮向上浮动 4px 的效果 响应式设计 使用了 flex 布局,实现响应式设计 同时在中设置 viewport 视窗,限制移动端的视窗长度 4.实现交互编写 index.js,使用 jQuery 编写 核心交互功能 添加图片 将按钮(.button)的点击事件绑定到隐藏的文件输入上(.button_hidden),并且监听选择文件改变事件 change。 利用 FileReader,对(id=“upload”)选择的文件 file,进行读取,并且使用 src 接收返回的图片 base64 格式编码(存放在 oFRevent.target.result)中。 在将或得到的 src 插入一个标签中,添加到 photo_block 最后 点击查看大图 为所有的图片添加点击事件 show,对于新增的 DOM 节点,由于 JS 的渲染特性为在加载时一次性渲染,因此无法绑定上述事件。使用 on 函数,监听未知 img 节点的点击事件,并绑定响应函数 show。并将触发点击事件的元素 id 存入全局变量中 传入参数为当前被点击的 DOM 对象,show 函数为: 首先获取被点击图片的 src,并将它赋给大图 big_img 再根据当前窗口的大小和图片的尺寸,设置大图的尺寸。若图片是宽大于高,则将宽设置为窗口宽度的 scale 倍,否则将高设置额为窗口高度为 scale 被,并等比例缩放。将新的宽度、高度赋予 big_img,并计算边距,赋予内部 div(.inner) 设置完成后,使用 fadeIn 将大图图层显示出来(“.big”) 对大图图层,设置隐藏函数 fadeOut 响应点击事件 删除图片: 直接使用 remove 删除。 替换图片: 原理同新增图片,拿到 src 后替换原有 src 1.界面效果 资源下载地址:https://download.csdn.net/download/sheziqiong/85723524 资源下载地址:https://download.csdn.net/download/sheziqiong/85723524 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |