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 相关文章推荐
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
json前后端数据交互相关代码
Sep 19 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
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
js null undefined 空区别说明
2010/06/13 Javascript
javascript动态加载三
2012/08/22 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL