以下是 360浏览器6.3版本jQuery滑块特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>360�����6.3�汾jQuery����</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
</head>
<body>
<div class="screen first">
<div class="bottom">
<div class="star">
</div>
</div>
<div class="center"></div>
</div>
<div class="middle">
<div class="line"></div>
<div class="automiddle">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
<div class="m5-cover"></div>
<div class="m5"></div>
</div>
<div class="bottom">
<div class="star">
</div>
</div>
</div>
<div class="screen more">
<div class="center2">
<a href="http://13141618.taobao.com/" class="hover"></a>
</div>
</div>
<div class="tip">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<script src="js/jquery.js"></script>
<script>
(function(){
var n = 0;
$(window).scroll(function(){
if(n == 0 && $(window).scrollTop()>150){
n = 1;
$('.line').show().animate({'height':'1800'},1000,function(){
$('.automiddle div').each(function(){
var _this = this;
var top = parseInt($(this).css('top').replace('px',''));
$(_this).css({'top':top-100}).animate({'top':top+30,'opacity':'0.6'},600,function(){
$(_this).animate({'top':top-10,'opacity':'0.8'},200,function(){
$(_this).animate({'top':top,'opacity':'1'},200);
})
})
});
});
}
if($(window).scrollTop()<$(window).height()/2){
$('.tip').css({'background-position':'-6px 0'});
}else if($(window).scrollTop()<$(window).height()/2+1800 && $(window).scrollTop()>=$(window).height()/2){
$('.tip').css({'background-position':'-36px 0'});
}else{
$('.tip').css({'background-position':'-68px -3px'});
}
})
$(window).resize(function(){
$('.screen,.center,.center2').css({'height':$(window).height()});
$('.line').css('left',$(window).width()/2);
$('.hover').css('top',$(window).height()/2+9);
}).resize();
setInterval(function(){
$('.star').animate({'margin-top':'38px'},1000,function(){
$('.star').css('margin-top','16px');
})
},1000);
var b = $('.bottom');
b.eq(0).click(function(){
$('html,body').animate({'scrollTop':$(window).height()},1000);
})
b.eq(1).click(function(){
$('html,body').animate({'scrollTop':$(window).height()+1800},1000);
})
$('.center2 a').click(function(){
external.AppCmd(external.GetSID(window),"","main.openurl","chrome://newtab","1.0",function(r,s){
window.opener=null;
window.open('','_self');
window.close();
})
})
$('.tip a').click(function(){
var i = $(this).index();
if(i==0){
$('html,body').stop(true,true).animate({'scrollTop':0},1000);
}else if(i==1){
$('html,body').stop(true,true).animate({'scrollTop':$(window).height()},1000);
}else if(i==2){
$('html,body').stop(true,true).animate({'scrollTop':$(window).height()+1800},1000);
}
})
$('html,body').animate({'scrollTop':'37px'},100);
})()
</script>
</body>
</html>
CSS代码(zzsc.css):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
.first{background:#00a200;}
.center{background:url(img/t01f7cff3a354dd1b98.png) center center no-repeat;}
.more{background:#4abaec;}
.center2{position:relative;background:url(img/t01f57bbc1da2993a9c.png) center center no-repeat;}
.middle{position:relative;height:1800px;background:#e8ebed;}
.automiddle{margin:0 auto;position:relative;}
.m4{position:relative;background:url(img/t01fbd50b545f104d03.png) no-repeat;width:500px;height:355px;top:-68px;left:241px;margin:0 auto;opacity:0;}
.m3{position:relative;background:url(img/t01a09078852a316c89.png) no-repeat;width:491px;height:357px;top:-44px;left:-232px;margin:0 auto;opacity:0;}
.m2{position:relative;background:url(img/t01ad71e1663b46aed4.png) no-repeat;width:502px;height:382px;margin:0 auto;top:-11px;left:236px;opacity:0;}
.m1{position:relative;background:url(img/t014df9f8be8f83d640.png) no-repeat;width:544px;height:353px;top:75px;left:-238px;margin:0 auto;opacity:0;}
.m5{position:relative;background:url(img/t019666dd8423b12caf.png) no-repeat;width:625px;height:263px;margin:0 auto;left:-15px;top:-283px;opacity:0;}
.line{position:absolute;border-left:3px dotted #cfd6da;height:0;width:0;left:0;top:0;display:none;}
.hover{width:233px;height:66px;display:block;position:relative;margin:0 auto;left:7px;}
.hover:hover{background:url(img/t01ab12a4bd80d78a1a.png);}
.bottom{cursor:pointer;width:75px;height:75px;background:url(img/t01ab12a4bd80d78a1a.png) 75px 0;position:absolute;bottom:-37px;left:50%;margin-left:-36px;z-index:1;}
.star{background:url(img/t01ab12a4bd80d78a1a.png) -617px 46px;width:22px;height:22px;margin:16px 0 0 25px;}
.screen{}
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-100px)}
60%{opacity:0.4;-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}
.tip{width:24px;height:85px;position:fixed;right:60px;top:48%;background:url(img/t01a6da6ce066ce3084.png) -6px 0px;}
.tip a{display:block;width:20px;height:22px;margin-bottom:15px;}
.m5-cover{background:#e8ebed;height:290px;width:5px;position:relative;margin:0 auto;left:2px;}
.lucky:hover{background-position:-70px 0;}
分享到QQ
分享到微博
微信扫一扫
