页面实现滑动JS代码

JavaScript06

页面实现滑动JS代码,第1张

js实现随页面滑动效果的方法。具体如下：

页面向上向下滚动，分享到的模块随着滑动。

要点：

代码如下:

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>

这是自己封装的原生js方法，为了偷懒，用了电jqurey。调用方法如下：

touchs._left(object)//往左滑动，

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明：object的取值可以是一个id("#id")表达式，或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等，只要可以用jqurey通过这个表达式获取到dom对象，这个表达式怎么写都可以。