【惟星寵物】——CSS/BootStrap/Jquery爬坑之響應式首頁

 

前言:惟星寵物產品官網,分爲首頁、子頁和登陸註冊頁三個頁面,除網頁內容設計與圖片素材的部分使用網上的材料以外,其他內容呈現以及功能模塊所有爲本身重構。css


1、響應式輪播banner

 

 

思路:使用BootStrap自帶的廣告輪播組件(Carousel)app

  • 基本滑動效果    關鍵 → class="carousel"  data-ride="carousel" 調動js,讓圖片動起來
  • 指定輪播時間     關鍵 → data-interval=「2000」 指定輪播時間爲2s
  • 帶方向按鈕的輪播     關鍵 → href=「#Carousel的ID」 關聯最外層,class="carousel-contrl left" data-slide="prev" 控制左(右)輪播,指向前(後)一個
  • 帶圓點導航的輪播    關鍵 →  data-target="#Carousel的ID" 指定跳到哪一個區域的輪播圖,data-slide-to="0" 點擊這個圓點要跳到第幾個圖
複製代碼
 <section class="banner">
  <div id="wode" class="carousel slide" data-ride="carousel" data-interval="2000">
      <div class="carousel-inner">
          <div class="item active">
              <img src="images/banner.png">
          </div>
          <div class="item">
              <img src="images/banner.png">
          </div>
          <div class="item">
              <img src="images/banner.png">
          </div>
          <div class="item">
              <img src="images/banner.png">
          </div>
          <a href="#wode" class="carousel-control left" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a href="#wode" class="carousel-control right" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
          <ul class="carousel-indicators">
              <li class="active" data-target="#wode" data-slide-to="0" ></li>
              <li class="active" data-target="#wode" data-slide-to="1" ></li>
              <li class="active" data-target="#wode" data-slide-to="2" ></li>
              <li class="active" data-target="#wode" data-slide-to="3" ></li>
          </ul>
      </div>
  </div>
  </section>
複製代碼

 

 

2、CSS點擊圖片放大圖片並顯示遮罩

 

 

思路:利用:after、:hover僞類選擇器結合display屬性、transition屬性和transform屬性ide

  • 點擊觸發,不點擊不觸發  關鍵 →pic:after{display:block}點擊圖片觸發顯示遮罩層    li:hover img {transform:scale(1.2)}點擊li觸發圖片變換
  • 放大  關鍵 → transition:0.3s  圖片變換持續時間0.3s    transform:scale(1.2)   圖片寬高都變換至原來1.2倍
複製代碼
.ppcp .container .tu_all ul li .pic{
    position:relative;
    overflow:hidden;
}
.ppcp .container .tu_all ul li .pic:after{
    display: block;
    content: "";
    padding-bottom: 50.4%;
}
.ppcp .container .tu_all ul li img{
    transition: 0.3s;
}
.ppcp .container .tu_all ul li:hover img{
    transform: scale(1.2);
}
複製代碼

 

3、Jquery導航條模式觸發事件

 

 

 

