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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
javascript编写简易计算器
2017/05/06 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现日常记账本小程序
2018/03/10 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
历史学专业个人的自我评价
2013/10/13 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
入党介绍人考察意见
2015/06/01 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书