您的位置：首页 > Web前端 > JavaScript

实现文字左右滚动 javascript

2017-07-21 17:41 375 查看

参考链接：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航