<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(function () {

            var demo = $("#demo")[0];

            var demo1 = $("#demo1")[0];

            var demo2 = $("#demo2")[0];

            var speed = 10;    //滚动速度值，值越大速度越慢

 var nnn = 200 / demo1.offsetHeight;

            for (i = 0; i < nnn; i++) {

                demo1.innerHTML += "<br />" + demo1.innerHTML

 }

            demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1

 function Marquee() {

                if (demo2.offsetTop - demo.scrollTop <= 0)    //当滚动至demo1与demo2交界时

 demo.scrollTop -= demo1.offsetHeight    //demo跳到最顶端

 else {

                    demo.scrollTop++

                }

            }

            var MyMar = setInterval(Marquee, speed);        //设置定时器

 demo.onmouseover = function () {

                clearInterval(MyMar)

            }    //鼠标经过时清除定时器达到滚动停止的目的

 demo.onmouseout = function () {

                MyMar = setInterval(Marquee, speed)

            }    //鼠标移开时重设定时器

 });

    </script>

</head>

<body>

<div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">

    <div id="demo1">

        HTML5是一个丰富的应用，可以给用户很多视觉上的享受！

    </div>

    <div id="demo2"></div>

</div>

</body>

</html>

　　转自：https://my.oschina.net/guopengfei/blog/534891

jquery实现跑马灯效果（一）的更多相关文章

  1. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  2. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  3. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  4. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  5. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  6. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

  7. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  8. [Android1.5]TextView跑马灯效果

    from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言 这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...

  9. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

随机推荐

  1. UVaLive 6853 Concert Tour (DP)

    题意:给定 n 个城市,m 个月,表示要在这 n 个城市连续 m 个月开演唱会,然后给定每个月在每个城市开演唱会能获得的利润,然后就是演唱会在不同城市之间调动所要的费用, 问你,怎么安排这 n 个演唱 ...

  2. C#利用WebService接口下载文件

    WebTest.RtTfSimDataInterface test = new WebTest.RtTfSimDataInterface(); //string strBasic = test.Get ...

  3. POJ3696【欧拉函数+欧拉定理】

    题意: 求最小T,满足L的倍数且都由8组成,求长度: 思路: 很强势的福利:点 图片拿出去食用更优 //#include<bits/stdc++.h> #include<cstdio ...

  4. POJ1182【种类并查集】

    思路: ---来源百度 0表示它与根结点为同类, 1表示它吃根结点, 2表示它被根结点吃. 判断两个点a, b的关系,我们令p = Find(a), q = Find(b),即p, q分别为a, b子 ...

  5. SQL基础培训实战教程[全套]

    学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法    下载学习文档 进度1-建数据表-美化版-2018 ...

  6. 一个Java语言所写的shop网站框架明细

    核心框架Spring Framework :作为一个优秀的开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用 ...

  7. C语言中位运算符异或“∧”的作用

    异或运算符∧也称XOR运算符.它的规则是若参加运算的两个二进位同号,则结果为0(假):异号则为1(真).即0∧＝,∧＝,∧＝.如: 即071∧,结果为023(八进制数). “异或”的意思是判断两个相应 ...

  8. linux tcpdump(转)

    转自 http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html 默认启动 tcpdump 普通情况下,直接启动tcpdump将监 ...

  9. MFC中的模态对话框与非模态对话框

    模态对话框创建: MyDialog mydlg; mydlg.DoModal() 当前只能运行此模态对话框,且停止主窗口的运行,直到模态对话框退出,才允许主窗口运行. 模态对话框的关闭顺序: OnCl ...

  10. 利用Common-Fileupload上传文件图片

    一,介绍 common-fileupload是appache的开源组件,基于该组件可以轻松实现文件上传的功能,strust框架的文件上传功能也是基于该组件. 二,使用 1,导入两个jar包:commo ...