间隔时间滚动的图文小栏目

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 背景图像 -> 间隔时间滚动的图文小栏目

间隔时间滚动的图文小栏目

作者:admin 发布时间:2010-8-31 20:30:24 发布人: admin

<!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>间隔时间滚动的图文小栏目丨jz123.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<div class="rig">
  <h5><span><a href="#">更多>></a></span>精彩企业专题</h5>
  <div id="qy" style="width:256px;margin:7px 10px 5px;height:94px;overflow:hidden;" onmouseover="qiScrollAmount=0" onmouseout="qiScrollAmount=2">
    <ul>
      <li id="tab1">
        <table border="0" cellspacing="0" cellpadding="0" width="256px">
          <tr>
            <td height="70"><a href="#"><img src="http://web.archive.org/web/20150530183058im_/http://myjs.jz123.cn/upimg/2010041515380563250.jpg"></a></td>
          </tr>
          <tr>
            <td height="24"><span><a href="#">进入专题</a></span>
            <p><a href="#">徐工集团专题</a></p></td>
          </tr>
          <tr>
            <td height="70"><a href="#"><img src="http://web.archive.org/web/20150530183058im_/http://myjs.jz123.cn/upimg/971677-1.jpg"></a></td>
          </tr>
          <tr>
            <td height="24"><span><a href="#">进入专题</a></span>
            <p><a href="#">三一重工专题</a></p></td>
          </tr>
        </table>
      </li>
      <li id="tab2"></li>
    </ul>
  </div>
  <div id="btm"><a id="up" onclick="up()" href="javascript:;" target="_self"></a><a id="dw" onclick="dw()" href="javascript:;" target="_self"></a></div>
</div>
<script language="javascript">
var qoMarquee = document.getElementById("qy");//滚动对象
var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var qiLineHeight = 94;//单行高度，像素IE
var qiLineCount = 0;//实际行数
var qiScrollAmount = 2;//每次滚动高度，像素（速度）
var speed1=2000;//每次停留时间
var speed2=1;//滚动速度
tab2.innerHTML=tab1.innerHTML;
var alink=document.getElementById('btm').getElementsByTagName('a');
for(var i=0;i<alink.length;i++){
 alink[i].onfocus=function(){this.blur();}
}
function run() {
 if(qoMarquee.scrollTop==2*qiLineHeight){qoMarquee.scrollTop=0;window.setTimeout( "run()", speed2 );}//重置并接着滚动
 else{
  qoMarquee.scrollTop +=qiScrollAmount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {window.setTimeout( "run()", speed1 );}//如果满格等待N秒
  else {window.setTimeout( "run()", speed2 );}//正常滚动
 }
}
function up(){
  qiScrollAmount = 0;
  var amount=1;
  if(qoMarquee.scrollTop==2*qiLineHeight) qoMarquee.scrollTop=0;
  qoMarquee.scrollTop +=amount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {amount=0;window.setTimeout( "qiScrollAmount = 2", speed1 );}
  else window.setTimeout( up(), 1 );
}
function dw(){
  qiScrollAmount = 0;
  var amount=1;
  if(qoMarquee.scrollTop==0) qoMarquee.scrollTop=2*qiLineHeight;
  qoMarquee.scrollTop -=amount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {amount=0;window.setTimeout( "qiScrollAmount = 2", speed1 );}
  else window.setTimeout( dw(), 1 );
}
window.setTimeout( "run()", speed1 );
</script>
</body>
</html>

间隔时间滚动的图文小栏目

将本文收藏到QQ书签与更多好友分享

上一篇：文章：仿新浪微博图片旋转效果下一篇：文章：一款很酷的分类列表样式显示效果

网页特效

间隔时间滚动的图文小栏目

本类浏览排行 »

本站推荐文章 »