<!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. Qt经典—线程、事件与Qobject（耳目一新）

    介绍 You’re doing it wrong. — Bradley T. Hughes 线程是qt channel里最流行的讨论话题之一.许多人加入了讨论并询问如何解决他们在运行跨线程编程时所遇到 ...

  2. First ASP.NET Core Application on a Mac Using Visual Studio Code

    一直希望可以在mac上直接编写webapp (用C#)现在终于伴随着 core 世界美好了,不需要用pd windows了 nice. Visual studio code 更新1.1版本了 怀着激动 ...

  3. VS2013下的Nmake编译链接成win XP的可执行程序

    nmake下没有指定toolset=vc120_xp等类似物.但是,可以指定Link.exe的链接参数,指定子系统就可以了,/SUBSYSTEM:[WINDOWS | CONSOLE],5.01 5. ...

  4. 【HDOJ】2150 Pipe

    计算几何的基础题目.是时候刷刷计算几何了. /* 2150 */ #include <cstdio> #include <cstring> #include <cstdl ...

  5. 最大流Dinic

    不断用BFS构造分层网络,用DFS增广.中途用取指的cur优化DFS. Dinic封装模板: #include <cstdio> #include <iostream> #in ...

  6. 【转】android去掉EditView的默认焦点问题

    原文网址:http://www.111cn.net/sj/android/54680.htm 做一个输入框时发现android中EditView的默认焦点了,这种问题如果是在输入框还好,但在搜索页面或 ...

  7. bzoj 1056 [HAOI2008]排名系统（1862 [Zjoi2006]GameZ游戏排名系统）

    1056: [HAOI2008]排名系统 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1854  Solved: 502[Submit][Statu ...

  8. chrome性能测试框架webpagereplay

    今天学习了下chrome的性能测试框架,其实它可用于在稳定的环境下测试浏览器向服务器发起http请求至下载请求文档到本地的这个过程.好处在于,其原理在于先将第一次请求回来的文档下载在本地,然后在本地模 ...

  9. String的equals方法和==

    String类的对象是字符串常量,一切看起来改变了String对象的操作,其实只是改变了字符串引用变量所引用的字符串罢了. Java中的字符串存放在一个公共的存储池中,引用指向存储池中相应的位置,编译 ...

  10. javascript表单行为效果展示

    效果如下 以上效果是在点击下一步的时候触发的效果显示 代码如下 ////加工厂$(function() { $("#planttwo").click(function () { v ...