js实现分享到随页面滚动而滑动效果的方法
本文实例讲述了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:0; padding:0; font:12px/1.5 arial; height:2000px;}
#jb51{width:100px; height:200px; line-height:200px;
text-align:center; border:1p solid #ccc;
background:#f5f5f5; position:absolute; left:-100px; top:0;}
#jb51_tit{position:absolute; right:-20px; top:60px;
width:20px; height:60px; padding:10px 0;
background:#06c; text-align:center;
line-height:18px; color:#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>
希望本文所述对大家的javascript程序设计有所帮助。
-
跟随页面滚动非常的简单，就是设置元素的top值即可，代码量只有20行。 1.准备 HTML <div class="roll"> </div> 2.准备css 一定要记得把动画个加上 body{ min-height: 4000px; } .roll{ position: relati
-
本文向大家介绍JS实现的页面自定义滚动条效果，包括了JS实现的页面自定义滚动条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，conten
-
本文向大家介绍JS平滑无缝滚动效果的实现代码，包括了JS平滑无缝滚动效果的实现代码的使用技巧和注意事项，需要的朋友参考一下 本文我们实现纯JS方式的滚动广告效果。 先show一下成品： 首先是网页样式： 布局如下： 具体的JS实现： 这里要注意的是： scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗
-
本文向大家介绍js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)，包括了js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery
-
本文向大家介绍JS+CSS实现的拖动分页效果实例，包括了JS+CSS实现的拖动分页效果实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍使用jQueryMobile实现滑动翻页效果的方法，包括了使用jQueryMobile实现滑动翻页效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下： 滑动手势在移动设备是很流行的，在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现，但是个人与之前一篇【j