<!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. SlidingMenu和ActionBarSherlock结合滑动式菜单都

    https://github.com/jfeinstein10/SlidingMenu http://actionbarsherlock.com/ SlidingMenu 的demo工程引用了Acti ...

  2. Ubuntu中Samba的安装配置和使用[图文]

    Samba服务在Ubuntu服务器版本中默认并没有安装. 1. Samba软件包的安装 使用源安装,在终端中输入如下命令: #sudo apt-get install samba#sudo apt-g ...

  3. combobox的不常用的方法和将txt文本内容加到textbox中显示

    将一个的datatable绑定到下拉框,指定显示某列的数据 cbx.DataSource = null; DataSet dsJH = new DataSet(); OperatePort.Opera ...

  4. HDOJ的题目分类

    模拟题, 枚举 1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 10 ...

  5. cf700A As Fast As Possible

    On vacations n pupils decided to go on excursion and gather all together. They need to overcome the ...

  6. Codeforces Round #232 (Div. 1) A 解题报告

    A. On Number of Decompositions into Multipliers 题目连接:http://codeforces.com/contest/396/problem/A 大意: ...

  7. 机器学习实战__安装python环境

    环境:win7 64位系统 第一步:安装python 1.下载python2.7.3 64位 msi 版本(这里选择了很多2.7的其他更高版本导致安装setuptools失败,也不知道是什么原因,暂时 ...

  8. 浅析Linux系统下用户与权限管理

    Linux作为一种多用户多任务操作系统,在日常的使用中不可避免地要划分出一个角色的概念来管理和使用计算机,这个角色与每一个计算机使用者关联,在Linux中称这种角色为用户.而在每一个用户使用计算机的过 ...

  9. MySQL慢查询（二） - pt-query-digest详解慢查询日志

    一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...

  10. ASP.NET页面同时发起多个ajax请求，出现阻塞情况

    解决办法:假如页面对Session只读不写,可以在页面的开头加上EnableSessionState="ReadOnly".