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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
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 strtr() 函数使用说明
2008/11/21 PHP
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
Python实现从url中提取域名的几种方法
2014/09/26 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Django框架封装外部函数示例
2019/05/28 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
Python文件操作的面试题
2013/06/22 面试题
Java基础面试题
2012/11/02 面试题
儿科护士自我鉴定
2013/10/14 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
2014年统战工作总结
2014/12/09 职场文书
个人催款函范文
2015/06/24 职场文书
大学生读书笔记范文
2015/07/01 职场文书
客户答谢会致辞
2015/07/30 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