跑马灯效果

jsntghf

浏览: 2534251 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

JavaScript Google CSS XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<div class="rollBox"> 
  <div class="LeftBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div> 
  <div class="Cont" id="ISL_Cont"> 
    <div class="ScrCont"> 
      <div id="List1"> 
        <div class="pic" > 
          <a href="http://www.google.cn" target="_blank"><img src="xiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /></a> 
          <a href="http://www.google.cn" target="_blank">谢雯琇</a> 
        </div> 
        <div class="pic"> 
          <a href="http://www.baidu.com" target="_blank"><img src="lvge.jpg" width="109" height="87" alt="吕铬" /></a> 
          <a href="http://www.baidu.com" target="_blank">吕铬</a> 
        </div>       
        <div class="pic"> 
          <a href="http://www.sina.com" target="_blank"><img src="zhengru.jpg" width="109" height="87" alt="贾正如" /></a> 
          <a href="http://www.sina.com" target="_blank">贾正如</a> 
        </div> 
      </div> 
      <div id="List2"></div> 
    </div> 
  </div> 
  <div class="RightBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()" ></div> 
</div> 
<style type="text/css"> 
  .rollBox{width:904px;overflow:hidden;padding:12px 0 5px 6px;} 
  .rollBox .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
  .rollBox .RightBotton{height:52px;width:20px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
  .rollBox .Cont{width:663px;overflow:hidden;float:left;} 
  .rollBox .ScrCont{width:10000000px;} 
  .rollBox .Cont .pic{width:132px;float:left;text-align:center;} 
  .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} 
  .rollBox .Cont .pic p{line-height:26px;color:#505050;} 
  .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;} 
  .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} 
  .rollBox #List1,.rollBox #List2{float:left;} 
</style> 
<script language="javascript" type="text/javascript"> 
  var Speed = 10; //速度(毫秒) 
  var Space = 5; //每次移动(px) 
  var PageWidth = 132; //翻页宽度 
  var fill = 0; //整体移位 
  var MoveLock = false; 
  var MoveTimeObj; 
  var Comp = 0; 
  var AutoPlayObj = null; 
  GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
  GetObj('ISL_Cont').scrollLeft = fill; 
  GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 
  GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 
  AutoPlay(); 
  function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 
  function AutoPlay(){ //自动滚动 
    clearInterval(AutoPlayObj); 
    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); //间隔时间 
  } 
  function ISL_GoUp(){ //上翻开始 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
  } 
  function ISL_StopUp(){ //上翻停止 
    clearInterval(MoveTimeObj); 
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ 
      Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
  } 
  function ISL_ScrUp(){ //上翻动作 
    if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} 
    GetObj('ISL_Cont').scrollLeft -= Space ; 
  } 
  function ISL_GoDown(){ //下翻 
    clearInterval(MoveTimeObj); 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    ISL_ScrDown(); 
    MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
  } 
  function ISL_StopDown(){ //下翻停止 
    clearInterval(MoveTimeObj); 
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ 
      Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
  } 
  function ISL_ScrDown(){ //下翻动作 
    if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} 
    GetObj('ISL_Cont').scrollLeft += Space ; 
  } 
  function CompScr(){ 
    var num; 
    if(Comp == 0){MoveLock = false;return;} 
    if(Comp < 0){ //上翻 
      if(Comp < -Space){ 
        Comp += Space; 
        num = Space; 
      }else{ 
        num = -Comp; 
        Comp = 0; 
      } 
      GetObj('ISL_Cont').scrollLeft -= num; 
      setTimeout('CompScr()',Speed); 
    }else{ //下翻 
      if(Comp > Space){ 
        Comp -= Space; 
        num = Space; 
      }else{ 
        num = Comp; 
        Comp = 0; 
      } 
      GetObj('ISL_Cont').scrollLeft += num; 
      setTimeout('CompScr()',Speed); 
    } 
  } 
</script>

demo.rar (9 KB)
下载次数: 17

分享到：

苹果电脑摄像头用Photo Booth拍照时省去倒 ... | Mac OS X 操作系统上的水波屏幕保护LotsaW ...

2011-03-16 08:40
浏览 1630
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

跑马灯效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

跑马灯效果

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

可输入文本的下拉框

二级树形菜单

不规则菜单

二级树形菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

最近访客更多访客>>