很实用的一款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. SSIS 对数据排序

    SSIS 对数据排序有两种方式,一种是使用Sort组件,一种是使用sql command的order by clause进行排序. 一,使用Sort组件进行排序 SortType:升序 ascendi ...

  2. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  3. Python——functools

    该模块为高阶函数提供支持——作用于或返回函数的函数被称为高阶函数.在该模块看来,一切可调用的对象均可视为本模块中所说的“函数”. 目录 一.模块方法 1. functools.cmp_to_key(f ...

  4. Linux的学习--配置LNMP环境

    最近,回到公司,发现电脑都换成linux系统了...很无力... 配置环境,跑起项目来就花了一天...额...在这里记录一下-- 系统是ubuntu 12.04. 一.安装nginx1:ubuntu因 ...

  5. 开发人员看测试之运行Github中的JBehave项目

    本文要阐述的主要有两点,一是介绍自动化测试框架JBehave,二是介绍如何在Github上拉项目,编译成myeclipse环境中的项目,并最终导入Myeclipse中运行. JBehave是何物? J ...

  6. .NET知识结构

    .NET知识结构 .NET介绍 微软.NET战略及技术体系,.NET Framework框架类库(FCL),公共语言运行时(CLR),通用类型系统(CTS),公共语言规范(CLS),程序集(Assem ...

  7. 12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...

  8. Clipboard.js实现复制内容到剪切板

    <script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...

  9. ASP.NET MVC系列:添加模型的验证规则

    首先,在模型类中引用 System.ComponentModel.DataAnnotations 命名空间;System.ComponentModel.DataAnnotations 命名空间提供定义 ...

  10. .Net语言 APP开发平台——Smobiler学习日志：用MenuView控件仿钉钉APP的首页菜单

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