<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title></title>

    <style>

        * { padding: 0; margin: 0; }

        div { height: 400px; border: 2px solid #000; width: 600px; margin: 0 auto; overflow: hidden; position: relative; }

        ul { position: absolute; top: 0; left: 0; }

        li { height: 100px; border: 1px solid red; width: 600px; list-style: none; }

    </style>

</head>

<body>

    <div>

        <ul>

            <li>111</li>

            <li>222</li>

            <li>333</li>

            <li>444</li>

            <li>555</li>

            <li>666</li>

        </ul>

    </div>

    <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

    <script>

        (function ($) {

            var targetTop = 100;

            var targetTimer = 2000;

            function scroll() {

                var currentTop = Math.abs($("ul").position().top);

                var duration = (targetTop - currentTop) * targetTimer / targetTop;

                var li = $("ul").find("li:first");

                $("ul").animate({ "top": -targetTop }, duration, "linear", function () {

                    console.log("x")

                    $("ul").append(li).css("top", 0);

                    scroll();

                });

            }

            scroll();

            $("ul").mouseover(function () {

                $(this).stop();

            }).mouseout(function () {

                scroll();

            });

        })(jQuery)

    </script>

</body>

</html>

　　

jQuery实现Marquee的更多相关文章

  1. HTML Jquery；marquee标签

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  2. 文字滚动效果，jquery和marquee标签

    链接:https://pan.baidu.com/s/1pMwHYH1 密码:r9ys marquee标签是微软创建的,后来大部分浏览器都适用后,微软在IE8把这个标签去掉了.为符合W3C规范,还是使 ...

  3. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  4. jQuery插件开发之boxScroll与marquee

    BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了. 图片轮播GitHub:https:/ ...

  5. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  6. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  7. jquery实现轮播插件

    这几天用jquery写了两个轮播的插件,功能很简单.第一次尝试写插件,有很多不足的地方,代码如下: 注:图片链接请替换掉,配置信息必须加上图片width和height. <!DOCTYPE ht ...

  8. 滚动效果marquee的用户体验不好，很少被用到，一般用jquery替代

    滚动效果marquee的用户体验不好,很少被用到,一般用jquery替代

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. Java函数接口实现函数组合及装饰器模式

    摘要: 通过求解 (sinx)^2 + (cosx)^2 = 1 的若干写法,逐步展示了如何从过程式的写法转变到函数式的写法,并说明了编写"[接受函数参数]并返回[能够接受函数参数的函数]的 ...

  2. python pymssql 连接数据库

    1)写在前面 远程连接数据库的时候,端口前面都是用的逗号, 因为惯性思维, 就傻傻的把    ip+,+端口 赋值给server了,然后一直报错, pymssql.InterfaceError: Co ...

  3. 决策树算法——ID3

    决策树算法是一种有监督的分类学习算法.利用经验数据建立最优分类树,再用分类树预测未知数据. 例子:利用学生上课与作业状态预测考试成绩. 上述例子包含两个可以观测的属性:上课是否认真,作业是否认真,并以 ...

  4. Linux基础命令---设置程序优先级nice

    nice nice指令可以设置程序运行的优先级,优先级会影响到程序的调度时间.nice的范围是-20~19,其中-20级别最高,19级别最低. 此命令的适用范围:RedHat.RHEL.Ubuntu. ...

  5. Maven依赖中的scope详解，在eclipse里面用maven install可以编程成功，到服务器上用命令执行报VM crash错误

    Maven依赖中的scope详解 项目中用了<scope>test</scope>在eclipse里面用maven install可以编译成功,到服务器上用命令执行报VM cr ...

  6. 那些年 Qzone

    那些年转在Qzone里的: 不喊痛,不一定没感觉.不要求,不一定没期待.不落泪,不一定没伤痕.不说话,不一定没心声.沉默,不代表自己没话说.离开,不代表自己很潇洒.快乐,不代表自己没伤心.幸福,不代表 ...

  7. bzoj4358 premu

    题目链接 莫队算法 没有用线段树,而是看了showson的并查集%%% #include<algorithm> #include<iostream> #include<c ...

  8. 使用Selenium和openCV对HTML5 canvas游戏进行自动化功能测试（一）

    上一篇讲了HTML5 canvas游戏的基本工作原理,接下来讲如何进行自动化功能测试. Selenium是一个跨平台的跨浏览器的对网页进行自动化测试的工具.从Selenium 2.0开始Seleniu ...

  9. Linux三剑客grep、sed、awk

    grep grep file grep -i file grep -v file

  10. Markdown语法学习（Github/git.oschina.net上README.md书写规范）（转）

    晚上在更新git.oschina.net项目时,突然想知道README.md后缀的来源,于是搜了下,发现README.md使用了一种小标记语言Markdown的语法,于是简单的看了一个,特转载如下,为 ...