很实用的一款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. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  2. Archlinux 2015.07.01 和 Windows7 双系统 安装教程

    提前在windows7下给Archlinux预留一个分区,大小最好在20G以上(根据自己硬盘情况分配). 第一步,安装前的准备 从arch官网下载最新的ISO文件archlinux-2015.07.0 ...

  3. CSS3选择器的研究

    属性选择器 [title]:选择带有title属性的元素 [title='hello']:选择属性是title并且值是hello的元素 [title~='hello']:选择属性是title并且部分值 ...

  4. PHP的学习--生成器Generators

    生成器总览 (PHP 5 >= 5.5.0, PHP 7) 生成器提供了一种更容易的方法来实现简单的对象迭代,相比较定义类实现 Iterator 接口的方式,性能开销和复杂性大大降低. 生成器允 ...

  5. Android基于mAppWidget实现手绘地图（一）--简介

    http://lemberg.github.io/mappwidget/user_guide.html 最近在看一些导游类应用,发现一些景区的导览图使用的完全是自定义地图,也就是手绘地图.这种小范围使 ...

  6. Minimit Anima – 硬件加速的 CSS3 动画插件

    Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery ...

  7. Android上滑手势触发和不增加布局层级扩大点击区域

    最近项目中需要实现手势上滑或者点击滑出界面的效果,实现上是利用GestureDetector,然后在onFling中判断,但遇到一个问题:手势上滑是针对整个布局的,但如果有对单独的View设置点击监听 ...

  8. plsql导入excel时报错：ORA-01036: 非法变量名/编号

    导入oracle数据,选择工具->odbc导入->Excel 然后关于日期的插入出错,修改后如下:

  9. C#实现通用数据过滤窗体

    最近一直在做WINFORM项目,所以经常有些新的想法或尝试与大家分享,之前与大家分享了通用窗体遮罩层.通用可附加数据绑定的DataGridView.窗体渐显,今天来分享一个大家在其它软件中常见的功能: ...

  10. Design Pattern: Observer Pattern

    1. Brief 一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式.若有纰漏请大家指正. 2. Use Case 首先我们来面 ...