滚屏那些事

现在很多网页中都用到了滚屏的效果,这样的插件也不在少数,但我们不能只会用插件,还要了解一下他的原理。

下面我就来说说 我自己对滚屏的理解。

页面滚动的前提是有滚动条,那什么时候才会有滚动条那,就是页面里的高度超出你窗口的高度时就会出现纵向滚动条,横向的也是同样的道理。

在javascript里有一个scrollTop的属性 指的是滚动条的垂直坐标,也就是现在滚动条的纵向位置,我们可以随便打开一个有滚动条的网站 -->f12 -->console

输入 document.body.scrollTop-->回车

是不是就看到显示 0 因为你还没滚动 他的坐标是0,你滚动一下后 在来执行一下 他的坐标就发生改变了

var scrollToPage = function(page){
//右侧指示
$pageNaveLi.eq(page).trigger(‘click‘, {trigger:‘scroll‘});
//顶部指示
var topPage = page < 7 ? 1 : page;
$(‘#d_topnav2_ul>li[data-gotopage="‘+topPage+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘);

window.location.hash = ‘page-‘ + (page+1);
var scrollLock = false;
$(‘html,body‘).stop().animate({
scrollTop : $pages.eq(activePage).offset().top
},2000,‘easeOutBack‘,function(){
if(scrollLock)return;
scrollLock = true;
//if(activePage == 3){
//console.log("要执行第" + activePage + "屏幕了");
//}
pageModes[activePage + 1].play();
pageModes[activePage + 1].startCss3();

if(prevActivePage != activePage ){
pageModes[prevActivePage + 1].stop();
pageModes[prevActivePage + 1].stopCss3();
}
});

上面的这段代码是封装了一个滚屏的方法,因为我们都知道滚屏一般情况下 都会有对应的选项卡来跳到不同的屏,

所以我们给了这个方法一个参数,就是要跳到哪一屏。

然后取到每一屏的高度*索引  就是你要设置的scrollTop的值,如果我们直接给他一个值,他就会刷一下过去,这样对用户体验不友好,你可以给他加个动画,让他有个过度过程。

OK,既然我们有滚屏了 ,你可以overflow: hidden;将默认的浏览器滚动条隐藏掉。

当然滚屏不光只有这一种办法,比如还可以改变TOP的值 前提是你得是绝对定位或相对定位,这就要却绝于你的布局了。当然除此之外还会有别的方法,只是我不知道而已。

以上纯属个人见解,如有错漏 。还请指正!

时间: 2024-11-04 03:40:46

滚屏那些事的相关文章

编程练习--模拟安装程序时的信息滚屏效果

第一次安装Discuz时,有一个数据库的安装过程,看到会自动滚屏显示的信息,感觉非常好奇,由于当时主要从事后端程序的开发,对前端这些神奇的效果,也只能是欣赏一下子. 现在突然想到要自己来实现这个效果,作为今天的编程练习,实属对当时那个效果的怀念. 先上一个朴素无奇的静态效果图: 点这里查看动态的在线演示效果:http://sandbox.runjs.cn/show/jvl11v0d 核心代码: function install(){ if(message.length>0){ var text

Android左右滑动滚屏的实现

现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么...嘿嘿),由于前段时间项目的需要,所以也对其研究了一下,总的来说滑屏实现有三种方式:(至于其他的实现方式目前后还没碰到...) 1.ViewPager 2.ViewFlipper 3.ViewFlow   一.ViewPager 官方文档介绍:http://developer.android.com/reference/android/support/v4/

文字滚屏控件(SliderPanel)

http://www.delphifans.com/infoview/Article_629.html 日期:2005年9月6日 作者:arhaha {==================== 满天星共享软件注册服务中心 申明 ======================本软件由满天星共享软件注册服务中心(http://www.star-reg.com/)赞助冠名发布,目的在于促进技术交流,促进中国软件产业的发展与进步. 本软件的版权以及其他所有权益归原作者所有,满天星共享软件注册服务中心不承担

网页自动滚屏播放

好长时间不做网页了,今天老板说要做一个展示的demo,让这个demo 自动的播放 用js做了一个滚屏播放的代码 <script type="text/javascript"> var done = true; var speed = 4 //设置速度 var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1 function initialize() { startit() } function scrollwindow(

配合网页滚屏播放,做解说词

---恢复内容开始--- 继上篇网页滚屏播放之后,再给播放的网页添加一个解说词,至于如何做滚屏播放,请参看上一篇:http://www.cnblogs.com/Steven-Love-Arlene/p/4822126.html 解说词的制作,开始准备找真人录的,但是由于时间紧,就直接写了一个解说稿子,然后用了一个文本转语音的软件合成了一段解说词,具体的软件网上很多,大同小异,不做推荐.但是如果有兴趣的可以用科大讯飞的SDK自己做一个. 配上添加音频的代码: <!--播放音频--> <di

FineReport中如何实现自动滚屏效果

对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在FineReport中的具体制作方法. 添加加载结束事件 点击菜单模板>模板web属性>分页预览设置,选择"为该模板单独设置",添加一个"加载结束"后事件,如下图所示: JS代码如下: //从页面加载结束后延迟2000MS执行事件(滚动) setTimeout

js中如何实现滚屏事件

在前端工作中使用JS来实现整屏的上下滚动,下面是JS代码: /**** * 函数:判断滚轮滚动方向 * 参数:event *返回: 方向 上 还是下 ***/ var i =0; var $screen = $("#jq_banner"); var len = $("#jq_banner ul li").length-1; var _h; _h = $screen.height(); var init =function init(){ _h = $screen.h

delphi 滚屏

滚屏 uses MSHTML;var    a: IHTMLDocument2;    x,y:Integer;begin    y:=y+20;   //加减进行上下滚动    a :=WebBrowser1.Document as IHTMLDocument2;    a.Get_ParentWindow.Scroll(x,y);end; 来自为知笔记(Wiz) delphi 滚屏

滚屏加载--无刷新动态加载数据技术的应用

index.html <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm