基于js css3實現移動端循環滾屏效果



48 188 63



特效描述:基于jscss3 移動端循環滾屏,基于js css3實現移動端循環滾屏效果

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/animations.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/page.css">

2. 引入JS

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/touch.js"></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代碼

<div id="page-hd">
  <div id="loading" style="display: none;">
    <div class="spinner">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </div>
  <img src="img/icon_up.png" alt="" class="arrow-up pt-page-moveIconUp"> </div>
<div id="page-content">
  <div class="page page-1 page-current"></div>
  <div class="page page-2 hide"></div>
  <div class="page page-3 hide"></div>
  <div class="page page-4 hide"></div>
  <div class="page page-5 hide"></div>
  <div class="page page-6 hide"></div>
  <div class="page page-7 hide"></div>
  <div class="page page-8 hide"></div>
  <div class="page page-9 hide">
    <div class="btn-group"> <a href="http://www.cqetom.live//"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_joinus.png" alt=""> </a><br>
      <a href="http://www.cqetom.live//"> <img class="pt-page-rotateUnfoldTop hide" src="img/btn_weixin.png" alt=""> </a> </div>
  </div>
</div>
<div id="page-ft"></div>
<script type="text/javascript" src="js/zepto.min.js"></script> 
<script type="text/javascript" src="js/touch.js"></script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子