思路:觸發另外一個元素上的事件處理函數函數

  • 在頁面加載後執行事件處理   關鍵 → 自調函數 $(function(){  });
  • 使用Jquery的Id選擇器函數,查找點擊元素,觸發點擊事件,再找處處理元素,觸發處理事件 關鍵 → 兩層id查找嵌套  $('id名’).要觸發的事件(function){};

 

複製代碼
/*導航欄 顯示*/
$(function(){
    $('.nav_tu').click(function(){
        $(".nav_show").fadeIn();
    })
    $('.cha').click(function(){
        $(".nav_show").fadeOut();
    })
    $('.fang').click(function(){
        $(".text").toggle();
    })
});
複製代碼

 

4、Jquery新聞縱向輪播

 

 

思路:使用一次性定時器佈局

  • 任務函數   關鍵 → 定義每次要執行的任務Task     function gd(){ }
  • 啓動定時器   關鍵 → timer = setTimeout(Task,wait)    wait這裏指定時器執行函數的間隔時間(s)
  • 中止等待定時器  關鍵 → clearInterval(timer)   與週期性定時器不一樣,這裏不是中止定時器,而是中止再一次執行的等待
複製代碼
//最新資訊 新聞輪播 定時器
$(document).ready(function(){
     function gd(){
         $('.new_gd_nei').fadeOut(500);
         $('.new_gd_nei').fadeIn(500);
     }
     setInterval(gd,1000);
    function newsgd($item, $gder){
         setTimeout(newsgd,2000,$item.next(),$gder);
         $item.slideUp(1000,function(){
             $item.appendTo($gder).show();
        });
     }
    newsgd($('.gder li:first'),$('.gder'));
})
複製代碼

 

5、Jquery帶按鈕輪播圖

 


 

思路:觸發另外一個元素上的事件處理函數post

  • Jquery的id選擇器查找  關鍵 → 同上面導航條模式觸發事件
  • 獲得li元素內的值   關鍵 → 定義變量count=$(".lb_list a").length  保存li內a元素的元素個數,在經過var i=$(this).text()-1   獲得li元素內的值(數字)查找對應值的元素,添加class屬性,同時爲相鄰兄弟元素移除class屬性
複製代碼
//最新資訊  切換圖片
var time=n=0,count;
$(document).ready(function(){
         count=$(".lb_list a").length;
         $(".lb_list a:not(:first-child)").hide();
         $(".lb_zi li").click(function(){
                 var i=$(this).text()-1;//獲得li元素內的值(數字)
                 n=i;
                 if(i>=count)return;
                 $(".lb_list li").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                 $(this).toggleClass("on");
                 $(this).siblings().removeAttr("class");
         })
})
複製代碼

 

6、animation主體漸入效果

 

 

思路:使用animate.css動畫庫文件自帶效果動畫

  • 漸進式滾入效果   關鍵 → class="animated rollIn"
  • 漸進式淡入效果   關鍵 → class="animated bounceIn"
  • 漸進式左入效果   關鍵 → class="zx_left animated fadeInLeft"
  • 漸進式右入效果   關鍵 → class="zx_right animated fadeInRight"
複製代碼
 <li class="animated rollIn">
           <span class="quan">1</span>
           <h5>企業文化</h5>
           <p>創新,是企業生存和發展的靈魂。企業只有創新纔有發展,企而創新,於是卓越。技術創新、產品創新、服務創新。</p>
 </li>

 <li class=" animated bounceIn">
           <div class="zi_div">
           <h4>個人帥萌 我作主</h4>
           <h5>My handsome Meng I call the shots</h5>
           <span></span>
           </div>
</li>
複製代碼

 

7、Media手寫首頁柵格佈局

 

 

PC端 pad端 手機端

思路:手動添加Madia Query根據不一樣的屏幕類型以及特性執行不一樣的CSSthis

  • 超小屏幕xs(w<=767)手機端   關鍵 → madia (max-width=767px){}
  • 小型屏幕sm(768<=w<=991)pad端   關鍵 → madia (max-width=991px){}
  • 中型屏幕md(992<=w<=1199)PC端   關鍵 → madia (max-width=1199px){}
  • 大型屏幕xs(w>=1200)分辨率比較大的PC端  
複製代碼
@media(max-width:1300px) {
    .zxzx .container .home_top a{
        font-size: 26px;
    }
}
@media(max-width:992px) {
    .zxzx .container .home_top a{
        width:20%;
    }
}
@media(max-width:768px) {
    .zxzx .container .home_top a{
        width:24%;
    }
}
@media(max-width:480px) {
    .zxzx .container .home_top a{
        width:37%;
    }
}
複製代碼

                                                                                                                 注:轉載請註明出處spa

相關文章
相關標籤/搜索