`
ipython
  • 浏览: 293871 次
  • 性别: Icon_minigender_1
  • 来自: 佛山
社区版块
存档分类
最新评论

javascript 向下滚动

    博客分类：
  • web
web 
阅读更多

Google Reader 阅读器中，当向下拉动到尾部时，它会自动加载下面的部分。

下面的代码主要实现的是向下滚动。

 

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>无限滚动</title>
    <style type="text/css" media="screen">
        ul {width:200px; height:100px; overflow-y:auto;}
    </style>
</head>
<body>
    <ul id="x">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <script type="text/javascript" charset="utf-8">
        var i = 0;
        var $ = function (name) {return document.getElementById(name) };
        var a = $('x');
        a.onscroll = function () {
            if ( this.scrollHeight - this.clientHeight - this.scrollTop < 10) {
                console.log (i);
                var li = document.createElement('li');
                li.innerHTML = "hello " + i++;
                this.appendChild (li);
                if (i >= 40) {
                    this.onscroll = null
                       return;
                }

            }
        }
    </script>
</body>
</html>
 
分享到：
| google code svn 上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ScrollDown:使用 JavaScript 向下滚动页面

    向下滚动使用 JavaScript 向下滚动页面。 ＃＃要求jquery.min.js入门克隆此 repo 并通过&lt;head&gt; [removed]将所有.js文件包含在您的 HTML 文件中 [removed][removed][removed][removed][removed][removed]...

    JavaScript 无缝上下滚动加定高停顿效果

    根据提供的文件信息，我们可以深入探讨该JavaScript无缝上下滚动加定高停顿效果的实现机制及其应用场景。接下来将详细解析此代码的关键部分，并提取出相关的知识点。 ### 一、概述 本段代码展示了一个利用...

    向上滚动，可控制，点击向上滚动，点击向下滚动

    例如，当用户点击一个“向上滚动”或“向下滚动”的按钮时，通过JavaScript事件监听器，可以触发页面的滚动动作。这可以通过修改window对象的scrollTo方法来实现，该方法接受两个参数，一个是水平方向上的偏移量，另...

    JS控制滚动条自动向下滚动

    在JavaScript（JS）编程中，控制滚动条自动向下滚动是一种常见的需求，特别是在实时聊天、论坛或者日志更新等场景中，我们希望用户能够始终保持看到最新的内容。本篇将详细讲解如何利用JavaScript实现这一功能，以及...

    JS不间断向下滚动.rar

    "JS不间断向下滚动"通常是指利用JavaScript实现页面内容持续自动滚动的效果，这种效果常见于新闻滚动、公告滚动等应用场景，能够使用户在不手动操作的情况下看到不断更新的信息。 在实现JS不间断向下滚动的过程中，...

    仿新浪微薄效果向下滚动效果javascript

    在IT行业中，网页动态效果是用户体验的重要组成部分，而“仿新浪微薄效果向下滚动效果javascript”就是一个典型的应用实例。这个效果使得用户在浏览类似微博的信息流时，无需手动翻页，只需持续滚动页面，新的内容就...

    jQuery网页向下滚动数字增加动画特效

    总的来说，"jQuery网页向下滚动数字增加动画特效"是一个巧妙地结合了jQuery滚动事件、动画函数和HTML数据属性的示例，它展示了如何通过JavaScript为网页添加生动的交互体验。通过学习并理解这一特效，开发者可以...

    jquery特效DIV层跟随页面向下滚动

    标题中的"jquery特效DIV层跟随页面向下滚动"指的是在网页设计中使用jQuery库实现的一种交互效果。当用户滚动页面时，一个特定的div元素（通常包含重要的信息或导航）会固定在屏幕的一侧，保持可见，即使用户滚动页面...

    新浪微博文字向下滚动效果

    总结：实现“新浪微博文字向下滚动效果”既可以通过Java的Swing或JavaFX库在桌面应用中实现，也可以在网页上使用HTML、CSS和JavaScript。在网页设计中，CSS的`marquee`属性是一个简单快捷的实现方式，但现代网页更多...

    javascript特效无缝滚动marquee

    这里主要讨论如何通过JavaScript实现向左、向右、向上、向下四个方向的滚动效果。 1. **向左/向右无缝滚动**： - 首先，我们需要创建一个包含滚动内容的容器，并设置合适的宽度，以便内容可以完全显示。 - 使用...

    jquery不断向下滚动幻灯片

    本教程将详细讲解如何使用jQuery实现一个默认在右侧不断向下滚动的幻灯片，同时支持用户通过鼠标悬浮和点击箭头来控制滚动速度，以及同步更新左侧的大图。 ### 1. jQuery基础知识 jQuery 是一个广泛使用的...

    js页面向下滚动浮动层

    在网页设计中，"js页面向下滚动浮动层"是一种常见的用户体验优化技术，它使得特定的元素（如导航菜单）在用户滚动页面时始终保持在屏幕的可见区域。这种效果可以增加用户的交互性和易用性，特别是在内容丰富的长页面...

    JavaScript图片连续滚动效果

    在本主题"JavaScript图片连续滚动效果"中，我们将探讨如何使用JavaScript来创建四种不同的图片滚动效果：向下滚动、向上滚动、向左滚动和向右滚动。这些效果可以提升网站的视觉吸引力，增加用户体验，常用于新闻轮播...

    模拟新浪围脖的间歇性向下滚动显示信息窗口

    标题中的“模拟新浪围脖的间歇性向下滚动显示信息窗口”是指在网页或应用程序中实现类似新浪微博的信息流效果，即信息不断从顶部滚动进入视区，而旧的信息则自动向下移动，以此来呈现动态更新的内容。这种效果常用于...

    jQuery模仿微博常用的文字向下滚动效果

    本教程将深入探讨如何使用jQuery来模仿微博中常见的文字向下滚动效果，这种效果通常用于实时更新信息，如新闻动态、推文或通知等。 首先，我们需要理解微博文字滚动的核心原理。它通常是通过动态改变文本的位置或...

    jQuery向下滚动表格头部固定代码

    在网页设计中，当用户向下滚动页面时，保持表格头部（表头）固定在屏幕顶部是一种常见的需求，以便用户始终能清楚地看到列标题。jQuery是一个轻量级、功能丰富的JavaScript库，它提供了便利的方式来实现这个功能。在...

    jQuery向下滚动浮动显示导航菜单代码

    通过引入jQuery库，我们可以编写更简洁、更高效的JavaScript代码来实现向下滚动浮动显示的导航菜单。 1. 引入jQuery库：在HTML文件中，通过`&lt;script&gt;`标签从CDN（内容分发网络）引入jQuery，例如： ```html ...

    jQuery实现页面向下滚动后显示隐藏导航条

    随着页面内容的增多，为了保持页面的简洁性和优化用户体验，设计师有时会将导航条设置为隐藏，仅当用户向下滚动页面时才显示出来。这种效果可以通过JavaScript库jQuery轻松实现。本文将详细介绍如何使用jQuery来实现...

    jQuery带按钮向上滚动向下滚动代码.zip

    jQuery带按钮向上滚动向下滚动代码是基于流行的JavaScript库jQuery实现的一种网页滚动效果。这个功能通常用于网站页面，尤其是内容较多的页面，以便用户能够轻松地浏览页面内容而无需手动滚动鼠标或触摸屏幕。这种...

    javascript图片无限滚动

    当用户滚动到页面底部时，向服务器发送请求获取下一批图片的数据。这可以通过`XMLHttpRequest`或`fetch` API实现。 4. **DOM操作**：收到新图片数据后，需要将其插入到页面中。这涉及到DOM操作，可以使用`document....

Magicbox
Global site tag (gtag.js) - Google Analytics