编程 Javascript

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程序设计有所帮助。

js实现分享到随页面滚动而滑动效果的方法

- Author -

jingangel

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js限制文本框输入长度两种限制方式(长度、字节数)

Dec 19 Javascript

Extjs优化(一)删除冗余代码提高运行速度

Apr 15 Javascript

扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路

May 17 Javascript

javascript 原型链维护和继承详解

Nov 26 Javascript

jQuery实现图片走马灯效果的原理分析

Jan 16 Javascript

基于javascript显示当前时间以及倒计时功能

Mar 18 Javascript

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

Jul 22 Javascript

Bootstrap源码解读排版（1）

Dec 23 Javascript

利用vue+elementUI实现部分引入组件的方法详解

Nov 22 Javascript

详解基于vue-cli3快速发布一个fullpage组件

Mar 08 Javascript

详解vue中的父子传值双向绑定及数据更新问题

Jun 13 Javascript

vue实现登录功能

Dec 31 Vue.js

js实现同一页面多个不同运动效果的方法

Apr 10 #Javascript

js实现类似jquery里animate动画效果的方法

Apr 10 #Javascript

js实现类似新浪微博首页内容渐显效果的方法

Apr 10 #Javascript

javascript中关于&& 和 || 表达式的小技巧分享

Apr 10 #Javascript

js简单的点击返回顶部效果实现方法

Apr 10 #Javascript

浅谈JavaScript正则表达式分组匹配

Apr 10 #Javascript

JavaScript实现基于Cookie的存储类实例

Apr 10 #Javascript

You might like

php cout&lt;&lt;的一点看法

2010/01/24 PHP

探讨GDFONTPATH能否被winxp下的php支持

2013/06/21 PHP

php安全配置记录和常见错误梳理(总结)

2017/03/28 PHP

PHP框架实现WebSocket在线聊天通讯系统

2019/11/21 PHP

javascript之更有效率的字符串替换

2008/08/02 Javascript

21个值得收藏的Javascript技巧

2014/02/04 Javascript

JavaScript实现鼠标滑过处生成气泡的方法

2015/05/16 Javascript

jquery ajax 如何向jsp提交表单数据

2015/08/23 Javascript

JS中的forEach、$.each、map方法推荐

2016/04/05 Javascript

JS获取鼠标相对位置的方法

2016/09/20 Javascript

浅谈jquery采用attr修改form表单enctype不起作用的问题

2016/11/25 Javascript

一个简易时钟效果js实现代码

2020/03/25 Javascript

React Native 通告消息竖向轮播组件的封装

2020/08/25 Javascript

微信小程序按钮去除边框线分享页面功能

2018/08/27 Javascript

原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

2019/02/27 jQuery

vue中使用element组件时事件想要传递其他参数的问题

2019/09/18 Javascript

JS实现分页导航效果

2020/02/19 Javascript

浅谈Vue3.0新版API之composition-api入坑指南

2020/04/30 Javascript

跟老齐学Python之用while来循环

2014/10/02 Python

Python中的True,False条件判断实例分析

2015/01/12 Python

Python对列表中的各项进行关联详解

2017/08/15 Python

详解Python在七牛云平台的应用（一）

2017/12/05 Python

Python实现字典的遍历与排序功能示例

2017/12/23 Python

pyqt5与matplotlib的完美结合实例

2019/06/21 Python

Python内置方法和属性应用：反射和单例(推荐)

2020/06/19 Python

Python3如何使用range函数替代xrange函数

2020/10/05 Python

CSS3中的注音对齐属性ruby-align用法指南

2016/07/01 HTML / CSS

水上运动奥特莱斯：Wasterports Outlet

2018/08/08 全球购物

Marc O’Polo俄罗斯官方在线商店：德国高端时尚品牌

2019/12/26 全球购物

傲盾软件面试题

2015/08/17 面试题

财务助理岗位职责

2013/11/10 职场文书

电子商务专业个人的自我评价

2013/12/19 职场文书

俄罗斯商务邀请函

2014/01/26 职场文书

ktv中秋节活动方案

2014/01/30 职场文书

2016年大学生暑期社会实践方案

2015/11/26 职场文书

国庆节到了,利用JS实现一个生成国庆风头像的小工具详解实现过程

2021/10/05 Javascript