<!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>无标题文档</title>
<style type="text/css">
*{
font-size:12px;
}
#aaa{width:300px; height:14px; padding-top:4px; margin-top:10px; border:1px solid #ccc; overflow:hidden;word-wrap:normal;}
</style>
<script language="javascript" type="text/javascript" src="jquery.js"></script> //这里使用的jquery框架,主要是实现文档加载完成后为元素绑定事件
<script language="javascript" type="text/javascript">
var time,pix;
pix = 1; //这里是每次移动的相素
time = 30; //这里是每隔多少毫秒移动一次
$(document).ready(function()
{
var aa = document.getElementsByName("aaa");
for (var i=0; i<aa.length; i++){scrollit(aa[i]);}
});
scrollit = function(obj){
obj.style.textIndent = "0px";
var value = obj.innerHTML;
var wlen = getlength(value);
var olen = obj.offsetWidth;
var aa
aa = setInterval(function(){marqueerl(obj,wlen,olen)},time); //这里marqueerl是右到左，改为marqueelr为左到右
if (window.attachEvent) {obj.attachEvent("onmouseover",function(){clearInterval(aa)});}
if (window.addEventListener) {obj.addEventListener("mouseover",function(){clearInterval(aa)},false);}
if (window.attachEvent) {obj.attachEvent("onmouseout",function(){aa = setInterval(function(){marqueerl(obj,wlen,olen)},time)});}
if (window.addEventListener) {obj.addEventListener("mouseout",function(){aa = setInterval(function(){marqueerl(obj,wlen,olen)},time)},false);}
setinter = function(){
}
}
marqueelr = function(obj,wlen,olen) //从左到右滚动
{
obj.style.textIndent = (parseInt(obj.style.textIndent) + pix) +"px";
if (parseInt(obj.style.textIndent) > parseInt(olen)){obj.style.textIndent = "-"+wlen+"px";}
}
marqueerl = function(obj,wlen,olen) //从右到左滚动
{
obj.style.textIndent = (parseInt(obj.style.textIndent) - pix) +"px";
if (wlen>olen){
if (Math.abs(parseInt(obj.style.textIndent))>parseInt(wlen)){
obj.style.textIndent = olen+"px";
}
}
else
{
if (Math.abs(parseInt(obj.style.textIndent)-olen+wlen)>parseInt(olen)){
obj.style.textIndent = olen+"px";
}
}
}
getlength = function(text) //这个函数实现测试文字相素
{
var createDiv = document.createElement("span");
createDiv.style.background ="#ccc";
var createText = document.createTextNode(text);
createDiv.appendChild(createText);
var tlink = document.getElementsByTagName("div")[0];
insertdiv(createDiv,tlink);
var width = createDiv.offsetWidth;
removediv(createDiv);
return width;
}
insertdiv = function(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
removediv = function(obj){document.body.removeChild(obj);}
</script>
</head>
<body>
<div name="aaa" id="aaa">打算立刻发 按时地方就喀哒十分按时地方就喀哒设法上</div>
<div name="aaa" id="aaa">adsf</div>
<div name="aaa" id="aaa">adsf</div>
<div name="aaa" id="aaa" style="background-color:#ccc;">adfadsfadsf</div>
</body>
</html>
