很实用的一款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 Package 部署的历史记录

    1,通过Integration Services Catalogs来查看 打开SSISDB->Projects,查看指定project的version history,这种方式查看Deploye ...

  2. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  3. poj3342Party at Hali-Bula（树形dp）

    /* 树形dp! 判重思路: 当dp[v][0]==dp[v][1]时,很自然,flag[u][0]必然是有两种方案的.flag[u][1]则不然, 因为它只和dp[v][0]有关系.而若flag[v ...

  4. 清空文件下的SVN控制文件

    代码如下,复制代码为txt文件,更改后缀为“.bat”,把文件放到,需要删除的文件的顶端文件夹内,点击执行. @echo on color 2f mode con: cols= lines= @REM ...

  5. 机器学习&数据挖掘笔记_15（关于凸优化的一些简单概念）

    没有系统学过数学优化,但是机器学习中又常用到这些工具和技巧,机器学习中最常见的优化当属凸优化了,这些可以参考Ng的教学资料:http://cs229.stanford.edu/section/cs22 ...

  6. Nodejs学习笔记（四）——支持Mongodb

    前言:回顾前面零零碎碎写的三篇挂着Nodejs学习笔记的文章,着实有点名不副实,当然,这篇可能还是要继续走着离主线越走越远的路子,从简短的介绍什么是Nodejs,到如何寻找一个可以调试的Nodejs ...

  7. Sql Server优化之索引提示----我们为什么需要查询提示，Sql Server默认情况下优化策略选择的不足

    环境: Sql Server2012 SP3企业版,Windows Server2008 标准版 问题由来: 最近在做DB优化的时候,发现一个存储过程有非常严重的性能问题, 由于整个SP整体逻辑是一个 ...

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

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

  9. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  10. ASP.NET Core开发-使用Nancy框架

    Nancy简介 Nancy是一个轻量级的独立的框架,下面是官网的一些介绍: Nancy 是一个轻量级用于构建基于 HTTP 的 Web 服务,基于 .NET 和 Mono 平台,框架的目标是保持尽可能 ...