网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 文字链接 >> 正文
最新文章
· 单行文字上下无缝循环滚动
· 鼠标移入/移出颜色渐变
· 链接翻滚的文字特效
· 鼠标跟随效果的链接文字提示
· JS仿腾讯QQ网站的链接文字提示效果
· 链接文字向下一像素
· CSS实现带背景图片的文字链接
· Effects Module效果,jQuery 隐性文本
· JS实现打字机式字符输出效果
· 从天上掉下来的文字
热门文章
 CSS实现链接下划虚线效果
 JS实现打字机式字符输出效果
 单行文字上下无缝循环滚动
 符合标准的间歇性向上滚动代码(兼容
 JavaScript实现搜索关键字高亮
 Javascript动态调整文章的行距、字
 支持链接到新页面的锚点平滑跳转-A
 显示在文本框里的Js打字效果代码
 CSS实现带背景图片的文字链接
 JS实现字体大中小切换
相关文章
简单实用的向上滚动公告效果
单行两列文本向上滚动特效
符合标准的间歇性向上滚动代码(兼容IE和FireFox)
来源:www.cywdesign.com 更新时间:2009/5/4 0:22:32 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<!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)</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>
</body>
</html>

△运行 ☉预览 #复制 +收藏
特效说明:

符合标准的间歇性向上滚动代码(兼容IE和FireFox)

  • 上一篇文章: 没有了
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号