<!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. COJ 0015 20602铁轨

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=15 20602铁轨 难度级别:B: 运行时间限制:1000ms: 运行空间限 ...

  2. 尚学堂 JAVA DAY11 概念总结

    1.冒泡排序算法 <升序排列> 思路1: 数组长度为n,那么要对数组进行n-1次遍历; step 1---从数组的第一个数开始,两两比较,如果第一个数 > 第二个数,将二者进行交换: ...

  3. 数据迁移sql

    1.把数据库test中的表Table1中的数据插入到数据库test2中的表Table2:insert into test2.Table2(a,c,d) select a,c,5 from test.T ...

  4. Sublime Text 2.0.2 注册码

    Sublime Text 2.0.2 注册码 直接输入注册码就可以了----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-85560 ...

  5. 微软下一代云环境Web开发框架ASP.NET vNext预览

    微软在2014年5月12日的TechEd大会上宣布将会公布下一代ASP.NET框架ASP.NET vNext的预览.此次公布的ASP.NET框架与曾经相比发生了根本性的变化,凸显了微软"云优 ...

  6. 安卓（android）建立项目时失败，出现Android Manifest.xml file missing几种解决方法？（总结中）

    安卓(android)建立项目时失败.出现AndroidManifest.xml file missing几种解决方法?(总结中) Eclipse新建项目.遇到这种问题.注意例如以下: 1.文件名称最 ...

  7. Lucene和jackson冲突

    今天在使用lucene的时候,想直接在Controller中返回json对象,于是在Spring中配置了JackSon的converter: <bean id="jacksonMess ...

  8. 《网络编程》先进 I/O

    这部分是高级插座 I/O . 设置套接字超时报警,使用更方便的数据传输功能. 套接字 I/O 设置操作超时有三种方法: 转让 alarm 性能,制作时,它指定超时 SIGALRM 信号: 在 sele ...

  9. 大数据笔记04：大数据之Hadoop的HDFS（基本概念）

    1.HDFS是什么? Hadoop分布式文件系统(HDFS),被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点. 2.HDFS ...

  10. 判断两条直线的位置关系 POJ 1269 Intersecting Lines

    两条直线可能有三种关系:1.共线     2.平行(不包括共线)    3.相交. 那给定两条直线怎么判断他们的位置关系呢.还是用到向量的叉积 例题:POJ 1269 题意:这道题是给定四个点p1, ...