`
HogwartsRow
  • 浏览: 59330 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

在页面上实现信息滚动效果

阅读更多

在参与的项目中使用的一个页面动态滚动效果,在此分享给大家:

 

function goMarqueel(obj){
    var _wrap=$('div #'+obj);//定义滚动区域
    var _interval=5000;//定义滚动间隙时间
    var _moving;//需要清除的动画
    _wrap.hover(
        function(){
            clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
        },
        function(){
            _moving=setInterval(function(){
                var _field=_wrap.find('.b_size:first');//此变量不可放置于函数起始处,.buzzes:first取值是变化的
                var _h=_field.height();//取得每次滚动高度
                _field.animate({marginTop:-_h+'px'},1000,function(){//通过取负margin值,隐藏第一行
                    _field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
                })
            },_interval)//滚动间隔时间取决于_interval
        }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
}

 

分享到:
评论

相关推荐

    jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码.zip

    在实现全屏页面滚动效果时,jQuery的主要作用在于监听用户的滚动事件,然后平滑地改变页面元素的位置,营造出流畅的滚动体验。 首先,我们需要在HTML结构中设置好全屏的各个页面段。每个页面段可以是一个独立的div...

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    在实现全屏页面滚动效果时,jQuery提供了强大的功能和易用的API,使得开发者可以快速构建出这样的功能。 全屏页面滚动效果的核心在于监听用户的滚动事件,并对页面内容进行相应的定位和动画处理。在jQuery中,可以...

    Android 实现小红书登陆页面背景图无限滚动效果

    在Android开发中,实现类似小红书登录页面的背景图无限滚动效果,是一种常见的视觉增强技术,能够给用户带来更加沉浸式的体验。这种效果通常通过组合使用ViewPager、RecyclerView或者自定义ViewGroup来实现。以下是...

    仿苹果官网页面垂直滚动效果OnePageScroll

    10. **JavaScript 和 CSS 文件**:`js`和`css`目录分别包含实现滚动效果的JavaScript代码和样式表,它们是实现这种效果的核心。 综上所述,"仿苹果官网页面垂直滚动效果OnePageScroll"是一个结合了JavaScript、CSS3...

    EXT页面波浪滚动效果

    EXT页面波浪滚动效果是一种视觉上引人入胜的网页动态设计,主要通过JavaScript实现,为网站增添生动的动画感,提升用户体验。这种效果通常应用于网站背景或特定内容区域,创造出水流、波浪或者液体流动的视觉感受。...

    Bootstrap页面滚动效果 后台页面模板

    在“Bootstrap页面滚动效果 后台页面模板”这个主题中,我们主要探讨的是如何利用Bootstrap框架来实现一个具有动态滚动效果的后台页面模板。 首先,模板的核心特性在于它的滚动效果。在页面滚动时,导航栏会自动...

    android实现ios滚动效果

    在Android平台上实现iOS风格的滚动效果,主要是指模拟iOS中的流畅滚动体验,包括滚动的弹性、惯性和回弹效果。这种效果在Android中通常通过自定义ViewGroup或者使用第三方库来实现。以下将详细介绍如何在Android中...

    页面视觉差滚动效果

    6. **响应式设计**:确保视觉差滚动效果在不同屏幕尺寸和设备上都能正常工作,可能需要使用媒体查询(`media queries`)来适配各种视口大小。 总的来说,页面视觉差滚动效果是HTML5和CSS3结合的典范,它展示了现代Web...

    HTML5手机端实现 上下滚动

    例如,`<meta name="viewport">`标签用于控制页面在不同设备上的视口大小和缩放,这对于实现良好的滚动效果至关重要。设置适当的视口宽度和初始缩放比例可以使内容适应不同尺寸的屏幕,从而实现流畅的上下滚动。 二...

    jQuery实现的向下推送图文信息滚动效果

    WEB页面需要展示网站最新信息,如微博动态、余票信息、路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果。本文我们将结合实例为大家讲解如何使用jQuery来实现图文信息滚动效果。

    JS实现部分HTML固定页面顶部随屏滚动效果

    本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果。分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么...

    DIV+CSS+JAVASCRIPT实现图片滚动效果

    在网页设计中,"DIV+CSS+JAVASCRIPT实现图片滚动效果"是一个常见的动态展示技术,用于在有限的空间内展示多张图片。这个技术结合了HTML布局的强大工具——Div,CSS样式表来控制视觉样式,以及JavaScript进行交互功能...

    jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码

    5. **实现滚动效果**:基于滚动位置,可以对元素进行平滑过渡、淡入淡出、缩放等动画效果。例如,当一个段落即将进入视口时,可以逐渐显示其内容: ```javascript var section = $('.section'); section.each...

    JS实现页面图片轮播滚动效果

    综上所述,通过JavaScript和相关辅助库,我们可以轻松地实现页面上的图片轮播滚动效果。结合给定的压缩包文件,我们可以推测使用jQuery来实现这一效果,并可能利用`effect_commonv1.1.js`提供额外的动画效果。在实际...

    html5页面滚动图片视差滚动效果

    在实际项目中,我们还需要考虑响应式设计,确保视差滚动效果在不同设备和屏幕尺寸上都能良好呈现。这可能需要使用媒体查询(media queries)来调整不同屏幕下的元素布局和滚动速度。 总结起来,HTML5页面滚动图片...

    jQuery全屏页面滚动导航切换效果

    综上所述,"jQuery全屏页面滚动导航切换效果"是通过巧妙地结合HTML、CSS和jQuery实现的一种高级网页交互技术。它能够提高网站的美观度和用户友好性,尤其适用于展示型网站或创意作品集。通过理解和实践这些技术,...

    很炫的图片无缝上下滚动效果.rar

    JavaScript代码通常会嵌入在这个文件中,或者通过外部引用的.js文件来实现图片滚动效果。 3. **images** - 这是一个文件夹,存储了用于展示滚动效果的图片资源。这些图片会被JavaScript代码处理,按照预定的顺序和...

    jQuery实现页面滚动切换

    接下来,我们用jQuery编写JavaScript代码来实现滚动切换: 1. **监听滚动事件**:使用`$(window).scroll(function() {...})`监听滚动事件。 2. **获取滚动位置**:通过`$(window).scrollTop()`获取滚动条的位置。 ...

    javascript实现全屏页面滚动效果.docx

    在实现滚动效果时,关键在于计时器的使用。`rollCount` 计时器负责控制页面滚动的速度和时机。当用户点击导航菜单中的某个页面项时,会检查当前选中的页面是否已经有计时器在运行,如果存在,则清除该计时器,避免多...

    微信端滑动滚动效果H5营销页面

    - 在微信端,H5页面通常需要根据手机屏幕的视口高度来计算内容的布局,以实现滚动效果。 - 使用JavaScript监听`scroll`事件,可以获取用户滚动时的位置,以此调整页面元素的显示状态。 3. **全屏滚动(Full Page ...

Global site tag (gtag.js) - Google Analytics