<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery鼠标滚轮控制页面滑动代码 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/zsstyle.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ie9-style.css" />
<![endif]-->
<script type="text/javascript">
$(function() {
$(window).resize(function() {
imgWH();
}).resize();
function imgWH() {
var i = 0,
imgpnglength = $('.imgpng').length;
for(i=0; i < imgpnglength; i++) {
var imgpng = $('.imgpng').eq(i),
imgpngW = imgpng.width(),
maximgpngW = imgpng.attr("width");
if(imgpngW >= maximgpngW){
imgpng.attr('width', maximgpngW);
} else {
imgpng.attr('width', imgpngW);
}
}
var imgtopW = $('.imgtop').width(),
imgtopH = $('.imgtop').height();
$('.gem-back').css({width:imgtopW*0.375,height:imgtopH*0.19,marginTop:imgtopH*0.259});
}
});
</script>
</head>
<body>
<!-- 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.sucaijiayuan.com/"></a> </div>
<h2><img src="images/text_01.png" width="260" alt="易名3.0" ></h2>
<div class="iph_dload"> <a href="http://www.sucaijiayuan.com/" > <img src="images/iphone_dload.png" width="260px" height="85px" alt="ipone下载"> </a> </div>
<div class="andr_dload"> <a href="http://www.sucaijiayuan.com/" > <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.sucaijiayuan.com/" > <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>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery鼠标滚轮控制页面滑动代码.zip
版权申诉
131 浏览量
2022-11-22
17:15:12
上传
评论
收藏 517KB ZIP 举报
jQuery鼠标滚轮控制页面滑动代码.zip （21个子文件） 
jQuery鼠标滚轮控制页面滑动代码 
jQuery鼠标滚轮控制页面滑动代码.jpg 38KB jiaoben3241 css 
ie9-style.css 123B zsstyle.css 5KB public.css 2KB images fir_bg.jpg 78KB six_bg.jpg 86KB
slide_up.png 2KB text_01.png 8KB android_dload.png 8KB fou_bg.jpg 72KB thi_bg.jpg 82KB fif_bg.jpg 71KB sec_bg.jpg 84KB arrow_down.png 3KB download.jpg 7KB iphone_dload.png 8KB
index.html 5KB js jquery-1.7.2.min.js 93KB html5.js 2KB sectionscroll.js 5KB jquery.mousewheel.min.js 3KB资源评论
