js实现分享到随页面滚动而滑动效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现分享到随页面滚动而滑动效果的方法。分享给大家供大家参考。具体如下:

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

要点:

var scrtop =document.documentElement.scrollTop||document.body.scrollTop;

var height = document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - 3water.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;}
#3water{width:100px; height:200px; line-height:200px;
text-align:center; border:1p solid #ccc;
background:#f5f5f5; position:absolute; left:-100px; top:0;}
#3water_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 3water = document.getElementById("3water");
 3water.onmouseover = function(){
 startrun(3water,0,"left")
 }
 3water.onmouseout = function(){
 startrun(3water,-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 - 3water.offsetHeight)/2;
 top = parseInt(top);
 startrun(3water,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="3water">
 分享到内容
 <span id="3water_tit">分享到</span>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
JS常见算法详解
Feb 28 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
You might like
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
vue中appear的用法
2017/08/17 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
angularjs实现猜数字大小功能
2020/05/20 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python web框架学习笔记
2016/05/03 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
院药学专业个人求职信
2013/09/21 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
事业单位考核材料
2014/05/21 职场文书
颐和园导游词
2015/01/30 职场文书
高一军训口号
2015/12/25 职场文书
创业计划书之花店
2019/09/20 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python