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 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
js尾调用优化的实现
May 23 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 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面向对象精要总结
2014/11/07 PHP
8个必备的PHP功能开发
2015/10/02 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python工厂函数用法实例分析
2018/05/14 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
学python最电脑配置有要求么
2020/07/05 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
往来会计岗位职责
2013/12/19 职场文书
社区学习十八大感想
2014/01/22 职场文书
座谈会主持词
2014/03/20 职场文书
小学生春游活动方案
2014/08/20 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python