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压缩混淆工具
May 16 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 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 Undefined index的问题
2009/06/01 PHP
PHP 日常开发小技巧
2009/09/23 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python实现ID3决策树算法
2017/12/20 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
Java servlet面试题
2012/03/04 面试题
优质服务口号
2014/06/11 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
学校隐患排查制度
2015/08/05 职场文书
党章学习心得体会2016
2016/01/14 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
使用javascript解析二维码的三种方式
2021/11/11 Javascript
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers