`
yanyanquan
  • 浏览: 448108 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

基于jQuery的上下无缝滚动应用(单行或多行)

 
阅读更多
$(function(){
    var _wrap=$('ul.line');//定义滚动区域
    var _interval=2000;//定义滚动间隙时间
    var _moving;//需要清除的动画
    _wrap.hover(function(){
        clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
    },function(){
        _moving=setInterval(function(){
            var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
            var _=_field.height();//取得每次滚动高度(多行滚动情况下,此变量不可置于开始处,否则会有间隔时长延时)
            _field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
                _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
            })
        },_interval)//滚动间隔时间取决于_interval
    }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
 

原文发布于Mr.Think的个人博客: http://mrthink.net/js-jq-autoscroll-updown/

分享到:
评论

相关推荐

    基于jQuery的上下无缝滚动应用(单行或多行).htm

    基于jQuery的上下无缝滚动应用(单行或多行).htm

    基于jQuery的上下无缝滚动应用(单行或多行

    基于jQuery的上下无缝滚动应用(单行或多行

    jQuery实现网站中公告上下无缝滚动,marquee

    jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理和动画效果,因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中,我们将深入探讨如何使用jQuery实现这个功能。 首先,我们需要在...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

    jquery文本单行多行滚动特效

    本教程将聚焦于"jquery文本单行多行滚动特效",这是一种常见且吸引用户注意力的设计手法,常用于新闻更新、公告展示或者广告轮播。 首先,我们来详细了解一下这种特效的基本概念。文本滚动特效是指将文字或文本列表...

    jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    本教程将详细讲解基于jQuery实现的"文字滚动大全",其中包括单行滚动、多行滚动以及带按钮控制的滚动效果。 首先,我们要了解jQuery中的scroll方法。通常,scroll事件用于监听滚动条的滚动动作,但在这个特定场景下...

    jquery文字上下无缝滚动

    "jQuery文字上下无缝滚动"是一种常见的网页动态效果,它可以使文字或内容在页面上持续滚动,给予用户流畅且不间断的阅读体验。这种效果常用于新闻更新、公告栏或广告展示等场景。 jQuery是一个强大的JavaScript库,...

    liMarquee – jQuery无缝滚动插件

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 Marquee 标签,但比 Marquee 更强大。它可以应用于任何 Web 元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、...

    js 单行多行滚动信息新闻

    【标题】"js 单行多行滚动信息新闻"指的是使用JavaScript实现的一种动态展示新闻信息的效果,这种效果常见于网站的新闻更新区域,通过上下滚动或左右滑动的方式,使得多条新闻信息在有限的空间内循环展示,既节省了...

    jquery单行多行滚动.rar

    总结,jQuery在实现单行或多行滚动效果上提供了极大的便利。通过理解jQuery的基本语法和DOM操作,开发者可以快速地创建出各种动态滚动效果,提升网页的用户体验。无论是在新闻网站、公告栏还是产品展示中,jQuery的...

    jquery向上无缝滚动

    在网页设计中,动态效果常常能提升用户体验,其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动,给用户带来连贯且吸引人的视觉体验。在本文中,我们将深入...

    Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip

    【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件,它具有丰富的视觉效果,能够实现图片的无缝连续循环滚动,不仅支持横向滚动,还支持纵向滚动,为网页增添动态...

    jQuery实现网站中公告上下无缝滚动,marquee(每条广告之间的高度无需一致)

    本文将详细讲解如何使用jQuery实现一个广告上下无缝滚动的效果,其中每个广告的高度可以不一致,提供更高的灵活性。 首先,我们需要了解`marquee`标签。在HTML中,`<marquee>`是一个非标准但广泛使用的元素,用于...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    6. **插件使用**:在实际项目中,开发者可能会使用已有的jQuery无缝滚动插件,比如`jQuery.scrollable`或`jQuery.Slide`等。这些插件通常提供丰富的配置选项和API,以满足不同需求。 在提供的文件名`texiao5488_...

    jquery文字多行滚动或模块滚动

    这时,jQuery的文字多行滚动或模块滚动技术就能派上用场。这种技术允许我们将内容动态地、逐行滚动显示,既节省空间又增加了视觉效果。 ### 一、jQuery基础 在深入讨论多行滚动之前,我们需要了解jQuery的基础知识...

    jquery 无缝滚动 demo

    【jQuery 无缝滚动效果详解】 在网页设计中,动态效果的运用可以提升用户体验,其中“无缝滚动”是一种常见的视觉效果,常用于展示图片或文本信息。本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果,...

    jquery上下滚动插件

    **jQuery上下滚动插件**是一种常用的前端开发工具,主要用于实现网页元素(如`<li>`列表项)的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见,可以为用户带来动态浏览体验,提升网站的互动性和...

Global site tag (gtag.js) - Google Analytics