`
niunan
  • 浏览: 721371 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

jQuery控制元素间隔滚动!

阅读更多
只记录了本人需要用到的,转载自http://www.yaosansi.com/post/1309.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
	创建人:牛腩
	创建时间:2009-1-12 11:59:55
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
    <title>多行滚动演示</title>
    <style type="text/css">
        ul, li
        {
            margin: 0;
            padding: 0;
        }
        #scrollDiv
        {
            width: 300px;
            height: 100px;
            min-height: 25px;
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden;
        }
        #scrollDiv li
        {
            height: 25px;
            padding-left: 10px;
        }
    </style>

    <script type="text/javascript" src="/js/jquery.pack.js"></script>

    <script type="text/javascript">

        $.fn.extend({

            Scroll: function(opt, callback) {

                //参数初始化

                if (!opt) var opt = {};

                var _this = this.eq(0).find("ul:first");

                var lineH = _this.find("li:first").height(), //获取行高

                      line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数,默认为一屏,即父容器高度

                       speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度,数值越大,速度越慢(毫秒)

                       timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔(毫秒)

                if (line == 0) line = 1;

                var upHeight = 0 - line * lineH;

                //滚动函数

                scrollUp = function() {

                    _this.animate({

                        marginTop: upHeight

                    }, speed, function() {

                        for (i = 1; i <= line; i++) {

                            _this.find("li:first").appendTo(_this);

                        }

                        _this.css({ marginTop: 0 });

                    });

                }

                //鼠标事件绑定

                _this.hover(function() {

                    clearInterval(timerID);

                }, function() {

                    timerID = setInterval("scrollUp()", timer);

                }).mouseout();

            }

        })





        $(document).ready(function() {

            $("#scrollDiv").Scroll({ line: 4, speed: 500, timer: 3000 });

        });

    </script>

</head>
<body>
    <p>
        多行滚动演示:</p>
    <div id="scrollDiv">
        <ul>
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
            <li>这是公告标题的第四行</li>
            <li>这是公告标题的第五行</li>
            <li>这是公告标题的第六行</li>
            <li>这是公告标题的第七行</li>
            <li>这是公告标题的第八行</li>
        </ul>
    </div>
</body>
</html>


分享到:
评论

相关推荐

    Jquery实现无缝隙上下左右滚动,超简便代码

    在实际应用中,你需要根据具体需求调整代码,例如添加水平滚动、控制滚动速度、添加导航箭头等。同时,为了提高性能和用户体验,需要注意优化动画效果,避免频繁的DOM操作,以及适配不同设备和浏览器的兼容性问题。 ...

    jQuery响应式图片滚动插件按钮控制图片滚动

    1. **初始化插件**:在网页加载完成后,通过jQuery选择器找到包含图片的容器,并调用插件的初始化方法,设置相应的配置参数,如滚动速度、自动播放间隔等。 2. **响应式布局**:插件会检测设备的屏幕尺寸,并根据预...

    jQuery图片左右滚动效果代码.zip

    在本文中,我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果,这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头,可以手动切换,同时具备自动轮播的功能,大大增强了用户体验。 首先,我们需要...

    jQuery 图片向左滚动代码

    这个简单的jQuery图片向左滚动代码可以作为网页中动态展示图片的基础,你可以根据实际需求进行调整,例如添加过渡效果、控制按钮、自动暂停与继续等增强用户体验的功能。了解并掌握这些基础知识,对于开发具有吸引力...

    JQUery实现上下循环滚动效果

    根据实际需求,你可能需要调整动画速度、滚动间隔时间或容器尺寸。此外,为了提高用户体验,你还可以添加暂停和恢复滚动的交互功能,如点击按钮控制滚动。 以上就是使用jQuery实现文字上下循环滚动效果的基本步骤。...

    jquery实现图片左右间隔滚动特效(可自动播放)

    通过jQuery对DOM元素进行操作,实现图片的左右间隔滚动。 例如,`var wraper=$(wraper);`获取外部包裹器元素,`var img=$(img).find('ul');`定位到图片的ul容器。之后,通过设置定时器和判断滚动方向,使用`....

    滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片

    本文将深入探讨如何利用jQuery实现滚动新闻和滚动图片,并提供相关的知识点。 一、jQuery基础 1. jQuery选择器:jQuery提供了简洁且强大的CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),...

    jQuery实现新闻列表滚动特效代码.zip

    可能需要使用定位(position)来控制元素的显示和隐藏。 3. **jQuery加载**:在文档加载完成后,通过`$(document).ready()`函数来初始化脚本,确保所有DOM元素都已加载。 4. **选择器与变量**:使用jQuery选择器...

    jQuery Scrollify 一款鼠标滚轮控制页面滚动效

    jQuery Scrollify是一款强大的JavaScript库,专门用于实现鼠标滚轮控制的页面滚动效果。这款插件使得网页的滚动体验更加平滑、优雅,特别是在创建单页应用(Single Page Applications)或者设计全屏滚动网站时非常...

    jQuery无缝滚动原理分析

    在无缝滚动中,我们利用jQuery提供的便利方法来控制元素的显示和隐藏。 2. **CSS布局**:为了实现无缝滚动,我们需要对页面的CSS布局进行精心设计。通常,我们会创建一个容器元素,用于容纳所有要滚动的内容,然后...

    jquery 无缝滚动 demo

    4. jQuery代码:编写jQuery脚本来控制滚动效果。 ```javascript $(document).ready(function() { var scrollSpeed = 3000; // 滚动间隔时间(毫秒) var pauseScroll = false; // 是否暂停滚动的标志 var ...

    jQuery两行列表滚动效果.zip

    在这个例子中,图片的左右切换就是通过改变图片元素的位置来实现的,通过设置CSS的`left`或`right`属性,配合时间间隔,让图片在视觉上产生平滑的移动效果。 其次,事件处理是通过`.click()`函数来绑定点击事件的。...

    【经典】滚动新闻_Jquery

    对于多行滚动,可以使用相似的逻辑,但需要处理行间的交错和同步问题,可能还需要使用定时器(`setInterval`)来控制滚动间隔。 在实际应用中,还可以考虑添加一些额外功能,如暂停/恢复滚动、鼠标悬停停止滚动等。...

    jQuery实现带控制按钮的图片滚动特效(可多个)

    "jQuery实现带控制按钮的图片滚动特效(可多个)"是一个常见的交互设计实践,它利用jQuery库的强大功能,为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、...

    单行jQuery循环滚动新闻代码.rar

    5. CSS布局:为了实现单行滚动,CSS布局(如`display: flex`或`white-space: nowrap`)可能被用来保持所有新闻标题在同一行内,同时利用CSS控制元素的初始位置和滚动方向。 6. JavaScript计时器:可能使用`...

    jQuery文字逐行向上滚动代码.zip

    总之,jQuery文字逐行向上滚动代码利用了jQuery库的强大功能,结合DOM操作、动画效果和定时器等技术,创建了一个动态、吸引人的网页元素。无论你是初学者还是经验丰富的开发者,理解和掌握这一技术都能提升你的前端...

    jquery常用定时滚动效果,支持所有浏览器,可控制滚动方向、速度、大小,点击滚动

    **jQuery滚动效果详解** 在网页开发中,动态滚动效果是一种常见的增强用户体验的手段,它可以吸引用户的注意力并使得信息展示更加生动。本教程将详细介绍如何利用jQuery实现常见的定时滚动效果,这些效果包括但不...

    jquery叠加效果自动滚动切换特效.zip

    在jQuery中,实现叠加效果通常会用到CSS3的`position`属性(如`relative`、`absolute`或`fixed`)、`z-index`来控制元素的堆叠顺序,以及`opacity`和`transform`属性来处理透明度和位移,以达到元素间的遮盖和展现。...

    jQuery限时抢购图文滚动代码.zip

    在这个代码中,jQuery用于驱动页面元素的动态滚动,通过选择器定位到相关元素,然后执行相应的动画效果,使抢购商品信息在页面上流畅地滚动展示,增强用户的视觉体验。 CSS特效在此代码中主要负责美化和优化滚动...

    jquery图片文字一起滚动切换.zip

    开发者可以利用其提供的API,如`.animate()`函数来创建平滑的过渡效果,`.slideUp()`和`.slideDown()`来控制元素的隐藏和显示,以及`.next()`和`.prev()`来实现前后切换。 【实现原理】:实现图片文字一起滚动切换...

Global site tag (gtag.js) - Google Analytics