jQuery鼠標滾輪控制頁面滾動



54 212 71



特效描述:jQuery 鼠標滾輪控制 頁面滾動,jQuery鼠標滾輪控制頁面滾動

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/zsstyle.css" />
<link rel="stylesheet" type="text/css" href="css/ie9-style.css" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/html5.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<script src="js/sectionscroll.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

3. HTML代碼

<!-- container -->
<section id="section1" class="section section1">
  <article class="sectionWrapper section1Wrapper fadeInDown">
    <div class="sectionTitle">
      <h1 class="txthide">域名3.0</h1>
      <div class="txthide"> <span></span> <span>易名中國手機客戶端</span> </div>
      <div id="gem-back"> <a class="gem-back" href="http://www.cqetom.live//"></a> </div>
      <h2><img src="images/text_01.png" width="260" alt="易名3.0" ></h2>
      <div class="iph_dload"> <a  href="http://www.cqetom.live//" > <img src="images/iphone_dload.png" width="260px" height="85px" alt="ipone下載"> </a> </div>
      <div class="andr_dload"> <a  href="http://www.cqetom.live//" > <img src="images/android_dload.png" width="260px" height="85px" alt="安卓下載"> </a> </div>
    </div>
    <div class="secitonbottombg"> <img src="images/fir_bg.jpg" width="1622px" class="imgpng"/> </div>
    <div class="arrow_down"> <a href="#section2"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section2" class="section section2">
  <article class="sectionWrapper section2Wrapper">
    <div class="secitonbottombg"> <img src="images/sec_bg.jpg"  width="1000"  akt="購買域名"/> </div>
    <div class="arrow_down"> <a href="#section3"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section3" class="section section3">
  <article class="sectionWrapper section3Wrapper">
    <div class="secitonbottombg"> <img src="images/thi_bg.jpg"  width="1128" alt="域名交流"/> </div>
    <div class="arrow_down"> <a href="#section4"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section4" class="section section4">
  <article class="sectionWrapper section4Wrapper">
    <div class="secitonbottombg"> <img src="images/fou_bg.jpg"  width="1128" alt="域名查詢注冊"/> </div>
    <div class="arrow_down"> <a href="#section5"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section5" class="section section5">
  <article class="sectionWrapper section5Wrapper">
    <div class="secitonbottombg"> <img src="images/fif_bg.jpg"  width="668" alt="域名管理"/> </div>
    <div class="arrow_down"> <a href="#section6"> <img src="images/arrow_down.png" width="42px" height="24px" alt="arrow_down"> </a> </div>
  </article>
</section>
<section id="section6" class="section section6">
  <article class="sectionWrapper section6Wrapper">
    <div class="secitonbottombg"> <img src="images/six_bg.jpg"  width="668" alt="新聞資訊"/> <a href="#" > <img src="images/download.jpg" width="300px" height="105px" alt="立即下載"> </a> </div>
  </article>
</section>
<!--回到頂部-->
<div id="arrow_up" > <a href="http://www.cqetom.live//" > <img src="images/slide_up.png" width="90px" height="90px" alt="回到頂部" > </a> </div>
<script type="text/javascript">
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
$(window).scroll(function(){
	var Yoffset=window.pageYOffset || document.documentElement.scrollTop;
	if (Yoffset> 2* h) {  
		$("#arrow_up").fadeIn(100);
	}else{
		$("#arrow_up").fadeOut(100);
	};
});
$("#arrow_up").bind("click",function(e){
	e.preventDefault();
	$("body").animate({"scrollTop":"0"},1000);
});
</script>  
<script src="js/sectionscroll.js" type="text/javascript"></script> 



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子