编程 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.GetAllChild(element,deep,condition)使用介绍

Sep 21 Javascript

JS对HTML标签select的获取、添加、删除操作

Oct 17 Javascript

Javascript 多浏览器兼容总结(实战经验)

Oct 30 Javascript

对table和ul实现js分页示例分享

Feb 24 Javascript

jQuery判断复选框是否勾选的原理及示例

May 21 Javascript

jQuery实现TAB风格的全国省份城市滑动切换效果代码

Aug 24 Javascript

Bootstrap实现水平排列的表单

Jul 04 Javascript

微信小程序生命周期详解

Oct 27 Javascript

Angular6封装http请求的步骤详解

Aug 13 Javascript

JS前端模块化原理与实现方法详解

Mar 17 Javascript

js实现简单的随机点名器

Sep 17 Javascript

微信小程序实现简单购物车功能

Dec 30 Javascript

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