<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>视觉滚动</title>
<style type="text/css">
*{padding: 0;margin: 0;}
img{max-width: 100%;}
.article{z-index: 2;margin: 0 auto;}
.content{position: relative;margin: 0 auto;background-repeat: no-repeat;background-position: top center;background-attachment: fixed;background-size: cover;height: 1030px;padding-top: 50px;overflow: hidden;}
.content-1{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172602dj4h3k9406d9ud97.jpg);}
.content-2{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172603re0t33x1lm9attmt.jpg);}
.content-3{background-image: url(http://www.w3cfuns.com/data/attachment/album/201408/21/172604wkfusrkbrrdzbqck.jpg);}
.content h1{font: 700 60px Tahoma;padding-left: 20px;}
.animg{position: absolute;left: -1000px;top: 160px;-webkit-transition-duration:1s;}
.detailtitle{position: absolute;left: 0;top: -100px;padding: 10px 20px;background: #333;color: #fff;font-size: 24px;-webkit-transition-duration:2s;}
.detail{position: absolute;left: 2000px;top: 620px;width: 100%;font-size: 16px;-webkit-transition-duration:2s;}
.detailtitle-3{top: 550px;left: -1000px;}
.content-focus .animg{left: 0;top: 160px;left: 20px;}
.content-focus .detail{left: 0;top: 570px;left: 20px;}
.content-focus .detailtitle{top: 500px;left: 20px;}
.content-focus .detailtitle-3{left: 20px;}
.slidecount{position: fixed;right: 10px;bottom: 50%;z-index: 1;}
.slidecount li{margin-bottom: 10px;}
.slidecount li a{display: block;width: 10px;height: 10px;background: gray;border: 3px solid white;overflow: hidden;line-height: 100px;border-radius: 10px;}
.slidecount li a:hover{text-decoration: none;background: white;border: 3px solid orange;}
.slidecount li .focus a{background: orange;border: 3px solid orange;}
</style>
</head>
<body>
<div class="article" style="height:2700px;">
<div class="content content-1" id="n1">
<h1>风景一</h1>
<img class="animg"src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1344651748384.jpg" width="500" height="313"/>
<p class="detailtitle">励志名言</p>
<p class="detail">向着目标奔跑，何必在意折翼的翅膀，只要信心不死，就看的见方向，顺风适合行走，逆风更适合飞翔，人生路上什么都不怕，就怕自己投降。</p>
</div>
<div class="content content-2 content-focus" id="n2">
<h1>风景二</h1>
<img class="animg" src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319163709435.jpg" width="500" height="313" />
<p class="detailtitle">智慧人生</p>
<p class="detail">
淡淡的日子淡然地过。生活如水，人生似茶，再好的茶放到水中一泡，时间久了，也就淡了。也许是棱角平了，或许是成熟稳重了，脚步越来越踏实，日子越来越平淡。人生步入另外一种境界，——淡然。
</p>
</div>
<div class="content content-3" id="n3">
<h1>风景三</h1>
<img class="animg" src="http://images.cnblogs.com/cnblogs_com/sdgjytu/606940/o_1319175496381.jpg" width="500" height="313" />
<p class="detailtitle detailtitle-3">名言警句</p>
<p class="detail">
无论今后的道路多么坎坷，只要抓住今天，迟早会在奋斗中尝到人生的甘甜。抓住人生中的一分一秒，胜过虚度中的一月一年！
</p>
</div>
</div>
<div class="slidecount">
<ul>
<li class="focus"><a href="javascript:;"onclick="scroll('n1')">1</a></li>
<li><a href="javascript:;"onclick="scroll('n2')">2</a></li>
<li><a href="javascript:;"onclick="scroll('n3')">3</a></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var oWinTop;
var oContentH=$(".content").height();
var oContentLen=$(".content").length;
var vIndex=0;
$(".article").css("height",oContentH*oContentLen);
$(".content:eq("+vIndex+")").addClass("content-focus");
$(window).scroll(function(){
oWinTop=$(window).scrollTop();
$(".slidecount li").removeClass("focus");
$(".content").removeClass("content-focus");
if(oWinTop>=0&&oWinTop<oContentH){
vIndex=0;
$(".slidecount li:eq("+vIndex+")").addClass("focus");
$(".content:eq("+vIndex+")").addClass("content-focus");
}else if(oWinTop>=oContentH&&oWinTop<(oContentH*2)){
vIndex=1;
$(".slidecount li:eq("+vIndex+")").addClass("focus");
$(".content:eq("+vIndex+")").addClass("content-focus");
}else{
vIndex=2;
$(".slidecount li:eq("+vIndex+")").addClass("focus");
$(".content:eq("+vIndex+")").addClass("content-focus");
}
})
})
</script>
<script type="text/javascript">
jQuery.getPos=function(e){
var l=0;
var t=0;
var w=jQuery.intval(jQuery.css(e,'width'));
var h=jQuery.intval(jQuery.css(e,'height'));
var wb=e.offsetWidth;
var hb=e.offsetHeight;
while(e.offsetParent){
l+=e.offsetLeft+(e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
e=e.offsetParent;
}
l+= e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
t+= e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
}
jQuery.getClient=function(e){
if(e){
w = e.clientWidth;
h = e.clientHeight;
}else{
w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
}
return {w:w,h:h};
}
jQuery.getScroll = function (e){
if(e){
t = e.scrollTop;
l = e.scrollLeft;
w = e.scrollWidth;
h = e.scrollHeight;
}else{
if(document.documentElement && document.documentElement.scrollTop){
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
}else if(document.body){
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
}return { t: t, l: l, w: w, h: h };
}
jQuery.intval=function (v){
v = parseInt(v);
return isNaN(v) ? 0 : v;
}
jQuery.fn.ScrollTo = function(s){
o = jQuery.speed(s);
return this.each(function(){
new jQuery.fx.ScrollTo(this, o);
})
}
jQuery.fx.ScrollTo = function (e, o){
var z = this;
z.o = o;
z.e = e;
z.p = jQuery.getPos(e);
z.s = jQuery.getScroll();
z.clear = function(){clearInterval(z.timer);z.timer=null};
z.t=(new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t - z.t) / z.o.duration;
if (t>=z.o.duration+z.t) {
z.clear();
setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
}else{
st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
z.scroll(st, sl);
}
}
z.scroll = function (t, l){window.scrollTo(l, t)};
z.timer=setInterval(function(){z.step();},13);
}
</script>
<script type="text/javascript">
function scroll(id){
$("#"+id).ScrollTo(2000);
}
$(function(){
$('.slidecount li').click(function(){
$(this).addClass('focus').siblings().removeClass();
})
})
</script>
</body>
</html>
