随滚动条飘浮移动并显示其坐标的图层特效代码-JS特效-爱易网页

随滚动条飘浮移动并显示其坐标的图层特效代码

日期：2014-05-18　浏览次数：20084 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动层并显示坐标值 by 爱易网特效 js.aiyiweb.com</title>
<script type="text/javascript">
window.onscroll=function ()
{
 var oDiv=document.getElementById('div1');
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
 //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
 var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
 
 startMove(parseInt(t));
}

var timer=null;

function startMove(iTarget)
{
 var oDiv=document.getElementById('div1');
 
 clearInterval(timer);
 timer=setInterval(function (){
  var iSpeed=(iTarget-oDiv.offsetTop)/8;
  iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  
  if(oDiv.offsetTop==iTarget)
  {
   clearInterval(timer);
  }
  else
  {
   oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
  }
  
  txt1.value=oDiv.offsetTop+',目标：'+iTarget;
 }, 30);
}
</script>
</head>

<body style="height:2000px;">
<div style="height:500px;background-color:#999">
<input id="txt1" type="text" style="position:fixed; top:20px;" />
<div id="div1"></div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

相关资料更多>

小灵通两年都无信号顾客起诉联通公司

谁说黑莓没救？他们在悄悄地深耕企业级市场，在这个领域，苹果三星算什么，他们远远不是黑莓的对手

苹果股价突破100美元大关：投资者看好iPhone 6

诺基亚因充电器问题暂停销售Lumia 2520平板电脑

郭美美事件推手被抓 “秦火火”拷问网络底线

雷军会做赔钱生意？迅雷跌破发行价市值仅7亿美元

虚拟运营商前路迷茫业界建议发力车联网

微软小冰复活再战移动端：改与米聊、易信和触宝合作

开个房刷个卡全世界都知道个人隐私成公开秘密

香港云服务器免备案云主机VPS 国内独立IP 独享15M 月付SSD

推荐阅读更多>