很实用的一款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. IO流-文本IO\读写二进制数据

    文本IO 一.简述 OutputStreamWriter类使用选定的编码方式吧Unicode字符流转换为字节流,InputStreamReader类将包含字节的输入流转为可以产生Unicode字符的读 ...

  2. Mina、Netty、Twisted一起学（七）：发布/订阅（Publish/Subscribe）

    消息传递有很多种方式,请求/响应(Request/Reply)是最常用的.在前面的博文的例子中,很多都是采用请求/响应的方式,当服务器接收到消息后,会立即write回写一条消息到客户端.HTTP协议也 ...

  3. angular项目总结——angular + browserify + gulp + bower + less 架构分享

    一眨眼,快三个月没有写博客了.一直在为自己没有写博客而懊恼,忙过这段时间,好好总结一下. 新项目主要是自己一个人在写,先搭建了一个初步的架构,用了我并不熟悉的angular,这个过程中,慢慢也熟悉了a ...

  4. Testing - 质量保证与质量控制

    QA QC QM 概念 Quality Assurance (质量保证) Quality Control (质量控制) Quality Manage (质量管理) 定义 为达到质量要求所采取的作业技术 ...

  5. Windows Azure Cloud Service (43) 使用Azure In-Role Cache缓存(2)Dedicated Role

    <Windows Azure Platform 系列文章目录> Update 2016-01-12 https://azure.microsoft.com/zh-cn/documentat ...

  6. git命令使用记录

    github网络连接稍微有些慢,这里使用coding做测试: 首先要分两种情况,一种是直接clone远程库,一种是将本地的代码push到远程库.先说clone到本地 1.clone 通常是我们clon ...

  7. 2013年最佳的16个 Photoshop 设计教程推荐

    使用 Photoshop 的时候,没有基础操作知识的话,用起来会非常困难,所以你应该阅读一些教程才能应用它们在你的工作中.在这篇文章中你看到的 Photoshop 教程的集合是2013年发布的最优秀的 ...

  8. 用Qt写软件系列五：一个安全防护软件的制作（1）

    引言 又有许久没有更新了.Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了.本来计划要写一系列关于Qt组件美化的博文,但是写了几篇之后就没坚持下去了.技术上倒是问题不大,主要是时间 ...

  9. VS自动生成的packages.config配置文件有什么用？

    通过nuget管理安装了程序包之后,Visual Studio会自动生成一个关于这些程序包版本的配置文件,删除或者保留它对程序不会造成什么影响.

  10. .Net语言 APP开发平台——Smobiler学习日志：用Gridview控件设计较复杂的表单

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...