<!DOCTYPE html>

<html>

<head>

<meta  charset=utf->

<title>文字列表无缝向上滚动JavaScript代码-代码库</title>

<style>

*{margin:0px;padding:0px;border:0px;}

body{font-size:12px}

a{color:#; text-decoration:none;}

a:hover{color:#FF0000; text-decoration:none;}

#demo1{

height:auto;

text-align:left;

}

#demo2{

height:auto;

text-align:left;

}

#demo1  li{

list-style-type:none;

height:22px;

background:url() no-repeat left center;

text-align:left;

text-indent:15px;

}

#demo2  li{

list-style-type:none;

height:22px;

background:url() no-repeat left center;

text-align:left;

text-indent:15px;

}

</style>

</head>

<body>

<div id="demo" style="overflow:hidden;height:125px;width:280px;">

    <ul id="demo1">

        <li><a href="/" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>

        <li><a href="/" target="_blank">多层嵌套的一个层展开</a></li>

        <li><a href="/" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li>

        <li><a href="/" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li>

        <li><a href="/" target="_blank">《C++ Primer》中文第四版 chm</a></li>

        <li><a href="/" target="_blank">C++工资管理系统(Access)</a></li>

        <li><a href="/" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>

        <li><a href="/" target="_blank">左侧栏JS折叠菜单</a></li>

        <li><a href="/" target="_blank">《Java2核心特性》第7版</a></li>

    </ul>

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

</div>

<script> 

var speed =    //速度

var demo=document.getElementById("demo");

var demo2=document.getElementById("demo2");

var demo1=document.getElementById("demo1"); 

demo2.innerHTML=demo1.innerHTML

function Marquee(){

    if(demo2.offsetTop-demo.scrollTop <= ){

      demo.scrollTop -= demo1.offsetHeight

    }else{

      demo.scrollTop++

    } 

}

var MyMar=setInterval(Marquee,speed)     

demo.onmouseover=function() {clearInterval(MyMar)}   //停止

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}   //从新开始

</script>

</body>

</html>

文字列表无缝向上滚动JavaScript代码的更多相关文章

  1. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  2. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  3. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  4. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  5. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  6. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  7. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  8. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  9. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

随机推荐

  1. Linux下apache的停止、开启、重启

    有两种途径 一. service httpd stop(停止) service httpd start(开始) service httpd restart(重启) 这种方法,是系统自带的 二. 或者到 ...

  2. UVA11388 GCD LCM(数论)

    题目链接. 题意: 给定两个数,一个G,一个L,找出两个数a,b(a<=b),使得这两个数的最大公约数为G,最小公倍数为L,且(a最小). 分析: 当a,b存在时,a一定为G. 自己证了一下,数 ...

  3. HDU 1254 推箱子 BFS

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1254 题目分析: 做这道题,感觉挺简单的,做着做着就错了20次, 我也是醉了, WA到吐的节奏啊! 思 ...

  4. 【转】spin_lock & mutex_lock的区别? .

    原文网址:http://blog.csdn.net/wilsonboliu/article/details/19190861 本文由该问题引入到内核锁的讨论,归纳如下   为什么需要内核锁? 多核处理 ...

  5. Silverlight客户端调用WCF服务难题解疑

    一:解决办法 Silverlight客户端调用WCF服务在实际使用中经常会出现的问题就是无法直接应用类文件和配置文件.微软针对这一情况已经给出了解决办法.WCF开发框架可以帮助我们实现可靠性较高的跨平 ...

  6. Flatten Binary Tree to Linked List ——LeetCode

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  7. iOS音频处理

    ios音频处理 1. iOS底层音频处理技术(带源代码) http://www.cocoachina.com/ios/20111122/3563.html 2.ios 音频入门 http://blog ...

  8. 关于C#泛型列表List<T>的基本用法总结

    //示例代码如下:using System;using System.Collections.Generic;using System.Collections.ObjectModel;namespac ...

  9. C# Dictionary 字典

    C#中的Dictionary字典类介绍   关键字:C# Dictionary 字典 作者:txw1958原文:http://www.cnblogs.com/txw1958/archive/2012/ ...

  10. ulimit开启coredump时核心转储

    [root@localhost ~]# ulimit -c [root@localhost ~]# ulimit -a core data seg size (kbytes, -d) unlimite ...