很实用的一款liMarquee演示12种不同的无缝滚动效果

在线预览

下载地址

实例代码

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <title>liMarquee演示12种不同的无缝滚动效果-默认效果_sucaihuo</title>

        <link rel="stylesheet" href="css/liMarquee.css">

        <style>

            .sucaihuo { width: 800px; margin: 150px auto; font-size: 14px;}

            .sucaihuo a { margin: 0 15px; color: #333; text-decoration: none;}

            .sucaihuo a:hover { text-decoration: underline;}

        </style>

    </head>

    <body>

        <h1>默认效果</h1>

        <div class="sucaihuo">

            <a href="#">jquery霓虹灯转盘加抽奖提示弹出层</a>

            <a href="#">jQuery大风车转盘转起来</a>

            <a href="#">jQuery抽奖转盘停不下来</a>

            <a href="#">jQuery手机幸运大转盘抽奖</a>

        </div>

        <script src="js/jquery-1.8.3.min.js"></script>

        <script src="js/jquery.liMarquee.js"></script>

        <script>

            $(function() {

                $('.sucaihuo').liMarquee();

            });

        </script>

        <div class="menu">

            <a class="cur" href="index.html">1、默认效果</a>

            <a href="index2.html">2、向右滚动</a>

            <a href="index3.html">3、向上滚动</a>

            <a href="index4.html">4、向下滚动</a>

            <a href="index5.html">5、滚动速度</a>

            <a href="index6.html">6、非无缝滚动</a>

            <a href="index7.html">7、禁止拖动</a>

            <a href="index8.html">8、内容不足不滚动</a>

            <a href="index9.html">9、鼠标悬停不暂停</a>

            <a href="index10.html">10、反向</a>

            <a href="index11.html">11、自定义事件</a>

            <a href="index12.html">12、图片演示</a>

        </div>

    </body>

</html>

　　

liMarquee演示12种不同的无缝滚动效果的更多相关文章

  1. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  5. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  6. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  7. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

  8. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  9. vue实现消息的无缝滚动效果

    export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...

随机推荐

  1. 在IIS中部署ASP.NET 5应用程序遭遇的问题

    用VS2015中创建了一个非常简单的ASP.NET5程序: 在Startup.cs中只输入一行代码: using System; using Microsoft.AspNet.Builder; usi ...

  2. 用Log Parser Studio分析IIS日志

    发现一个强大的图形化IIS日志分析工具——Log Parser Studio,下面分享一个实际操作案例. 1. 安装Log Parser Studio a) 需要先安装Log Parser,下载地址: ...

  3. selenium-webdriver(python) (十六) --unittest 框架

    学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试(一)----selen ...

  4. CentOS7 PostgreSQL安装

    CentOS7 PostgreSQL安装 CentOS7 PostgreSQL安装 Install 安装 使用yum安装 yum install http://yum.postgresql.org/9 ...

  5. JS Replace() 全部替换字符的用法

    好久不写js了,今早遇到替换字符的,就浪费了点时间,由此,要记录下来.replace()方法:楼主有个字符串,需要替换掉其中的一些字母,如: var test='123helo123boy123hi' ...

  6. PHP 中的Closure

    PHP 中的Closure Closure,匿名函数,又称为Anonymous functions,是php5.3的时候引入的.匿名函数就是没有定义名字的函数.这点牢牢记住就能理解匿名函数的定义了. ...

  7. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  8. HT for Web可视化QuadTree四叉树碰撞检测

    QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...

  9. JAVA - 多线程 两种方法的比较

    一.继承Thread类 实现方法: (1).首先定义一个类去继承Thread父类,重写父类中的run()方法.在run()方法中加入具体的任务代码或处理逻辑.(2).直接创建一个ThreadDemo2 ...

  10. Android 获取可靠的手机编码

    项目中出现了将设备和用户信息进行绑定的需求.最先想到的是IMEI串码和IMSI串码.手机登陆的时候一直都没有问题.换了一个平板中之后IMEI和IMSI串码都获取不到了.后来查了一下原因,是因为平板上是 ...