js自适应屏幕滚动效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js自适应屏幕滚动效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.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" />
<link rel="stylesheet" type="text/css" href="CSS/css.css">
<link rel="stylesheet" type="text/css" href="CSS/css3.css">
<title>js自适应屏幕滚动效果代码</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/why.js"></script>
</head>
<body>

<div id="banner">
	<div class="banner">
        <ul>
            <li><img src="images/banner_1.jpg" /></li>
            <li><img src="images/banner_2.jpg" /></li>
            <li><img src="images/banner_3.jpg" /></li>
        </ul>
    </div>
    <div class="bannNav">
        <a href="#">
            <h1>水龙头</h1>
            <h2>THE TAP</h2>
            <img src="images/bannav_2.jpg" />
            <h3 class="time1">&nbsp;</h3>
        </a>
        <a href="#">
            <h1>直杆淋浴</h1>
            <h2>SHOWER</h2>
            <img src="images/bannav_2.jpg" />
            <h3 class="time1">&nbsp;</h3>
        </a>
        <a href="#">
            <h1>浴室镜子</h1>
            <h2>MIRROR</h2>
            <img src="images/bannav_4.jpg" />
            <h3 class="time1">&nbsp;</h3>
        </a>
    </div>
</div>
</body>
</html>

JS代码(why.js):

// JavaScript Document$(window).load(function(){
	var why_obj={
	//可修改区域w_timer:3000,//滚动时间 w_auto:true,//是否自动滚动//不可修改区域w_len:$(".banner li").length,w_f:$("#banner"),w_c:$(".banner"),w_u:$(".banner ul"),w_l:$(".banner ul li"),w_time:null,w_top:0,w_dir:-1,w_h:$(".banner ul li img").get(0).offsetHeight,w_nb:$(".bannNav"),w_curr:0,why_move:function (){
	var obj = this;
	if (obj.w_auto){
	obj.w_time = setInterval(function (){
	obj.w_top = parseInt(obj.w_u.css("top")) + obj.w_dir * obj.w_h;
	if (obj.w_top <= -obj.w_h * obj.w_len){
	obj.w_top = 0;
}
obj.w_curr = Math.abs((obj.w_top / obj.w_h));
	obj.w_u.animate({
	top:obj.w_top}
,300);
	obj.w_nb.find("a").find("h3").css("background","#000");
	obj.w_nb.find("a").eq(obj.w_curr).find("h3").css("background","none");
}
,obj.w_timer)}
else{
	clearInterval(obj.w_time);
	obj.w_time = null;
}
}
,why_onmouse:function (){
	var obj = this;
	obj.w_f.mouseenter(function (){
	clearInterval(obj.w_time);
	obj.w_time = null;
}
) obj.w_f.mouseleave(function (){
	obj.why_move();
}
)}
,why_bannNavClick:function (){
	var obj = this;
	obj.w_nb.find("a").each(function (index){
	obj.w_nb.find("a").eq(index).click(function (){
	var top = -(index * obj.w_h);
	obj.w_u.animate({
	top:top}
,300);
	obj.w_curr = index;
	obj.w_nb.find("a").find("h3").css("background","#000");
	obj.w_nb.find("a").eq(obj.w_curr).find("h3").css("background","none");
	return false;
}
)}
)}
,why_size:function (){
	var obj = this;
	$(window).resize(function (){
	obj.w_h = $(".banner ul li img").get(0).offsetHeight;
	obj.w_c.css({
	"height":obj.w_h + "px"}
);
	obj.w_f.css({
	"height":obj.w_h + "px"}
);
	obj.w_l.css({
	"height":obj.w_h + "px"}
);
	obj.w_curr=0;
	obj.w_u.css({
	"top":"0px","height":obj.w_h * obj.w_len + "px"}
);
	obj.w_nb.find("a").find("h3").css("background","#000")obj.w_nb.find("a").eq(obj.w_curr).find("h3").css("background","none");
}
)}
,whyInit:function (){
	var obj = this;
	obj.w_nb.css({
	"height":43* obj.w_len + "px","top":"50%","margin-top":(-43 * obj.w_len/2) + "px","left":"10%"}
);
	var $img=obj.w_nb.find("img");
	for (var i = 0;
	i < obj.w_len;
	i++){
	var imgSrc = $img.eq(i).attr("src");
	$img.eq(i).parent().css("background","url(" + imgSrc + ") no-repeat");
	$img.eq(i).remove();
}
obj.w_nb.find("a").eq(obj.w_curr).find("h3").css("background","none");
	obj.w_c.css({
	"height":obj.w_h + "px"}
);
	obj.w_f.css({
	"height":obj.w_h + "px"}
);
	obj.w_l.css({
	"height":obj.w_h + "px"}
);
	obj.w_u.css("height",obj.w_h * obj.w_len + "px");
	obj.why_move();
	obj.why_onmouse();
	obj.why_bannNavClick();
	obj.why_size();
}
,loadFunc:function(){
	this.whyInit()}
}
why_obj.loadFunc();
}
)

CSS代码(css3.css):

@charset "utf-8";/* CSS Document */
.time1{transition:all ease-out .3s 0s;-webkit-transition:all ease-out .3s 0s;-moz-transition:all ease-out .3s 0s;-o-transition:all ease-out .3s 0s;}
.timer{transition:background 0.5s;-webkit-transition:background 0.5s;-o-transition:background 0.5s;-moz-transition:background 0.5s;}

CSS代码(global.css):

@charset "utf-8";*{margin:0px;padding:0px;}
html,body,b,div,ul,li,h1,h2,h3,h4,h5,h6,img,pre,form,p,input,td{margin:0px auto;padding:0;font-family:"微软雅黑","宋体",Helvetica,sans-serif;}
ul{list-style-type:none;}
body{font-size:12px;}
td,th{font-family:Arial,Helvetica,sans-serif;font-size:12px;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;border:0;}
input{font-family:Arial,Helvetica,sans-serif;}
.clear{clear:both;height:0px;overflow:hidden;line-height:0px;font-size:0px;}
.clearAll{clear:both;height:0px;line-height:0px;font-size:0px;overflow:hidden;}
a img{border:0px;}
.left{float:left;display:inline;}
.right{float:right;display:inline;}

附件:下载该文件资源,减少时间成本(增值服务)