页面向上向下滚动，分享到的模块随着滑动。
要点：
代码如下:
var scrtop =document.documentElement.scrollTop||document.body.scrollTop
var height = document.documentElement.clientHeight||document.body.clientHeight
var top = scrtop + (height - jb51.offsetHeight)/2
top = parseInt(top)
获得页面垂直居中的位置
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body{margin:0padding:0font:12px/1.5 arialheight:2000px}
#jb51{width:100pxheight:200pxline-height:200px
text-align:centerborder:1p solid #ccc
background:#f5f5f5position:absoluteleft:-100pxtop:0}
#jb51_tit{position:absoluteright:-20pxtop:60px
width:20pxheight:60pxpadding:10px 0
background:#06ctext-align:center
line-height:18pxcolor:#fff}
</style>
<script>
window.onload = function(){
var jb51 = document.getElementById("jb51")
jb51.onmouseover = function(){
startrun(jb51,0,"left")
}
jb51.onmouseout = function(){
startrun(jb51,-100,"left")
}
window.onscroll = window.onresize = function(){
var scrtop=document.documentElement.scrollTop||document.body.scrollTop
var height=document.documentElement.clientHeight||document.body.clientHeight
var top = scrtop + (height - jb51.offsetHeight)/2
top = parseInt(top)
startrun(jb51,top,"top")
}
}
var timer = null
function startrun(obj,target,direction){
clearInterval(timer)
timer = setInterval(function(){
var speed = 0
if(direction == "left"){
speed = (target-obj.offsetLeft)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed)
if(obj.offsetLeft == target){
clearInterval(timer)
}else{
obj.style.left = obj.offsetLeft + speed + "px"
}
}
if(direction == "top"){
speed = (target-obj.offsetTop)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed)
if(obj.offsetTop == target){
clearInterval(timer)
}else{
obj.style.top = obj.offsetTop + speed + "px"
}
document.title = obj.offsetTop + ',' + target + ',' +speed
}
},30)
}
</script>
</head>
<body>
<div id="jb51">
分享到内容
<span id="jb51_tit">分享到</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
html,body{
height:100%
}
body,ul,li,a,p,div{padding:0pxmargin:0pxfont-size:14px}
#wrap{
overflow: hidden
width:100%
}
#main{
height:2944px
top:0
position: relative
}
.page{
width:100%
margin:0
}
#page1{
background:#E4E6CE
}
#page2{
background:#6CE26C
}
#page3{
background:#BF4938
}
#page4{
background:#2932E1
}
</style>
<body>
<div id="wrap">
<div id="main">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var wrap = document.getElementById("wrap")
var main = document.getElementById("main")
var hei = document.body.clientHeight
wrap.style.height = hei + "px"
var obj = document.getElementsByTagName("div")
for(var i=0i<obj.lengthi++){
if(obj[i].className == 'page'){
obj[i].style.height = hei + "px"
}
}
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
var startTime = 0, //翻屏起始时间
endTime = 0,
now = 0
//浏览器兼容
if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
document.addEventListener("DOMMouseScroll",scrollFun,false)
}
else if (document.addEventListener) {
document.addEventListener("mousewheel",scrollFun,false)
}
else if (document.attachEvent) {
document.attachEvent("onmousewheel",scrollFun)
}
else{
document.onmousewheel = scrollFun
}
//滚动事件处理函数
function scrollFun(event){
startTime = new Date().getTime()
var delta = event.detail || (-event.wheelDelta)
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
if ((endTime - startTime) <-1000){
if(delta>0 &&parseInt(main.offsetTop) >-(hei*3)){
//向下滚动
now = now - hei
toPage(now)
}
if(delta<0 &&parseInt(main.offsetTop) <0){
//向上滚动
now = now + hei
toPage(now)
}
endTime = new Date().getTime()
}
else{
event.preventDefault()
}
}
function toPage(now){
$("#main").animate({top:(now+'px')},1000) //jquery实现动画效果
//setTimeout("main.style.top = now + 'px'",1000) javascript 实现动画效果
}
</script>
</html>
