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在光标位置插入内容的实现代码
Jun 18 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
JS闭包用法实例分析
Mar 27 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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 输出缓存详解
2009/06/20 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
聊聊Python中的pypy
2018/01/12 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python实现双色球随机选号
2020/01/01 Python
Python常用库大全及简要说明
2020/01/17 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
旅游专业职业生涯规划范文
2014/01/13 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
保护母亲河倡议书
2014/04/14 职场文书
代收款委托书范本
2014/10/01 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Python读取和写入Excel数据
2022/04/20 Python