4.2 查看长图

在日常生活中我们经常看到 在固定的可视范围内,我们都为查看图片而 上下拖动鼠标 ,下面的代码列子: 首先我们看看1 :css布局吧. 就是一个div容器 装着一张 很大的图片 与两个span,两个span的高度是他们parent的一半的height.用子绝父相来实现.定位/ 当然了span这里都不用其他的设置了 什么opacity 啊 z-index 等等都不考虑的就设置width.height 与定位 :2.js 实现动画相关的效果 这里就有多种实现方式了哦.如下面的这种方式. 首先给大家介绍 一下 :假如图片的width :600px.当然它在这里不是我们所用到的关键值,那下面我就指出我们需求所用到的值而已, 假如图片的height是905px,因为parent的height是 400px.那么我给两个span 分别给的height就是200px; 在实现代码之前,告诉大家,图片向上滚动.相对parent来说图片的top 是负数的. 因为它向上超出parent.向下的话,图片的top就是正数的 .在这里我们就靠图片的top的样式,就可以了.因为给它在滚动的时候有动画的效果,我们就不得不适用定时器了.看看代码吧 这里就一几种代码书写方案 了:第一种:

图片.png

第二种如下图:

图片.png