2018年8月26日
摘要: 本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动。 为了实现上面的效果,我们需要在html中进行简单的布局: 其中div为外层固定大小的大盒子,因为图片大 阅读全文
posted @ 2018-08-26 22:17 紅葉 阅读(263) 评论(0) 推荐(0) 编辑
摘要: 在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控制每个格子的left和top属性,就可以控制图片的位置了,例如上面序号为4的格子,其left属性值就 阅读全文
posted @ 2018-08-26 14:56 紅葉 阅读(280) 评论(0) 推荐(0) 编辑
摘要: 在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换。因此,我们需要三个容器分别放标题,大图和小图。 <!--大图描述--> <p id="des">蒲公英</p> <!--大图展示--> <img id="big_img" 阅读全文
posted @ 2018-08-26 13:19 紅葉 阅读(187) 评论(0) 推荐(0) 编辑
摘要: 在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换。 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在html中创建一个放照片的容器和两个切换的按钮。 然后,我们需要知道当前图片的索引,当点击上一张的时候, 阅读全文
posted @ 2018-08-26 13:00 紅葉 阅读(796) 评论(0) 推荐(0) 编辑