基于jquery實現頁面視差滾動切換



55 217 73



特效描述:基于jquery實現 頁面視差 滾動切換,基于jquery實現頁面視差滾動切換

代碼結構

1. 引入CSS

<link href="css/global.css" rel="stylesheet" type="text/css">
<link href="css/global.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/default.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/default.js" type="text/javascript"></script>

3. HTML代碼

?<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="css/global.css" rel="stylesheet" type="text/css">  
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>  
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>  
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>  
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>    
</head>    
<body id="default">     
    <div class="pageWidth" id="box_root"> 
      <!-- 頭部導航開始 -->  
      <div id="nav"> 
	<a href="index.html" title="返回引導頁" class="logo_a">前端素材</a>
        <ul id="menu"> 
          <li class="" id="mn_home">
            <a href="index.html#home">網站首頁</a>
          </li>  
          <li id="mn_about" class="selected">
            <a href="index.html#about">前端素材</a>
          </li>  
          <li id="mn_news">
            <a href="index.html#news">新聞資訊</a>
          </li>  
          <li id="mn_products" class="">
            <a href="index.html#products">核心項目</a>
          </li>  
          <li id="mn_chanye" class="">
            <a href="index.html#sector">產業板塊</a>
          </li>  
          <li id="mn_about" class="">
            <a href="index.html#famous">名家寄語</a>
          </li>  
          <li class="last" id="mn_contact">
            <a href="index.html#contact">聯系我們</a>
          </li>   
        </ul> 
      </div>  
      <div class="top_rim"> 
        <a href="index.html#home">回到頂部</a> 
      </div>  
      <!-- 頭部導航結束 -->  
      <div id="box_main"> 
        <div id="home" style="background-position: 50% -110px;"> 
          <div class="sprite1" style="background-position: 50% 550px;"></div>  
          <div class="sprite" style="background-position: 50% 0px;"></div>  
          <div class="screen"></div> 
        </div>  
        <div id="about" style="background-position: 50% -110px;"> 
          <div class="contents"> 
            <div class="about_rim"> 
              <div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="說明頁">
                <!-- 裝飾器樣式開始 -->
<div class="border_05">
  <div class="border_05-topr">
    <div class="border_05-topl">
    </div>
  </div>
  <div class="border_05-mid">
      <div class="borderContent"><div id="FrontSpecifies_show01-1367889271850" class="FrontSpecifies_show01-d3_c1"><div class="comptitle_05"><em><span class="extendLink"><a href="index.html#about_cont" target="_self">更多詳情 +</a></span></em></div><div class="describe htmledit">
       <div class="about_txt">
	     </div></div>
</div>
	  <div class="clearBoth"></div></div>
  </div>
</div>
<!-- 裝飾器樣式結束 -->
              </div> 
            </div> 
          </div>  
          <div class="sprite" style="background-position: 50% 0px;"></div>  
          <div class="screen" style="background-position: 50% 550px;"></div> 
        </div>  
        <div id="about_cont" style="background-position: 50% 0px;"> 
          <div class="contents"> 
            <div class="about_rim"> 
              <p>關于我們</p>
            </div> 
          </div>  
          <div class="sprite" style="background-position: 50% 0px;"></div>  
          <div class="screen" style="background-position: 50% 550px;"></div>  
          <div class="screen1" style="background-position: 50% 110px;"></div> 
        </div>  
        <div id="news" style="background-position: 50% -110px;"> 
          <div class="contents"> 
            <div id="box_news"> 
             <p>新聞資訊</p>
            </div> 
          </div> 
        </div>  
        <div id="products" style="background-position: 50% -110px;"> 
          <div class="pro_list"> 
           <p>核心項目</p>
          </div>  
          <div class="sprite" style="background-position: 50% 0px;"></div>  
          <div class="screen" style="background-position: 50% 220px;"></div> 
        </div>  
        <div id="sector" style="background-position: 50% -110px;"> 
          <div class="contents"> 
            <div class="sector_img"> 
             <p>產業模塊</p>
            </div> 
          </div>  
          <div class="screen" style="background-position: 50% 550px;"></div>  
          <div class="sprite" style="background-position: 50% 0px;"></div> 
        </div>  
        <div id="famous" style="background-position: 50% -90px;"> 
          <div class="contents"> 
            <div class="famous_rim"> 
             <p>名家寄語</p>
            </div> 
          </div>  
          <div class="sprite" style="background-position: 50% 450px;"></div> 
        </div>  
        <div id="contact"> 
          <div class="contents"> 
            <div id="box_contact"> 
              <div class="columnSpace" id="elem-FrontSpecifies_show01-1368432548167" name="說明頁">
                <div id="FrontSpecifies_show01-1368432548167" class="FrontSpecifies_show01-d3_c1"><div class="describe htmledit">
      </div>
</div>
              </div>
            </div>  
          </div>  
          <div class="sprite" style="background-position: 50% 0px;"></div>  
          <div class="screen"></div> 
        </div> 
      </div>  
    </div> 
</body>
</html>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片切換 圖片選項卡 圖標選項卡 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子