实现文字左右滚动 javascript

参考链接：http://www.86y.org/art_detail.aspx?id=587

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字无缝滚动可添加多个DIV</title>
<script>
(function(ns){    function Scroll(element){  var content = document.createElement("div");  var container = document.createElement("div");  var _this =this;  var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";  this.element = element;   this.contentWidth = 0;  this.stop = false;  content.innerHTML = element.innerHTML;  //获取元素真实宽度  content.style.cssText = cssText;  element.appendChild(content);  this.contentWidth = content.offsetWidth;  content.style.cssText= "float:left;";  container.style.cssText = "width: " + (this.contentWidth*2) + "px; overflow:hidden";  container.appendChild(content);  container.appendChild(content.cloneNode(true));  element.innerHTML = "";  element.appendChild(container);  container.onmouseover = function(e){  clearInterval(_this.timer);  };  container.onmouseout = function(e){  _this.timer = setInterval(function(){   _this.run();  },20);            };  _this.timer = setInterval(function(){   _this.run();  }, 20);  }  Scroll.prototype = {  run: function(){  var _this = this;  var element = _this.element;  elementelement.scrollLeft = element.scrollLeft + 1;  if(element.scrollLeft >=  this.contentWidth ) {  element.scrollLeft = 0;  }  }  };  ns.Scroll = Scroll;
}(window));
window.onload=function(){  var sc = new Scroll(document.getElementById("scroll"));  var sc = new Scroll(document.getElementById("scroll2"));
}
</script>
</head>  <body>
<div id="scroll" style="width:500px;border:1px solid #f60;color:red;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
<br />
<div id="scroll2" style="width:500px;border:1px solid #060;color:006;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
</body>
</html>

转载于:https://www.cnblogs.com/fenice/p/7218896.html

实现文字左右滚动 javascript相关推荐

php文字左右滚动代码,JavaScript
js文字横向滚动特效本文为大家分享了js文字横向滚动特效代码,具体实现内容如下: 页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793 ...
jquery实现多行文字图片滚动效果
基于jquery的实现多行文字图片滚动的效果代码,如果我们在论坛公告等等这些实例了,下面我来给各位朋友介绍介绍. 1 <div id="scrollDiv"> 2 &l ...
vue内容横向循环滚动_vue文字横向滚动公告
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
各种图片、文字无缝滚动
1.文字的无缝向上滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
vue组件走马灯_vue文字横向滚动走马灯公告代码示例
需求最新项目需要一个文字横向滚动效果, vue 文字横向无缝走马灯组件写的很详细,记录下来,广播出去. 解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); 2 ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...

实现文字左右滚动 javascript

代码

实现文字左右滚动 javascript相关推荐

最新文章

热门文章