2010年8月30日随笔档案 - 豪情

2010年8月30日

scroll

<!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" xml:lang="en">
<head>
<title>豪情--文字滚动</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body,ul,li,p,div,table,td{margin:0;padding:0;font-size:12px;}
#scroll_text{width:520px;height:auto;padding:6px 0;overflow:hidden;border:1px solid #ccc;background:#efefef;white-space:nowrap;}
.container{width:auto;height:auto;float:left;padding:0 5px;overflow:hidden;}
.container a{margin-right:10px;}
a{color:#00007F;text-decoration:none;}a:hover{color:#bd0a01;text-decoration:underline;}
</style>
  <script type="text/javascript">
         var d = document, 
             $ = function(id) { return d.getElementById(id); },
             box,container,sub,newdiv;
         function init(){
             box = $('scroll_text');
             container = $('scroll_container');
             sub = $('subcontainer');
             newdiv = $('container2');
             newdiv.innerHTML = sub.innerHTML;
             container.style.width = (sub.offsetWidth * 6 + 100) + 'px'; 
             timer = setInterval(scrollFn, 30);
             box.onmouseover = function(){ clearInterval(timer)};
             box.onmouseout = function(){ timer = setInterval(scrollFn, 30); };
         }
         function scrollFn(){
             if(newdiv.offsetWidth <= box.scrollLeft){
                 box.scrollLeft -= container.offsetWidth;
             } else {
                 box.scrollLeft++;
             }
         }
         window.onload = function(){
             init();
         }
     </script></head>
<body>
<div id="scroll_text">
<div id="scroll_container">
<div id="subcontainer" class="container">
<a href="#">·多国为炒作房地产热降温 严格限制外国人买卖</a>
<a href="#">·沈阳万达广场火灾9死9伤 失火前12天曾消防演习</a>
<a href="#">·江苏常熟为建商务区命住户拆迁 称属公共利益</a>
<a href="#">·陕西安康人口普查每人收3元 派出所称是门牌号费</a>
<a href="#">·美日12月联合军演目标直指钓鱼岛 </a>
<a href="#">·媒体称地方政府紧张筹备房产税 税改大幕拉开 </a>
<a href="#">·<b>四名记者采访伊春空难连遭强行关押 警方道歉</b> </a>
<a href="#">·哀悼：每个遇难者都曾是一个鲜活的生命 </a>
</div>
<div id="container2" class="container"></div>
</div>
</div>
</body>
</html>

posted @ 2010-08-30 00:13 豪情阅读(76) 评论(0) 编辑

公告