<!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. Mybatis 在 insert 之后想获取自增的主键 id

    记录一次傻逼的问题, 自己把自己蠢哭:Mybatis 在 insert 之后想获取自增的主键 id,但却总是返回1 错误说明: 返回的1是影响的行数,并不是自增的主键id: 想要获取自增主键id,需要 ...

  2. Django ORM 操作 必知必会13条 单表查询

    ORM 操作 必知必会13条 import os # if __name__ == '__main__': # 当前文件下执行 os.environ.setdefault('DJANGO_SETTIN ...

  3. SQL8数据库定期自动备份

    我们知道,利用SQL Server 2008数据库可以实现数据库的定期自动备份.方法是用SQL SERVER 2008自带的维护计划创建一个计划对数据库进行备份, 下面我们将SQL SERVER 20 ...

  4. scala 操作hdfs

    获取hdfs文件下所有文件getAllFiles 遍历 spark读取 1 package com.spark.demo import java.io.IOException import java. ...

  5. flask框架----flask-session组件

    简介 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session保存到多个地方,如: redis:保存数 ...

  6. mysql03

    查询的列不在同一表中必须使用连接内连接,外链接 -- 输出学生姓名以及对应的年级名称 内连接 select studentName,gradeName from student inner join ...

  7. AspectJ框架基于注解的AOP实现

    AspectJ的AOP实现:有两种方式,一种是基于XML配置文件,一种是基于注解的,由于注解更为常用,这里 这里只针对注解来学习. ---------------------------------- ...

  8. 关于nginx配置虚拟主机

    前提:我的虚拟主机的外网ip为111.231.226.228(是云服务器哈)     本地测试环境为windows7(修改本地的hosts文件) 步骤:(安装nginx可以看看我文章“linux ng ...

  9. 在nginx的http模块下面，一个server就可以看做一个站点,配置形式大概是这样的：

    http { index index.php index.htm index.html; server { server_name www.site1.com; location / { # [... ...

  10. Golang面向对象_继承

    package main import "fmt" type Person struct { name string //名字 sex byte //性别 age int //年龄 ...