• <noscript id="imkki"></noscript>
  • <td id="imkki"><option id="imkki"></option></td><table id="imkki"><kbd id="imkki"></kbd></table>
  • 建站知識

    Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

    網站建設中常用到圖片左右滾動的效果不間斷,怎樣網頁左右滾動效果不間斷?

    時間:  來源:網站建設公司  作者:網站制作公司  點擊量:
    瑞恒網絡,北京網站建設,北京網站制作,高端網站建設品牌服務公司,網站建設,網站制作,等一站式綜合服務,專業打造品牌形象網站,讓您在眾多競爭對手中脫穎而出,010-56290915

    網站制作中,左右滾動效果是非常常見的,下面我們介紹一種網站中常用的滾動效果,本人認為還是非常好用的,可以控制滾動的速度和移動的寬帶,請查看下列代碼:
     

    <style type="text/css">
    <!--
    .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;margin:0 auto;}
    .rollBox .LeftBotton{height:52px;width:19px;background:url(button.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(button.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
    .rollBox .Cont{width:530px;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>
    <div class="rollBox">
         <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
         <div class="Cont" id="ISL_Cont">
          <div class="ScrCont">
           <div id="List1">      
            <!-- 圖片列表 begin -->
             <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>      
            
    <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87"  /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>
    <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">酷圖片標題</a></p>
             </div>      
             <div class="pic">
              <a href="/" target="_blank"><img src="圖片地址.jpg" width="109" height="87" /></a>
              <p><a href="http://www.5icool.org/" target="_blank">圖片標題</a></p>
             </div>
            <!-- 圖片列表 end -->
            
           </div>
           <div id="List2"></div>
          </div>
         </div>
         <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
        </div>
       </div>

    <script language="javascript" type="text/javascript">
    <!--//--><![CDATA[//><!--
    //圖片滾動列表 5icool.org
    var Speed = 1; //速度(毫秒)
    var Space = 5; //每次移動(px)
    var PageWidth = 528; //翻頁寬度
    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();',3000); //間隔時間
    }
    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>


    怎么樣,網站建設中的滾動效果你學會了嗎?

     

    本文TAG標簽: 北京網站設計 北京網頁制作 北京網站建設
    返回關閉本頁
    上一篇:ASP時間差,ASP時間差怎么計算?ASP網站制作計算時間差    下一篇:北京網站建設-彩色tags標簽,關鍵字代碼,tag標簽刷新一次變一次,標簽云。
    推薦閱讀

    Copyright © 2010-2021 北京瑞恒天龍科技有限公司  All Rights Reserved  |  北京網站建設知名服務商  |  北京網站制作 | 京ICP備11004170號-1   京公網安備110107000463號
    地址:北京市海淀區永定路長銀大廈B座  非工作時間:15810379666  服務熱線:010-89941606 座機:010-89941606 轉801/802/803/804  版權所有 盜版必究!

    在線咨詢
    關閉
    電話咨詢
    網站制作電話
    010-89941606
    国产成人在线观看视频|青草国产精品久久久久久久久|国产精品国产午夜免费福利看|亚洲图片国产日韩欧美
  • <noscript id="imkki"></noscript>
  • <td id="imkki"><option id="imkki"></option></td><table id="imkki"><kbd id="imkki"></kbd></table>