<!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. 【HDOJ】1310 Team Rankings

    STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...

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

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

  3. Silverlight获取DataGrid选中的行数据

    注意触发的事件为:CurrentCellChanged后台代码: /// <summary> /// 获取datagrid当前选中的单元格数据 /// 如果绑定的数据源为实体的话默认选中的 ...

  4. HBASE API操作问题总结

    org.apache.hadoop.hbase.MasterNotRunningException 在centos中查看,发现没有HMaster进程 解决方法: 1.启动hadoop后,需要等一段时间 ...

  5. Jquery中常见问题

    最近也是在做项目的时候刚接触到jQuery.下面汇总一下遇到的几个问题 如何动态创建按钮 方式一: $("#a").html("<input type='butto ...

  6. URAL 1081

    题目大意:求词典序下第K个长度为N且无相邻位置都为1的0.1序列.无解时输出-1. 例如: input:     output: 3 1        000(所有符合条件的序列有:000,001,0 ...

  7. org.apache.struts.chain.commands.InvalidPathException: No action config found for the specified url.

    No action config found for the specified url url路径下找不到action,原因是stuts-config.xml文件配置错误. demo的项目文件如下: ...

  8. 利用powershell进行远程服务器管理（命令行模式）

    Pssession,Pssession是Windows Powershell会话的意思,一个会话,可以共享数据,提供交互式的对话,我们可以为某些命令例如Invoke-Command 制定会话来远程作业 ...

  9. LSPCI具体解释分析

    一.PCI简单介绍     PCI是一种外设总线规范.我们先来看一下什么是总线:总线是一种传输信号的路径或信道.典型情况是,总线是连接于一个或多个导体的电气连线,总 线上连接的全部设备可在同一时间收到 ...

  10. Android入门之ActionBar实现Tab导航

    效果图: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...