JS30-Day13

Day13 – 图片随屏幕滚动而滑入滑出的效果

  • 首先获取触发动画的位置,在滚动到图片一半的位置时触发。 
    const slideAt = window.innerHeight + window.scrollY - sliderimage.height/2; 
    • window.innerHeight表示浏览器的内部视图窗口的高度值
    • window.scrollY表示浏览器当前的在Y轴上滚动的距离(未滚动时值为0),也可通过采用window.scroll(X,Y)方法,设置页面在X轴和Y轴上面的滚动值
  • 再获取图片底部到页面文档顶端的距离,采用const imageBottom = sliderimage.offsetTop + sliderimage.height; 
    • sliderimage.offsetTop表示该图片最上面的值,到页面文档顶端的距离,再加上该图片的高度,就是图片底部到页面文档顶端的距离
  • 设置两个flag,分别表示图片是否显示了一半和图片是否已经被完全滚动出去了,分别为const isHalfShown = slideAt > sliderimage.offsetTop;const isNotScrolledPast = window.scrollY < imageBottom;
  • 只有当图片已经显示了一半并且没有被图片没有被滚动出窗口是,图片才会显示出来,此处的动画处理方式如下:默认时将图片向左或向右移动30%,当图片出现在窗口中时,取消该图片的移动,显示在原位置;再加上transition: all .5s;,在图片出现的时候,就会显示出约0.5秒的过渡动画。

很明显上面这段是我复制的,前人已经做好了总结我就不再赘述了,这几天都些匆匆忙忙,成品我自己还没来得急敲,先从调整作息开始吧,今天就早些睡了。

今天了解了ST表,区间最值查询(RMQ)还是得多练习一下。

JS30-Day07

难以相信这已经是第七天了,今天是更多有关Array的函数,说实话,我没记下来,到时候再回顾吧。

前几天写的HDU6344,本来想着昨天回顾一下的,但是昨天顶不住,就容我再拖一天。

“如果我今天不喝这杯草莓果茶,那我明天应该能起来,喝了这杯那我明天估计不用上课了”,昨天头昏脑涨回到寝室这样和小鸡说(然后我还是喝了)。那大概就是感冒的症状了吧,好在我体格惊人,今天还是爬了起来。不过联系到这两天做过的一些傻事,我觉得我还是要好生休养一下。至于傻事是什么,那也不过是第一天书包落食堂,拿回书包到教学楼发现电脑放着开了一下午而充电器在寝室(这里感谢小小豪同学帮我顺路带充电器)。第二天人在教学楼偷懒不想去食堂点外卖但点到寝室,那我回寝室吃还点个鬼外卖,寝室比食堂还远呐。我真的要考虑买一瓶脉动了。春捂秋冻,大家多穿衣服保重身体。😷