head first 一起实现js无缝上下滚动效果
2015-08-28 21:59
531 查看
在开始手动敲代码之前我们先谈谈js上下滚动效果的基本原理,上个图先:
恩,图好像画的有点丑。。。
基本原理大致可分为以下几点:
1.(满足条件)需要滚动的区域(绿色边框)的高度必须大于可视区域(白色区域)的高度,不然就没有滚动的意义了.;
2.(如何进行滚动)js中如何让一个div移动起来,一般都是改变它的属性值,比如:top,left,margin-top,margin-left,....等等,那么这里我们需要通过改变滚动区域的top值,也就是让 top-- 不断然他向上移动;
3.但是我们不可能让他一直向上移动的,所以我们的想办法让它"回头",也就是通过DOM操作让向上移出的部分重新回到末尾,通过appendChild()来实现;
分析完之后我们就开始写代码吧,首先是布局:
html:
css:
大致的页面效果是这样的:
凑合着看吧,,,接下来我们开始用js让它向上滚动:
就是这么的简单,效果图就不上了,另附demo,,其实这段js代码还是有点小bug的只适用于类似的DOM结构,如果滚动区域的DOM复杂一点,当然可以通过原生js解决,不过还是用jQuery方便一些,见下回慢慢道来。。
相关文章推荐
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- js实现简单易用的上下无缝滚动效果
- JS实现的N多简单无缝滚动代码(包含图文效果)
- JS实现无缝循环marquee滚动效果
- js实现无缝滚动效果
- JS实现图片无缝滚动效果
- js实现文字列表无缝滚动效果
- js实现的单行文本不间断无缝滚动效果(荧光屏文字 滚动效果)
- 文字无缝滚动jQuery上下滚动js效果代码
- marquee+js实现某个区域的“无缝滚动效果”
- JS无缝滚动效果实现方法分析
- JS简单实现无缝滚动效果实例
- js实现文字定时上下滚动效果
- javascript实现的上下无缝滚动效果
- JQuery插件Marquee.js实现无缝滚动效果
- JS平滑无缝滚动效果的实现代码
- JQuery插件Marquee.js实现无缝滚动效果
- 简单实现js无缝滚动效果
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- JS实现文本内容上下滚动效果