検索
ホームページウェブフロントエンドjsチュートリアルjQuery_jqueryをベースにした無限ループスクロール実装コードのお知らせ

在線演示:http://demo.jb51.net/js/2012/callboard/
jQuery代码

复制代 代码如下:

//第二版:Newton 改造
(function (win){
var callboarTimer;
var callboard = $(' #callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer(self, 5000);
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
}) ;
}(ウィンドウ));
setTimeout(window.autoAnimation, 5000);


HTML代:



复制代
代記入如下:

  • 公告:前端组上線上一个月零八天,PR升3,BD权重1




  • CSS代記入:(必要に応じて另设)



    复制代記入
    代記入如下: #callboard { 高さ:24px;行の高さ:24px; overflow:hidden;} #callboard ul {padding:0;}
    #callboard li {padding:0;}


    完整演演代:



    复制代码
    代码如下:





    滚アニメーション公告栏







    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    JavaScript 如何实现滚动到指定元素位置的功能?JavaScript 如何实现滚动到指定元素位置的功能?Oct 22, 2023 am 08:12 AM

    JavaScript如何实现滚动到指定元素位置的功能?在网页中,当我们需要将用户的视线聚焦到某个特定的元素位置时,我们可以使用JavaScript来实现滚动到指定元素位置的功能。本文将介绍如何通过JavaScript实现这一功能,并提供相应的代码示例。首先,我们需要获取目标元素的位置信息。可以使用Element.getBoundingClient

    HTML、CSS和jQuery:制作一个自动滚动的公告栏HTML、CSS和jQuery:制作一个自动滚动的公告栏Oct 27, 2023 pm 06:31 PM

    HTML、CSS和jQuery:制作一个自动滚动的公告栏在现代网页设计中,公告栏常常被用来重要的信息传达和引起用户注意。一个自动滚动的公告栏在网页上受到了广泛的应用,它能够让公告内容以动画形式在页面中滚动显示,提高信息的展示效果和用户体验。本文将介绍如何使用HTML、CSS和jQuery来制作一个自动滚动的公告栏,并提供具体的代码示例。首先,我们需要一个HT

    监测iframe的滚动行为监测iframe的滚动行为Feb 18, 2024 pm 08:40 PM

    如何监听一个iframe的滚动,需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时,有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件,以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动,并提供具体的代码示例供参考。获取iframe元素首先,我们需要

    PHP语言开发中避免陷入无限循环的方法PHP语言开发中避免陷入无限循环的方法Jun 10, 2023 pm 02:36 PM

    在PHP语言开发中,经常会遇到无限循环的情况,它会无限制地执行某些代码,导致程序崩溃甚至服务器崩溃。本文将介绍一些避免陷入无限循环的方法,帮助开发人员更好地解决这一问题。1.避免在循环中进行无限递归调用当在循环中调用一个函数或方法时,如果函数或方法中又包含了循环语句,就会形成无限递归调用,导致程序崩溃。为避免这种情况的发生,可以在递归调用函数或方法时,添加一

    JavaScript 如何实现滚动到页面底部自动加载的无限滚动效果?JavaScript 如何实现滚动到页面底部自动加载的无限滚动效果?Oct 27, 2023 pm 06:30 PM

    JavaScript如何实现滚动到页面底部自动加载的无限滚动效果?无限滚动效果是现代网页开发中常见的功能之一,它可以在滚动到页面底部时自动加载更多内容,使得用户可以无需手动点击按钮或链接就能够获取更多的数据或资源。在本文中,我们将探讨如何使用JavaScript来实现这一功能,并提供具体的代码示例。实现滚动到页面底部自动加载的无限滚动效果,主要分为以下

    如何在Vue中实现全屏滚动效果如何在Vue中实现全屏滚动效果Nov 08, 2023 am 08:42 AM

    如何在Vue中实现全屏滚动效果在网页设计中,全屏滚动效果可以给用户带来非常独特和流畅的浏览体验。本文将介绍如何在Vue.js中实现全屏滚动效果,以及具体的代码示例。为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目。在Vue.js中,我们可以使用vue-cli来快速搭建一个项目骨架。接着我们需要引入一些第三方库来实现滚动效果,比如fullpage

    JavaScript 如何实现图片的滚动切换效果?JavaScript 如何实现图片的滚动切换效果?Oct 20, 2023 pm 05:51 PM

    JavaScript如何实现图片的滚动切换效果?在现代网页设计中,图片滚动切换效果是常用的设计要素之一,它能够为网页增添动感和生动性。而JavaScript作为一种常用的脚本语言,可以帮助我们实现这一效果。在本文中,我将介绍一种使用JavaScript实现图片滚动切换效果的方法,并提供相应的代码示例。首先,我们需要准备一个用于显示图片的HTML结构。具体代

    如何用CSS实现平滑滚动到底部按钮如何用CSS实现平滑滚动到底部按钮Nov 21, 2023 pm 05:11 PM

    如何用CSS实现平滑滚动到底部按钮在网页设计中,为了提升用户体验,我们经常需要添加一些便捷的功能,比如回到页面顶部或滚动到底部的按钮。本文将详细介绍如何使用CSS实现一个平滑滚动到底部按钮,并提供具体的代码示例。首先,我们需要在HTML中添加一个按钮元素,用于触发滚动到底部的功能。可以使用标签或<button>标签,具体选择取决于你的设计需求。在

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    Safe Exam Browser

    Safe Exam Browser

    Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 新バージョン

    SublimeText3 Linux 最新バージョン

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)