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 相关文章推荐
js实现在字符串中提取数字
Nov 05 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 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
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python检测数据类型的方法总结
2019/05/20 Python
python opencv摄像头的简单应用
2019/06/06 Python
Farah官方网站:男士服装及配件
2019/11/01 全球购物
致接力运动员广播稿
2014/02/17 职场文书
销售队伍口号
2014/06/11 职场文书
岗位职责说明书模板
2014/07/30 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电