<style>
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px}
#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:50px;width:280px;">
<ul id="demo1">
<li><a href="#" target="_blank">1</a></li>
<li><a href="#" target="_blank">2</a></li>
<li><a href="#" target="_blank">3</a></li>
<li><a href="#" target="_blank">4</a></li>
<li><a href="#" target="_blank">5</a></li>
<li><a href="#" target="_blank">6</a></li>
<li><a href="#" target="_blank">7</a></li>
</ul>
<div id="demo2"></div>
</div>
<script>
var speed=100
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<=0)
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>

JS无缝文字滚动（兼容各大浏览器）的更多相关文章

  1. ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js 实现文字滚动功能，可更改配置参数 带完整版解析代码。

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...

  3. 阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

    阻止a标签跳转四种方法 兼容各大浏览器(包括IE) HTML <!--第一种--> <a href="javascript:;">我不会被跳转</a& ...

  4. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  5. JS回车事件，兼容目前所有浏览器

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

  6. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  7. js的window.onscroll事件兼容各大浏览器

    为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollT ...

  8. js 实现复制到剪切板 复制按钮兼容各大浏览器

    zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroCli ...

  9. js原生代码编写一个鼠标在页面移动坐标的检测功能，兼容各大浏览器

    function mousePosition(e) {     //IE9以上的浏览器获取     if (e.pageX || e.pageY) {         return {         ...

随机推荐

  1. xml和xsl配合使用实例

    找到一个实际应用的例子,是英语统考打印准考证的实例,关于xml和xsl配合使用的. 下面看看xml文档 <?xml version='1.0' encoding='utf-8' ?> &l ...

  2. C++的优秀特性5：模版

    (转载请注明原创于潘多拉盒子) C++是强类型语言,而且恐怕是强类型语言里面类型最严格的.这意味着:1. C++变量的类型在定义时就确定了:2. 该类型在后续的生命期中不会改变.比如: int n = ...

  3. 【WebForm】ASP.NET 使用 uploadify 上传文件

    说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...

  4. DedeCMS调用多说评论系统遇到的一些问题

    最近前端笔记加入了多说的评论,因为自带的评论太渣了.过程不是很顺利,把遇到的问题和大家分享下.我用的dedecms,所以使用的是dede的多说评论模块.效果图: 多说官方下载:http://dev.d ...

  5. Android——ViewGroup的一个用法实例(转载)

    找了很久,终于找到了. <?xml version="1.0" encoding="UTF-8" ?> <merge xmlns:androi ...

  6. 使用iOS手势UIGestureRecognizer

    UIKit中包含了UIGestureRecognizer类,用于检测发生在设备中的手势.UIGestureRecognizer是一个抽象类,定义了所有手势的基本行为,它有下面一些子类用于处理具体的手势 ...

  7. [Node.js] CommonJS Modules

    CoomonJS modules provide a clean syntax for importing dependencies. This lesson will take a look at ...

  8. ActivityGroup+LinearLayout实现iphone风格的底部tab菜单

    public class ActsGroup extends ActivityGroup {       private LinearLayout bodyView;     private Line ...

  9. IOS试题收集1

    IOS试题收集1 1.Objective C中有多继承吗?没有的话用什么代替? Protocol 2.Objective C中有私有方法吗?私有变量呢? OC类里面只有静态方法和实例方法这两种,@pr ...

  10. MySQL执行SHOW STATUS查询服务器状态状态之Handler_read_* 详解

    在MySQL里,我们一般使用SHOW STATUS查询服务器状态,语法一般来说如下: SHOW [GLOBAL | SESSION] STATUS [LIKE ‘pattern’ | WHERE ex ...