设为首页 加入收藏
当前位置:首页 > 整站内容 > 特效代码 > 文本特效 > 详细内容
间隙间歇滚动代码
发布时间:2010-3-16  阅读次数:8732  字体大小: 【】 【】【

<!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>
<title>符合标准的间隙滚动代码(兼容IE和FireFox) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body { padding: 30px; font-size: 12px;}
a { color: #000; text-decoration: none; }
a:hover { color: #F60; }
#scrollWrap {
  width:300px;
  height: 18px;
  overflow: hidden;
  background: #E6F6F6;
}
#scrollMsg {
  float: left;
  text-align: left;
   padding:0 10px;
}
#scrollMsg ul {
   margin:0;
   padding:0;
}
#scrollMsg li {
  line-height: 18px;
   list-style:none;
}
-->
</style>
</head>

<body>

<div id="scrollWrap">
  <div id="scrollMsg">
    <ul>
      <li><a href="#">1111111111111</a></li>
      <li><a href="#">22222222222</a></li>
      <li><a href="#">333333333333333</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
<!--
try{
  var isStoped = false;
  var oScroll = document.getElementById("scrollWrap");
  with(oScroll){
  noWrap = true;
  }
  
  oScroll.onmouseover = new Function('isStoped = true');
  oScroll.onmouseout = new Function('isStoped = false');
  
  var preTop = 0;
  var curTop = 0;
  var stopTime = 0;
  var oScrollMsg = document.getElementById("scrollMsg");
  
  oScroll.appendChild(oScrollMsg.cloneNode(true));
  init_srolltext();
}catch(e) {}
  
function init_srolltext(){
  oScroll.scrollTop = 0;
  setInterval('scrollUp()', 15);
}
  
function scrollUp(){
  if(isStoped) return;
  curTop += 1;
  if(curTop == 19) {
  stopTime += 1;
  curTop -= 1;
  if(stopTime == 180) {
  curTop = 0;
  stopTime = 0;
  }
  }else{
  preTop = oScroll.scrollTop;
  oScroll.scrollTop += 1;
  if(preTop == oScroll.scrollTop){
  oScroll.scrollTop = 0;
  oScroll.scrollTop += 1;
  }
  }
}
//-->
</script>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.jscode.cn/">网页特效观止</a></p>
</body>

</html>

预览效果

天猫商城    聚划算    天猫电器城    淘宝旅行    天猫超市    淘宝游戏    天猫品牌特卖    天猫母婴

上一篇:没有了! 下一篇:闪动的文字
我要评论
  • 匿名发表
  • [添加到收藏夹]
  • 发表评论:(匿名发表无需登录,已登录用户可直接发表。) 登录状态:未登录
最新评论
所有评论[0]
    暂无已审核评论!

全站链接: 
收录查询
分享按钮