<!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. 字符编码几个缩写 ACR CCS CEF CES TES

    摘自https://zhuanlan.zhihu.com/p/27012967 5. 在Unicode Technical Report (UTR统一码技术报告) #17<UNICODE CHA ...

  2. Django后端项目----restful framework 认证源码流程

    一.请求到来之后,都要先执行dispatch方法,dispatch方法方法根据请求方式的不同触发get/post/put/delete等方法 注意,APIView中的dispatch方法有很多的功能 ...

  3. SpringMVC实现 MultipartFile 文件上传

    1. Maven 工程引入所需要的依赖包 2. 页面需要开放多媒体标签 3. 配置文件上传试图解析器 4. 接收图片信息,通过 IO 流写入磁盘(调用解析其中的方法即可) 如下: 1.1 引入所依赖的 ...

  4. QMenu 设置菜单图标 & 生成菜单树

    效果图 源码 .h 文件 protected slots: void onMenuTriggered(QAction*); .cpp 文件 // 菜单 QMenu *pMenu = new QMenu ...

  5. sqlalchemy 多对多关系

    # -*- coding: utf-8 -*- from sqlalchemy import Column, String, create_engine,ForeignKey,Text,Integer ...

  6. bzoj4720 / P1850 换教室（Floyd+期望dp）

    P1850 换教室 先用Floyd把最短路处理一遍,接下来就是重头戏了 用 f [ i ][ j ][ 0/1 ] 表示在第 i 个时间段,发出了 j 次申请(注意不一定成功),并且在这个时间段是否( ...

  7. 爬虫的基本操作 requests / BeautifulSoup 的使用

    爬虫的基本操作 爬虫基础知识 什么是爬虫? 在最开始,还没有诞生Google和百度等一系列搜索引擎的公司的时候,人们进入一些公司的网站只能通过在浏览器地址栏输入网址的方式访问,如同在很早之前前手机不流 ...

  8. 利用shell脚本通过ssh绕过输入密码直接登录主机

    shell #!/usr/bin/expect spawn ssh root@192.168.137.141 expect "*password:" send "lizh ...

  9. PHP命名空间(Namespace)的使用简介

    原文链接:https://www.cnblogs.com/zhouguowei/p/5200878.html 可以导入命名空间也可以导入命名空间的类 <?php namespace Blog\A ...

  10. Codeforces 841D Leha and another game about graph - 差分

    Leha plays a computer game, where is on each level is given a connected graph with n vertices and m  ...