js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法

更新時(shí)間：2015年04月10日 09:46:48 作者：jingangel

這篇文章主要介紹了js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法,實(shí)例分析了javascript操作頁面元素滾動(dòng)效果的方法,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)分享到隨頁面滾動(dòng)而滑動(dòng)效果的方法。分享給大家供大家參考。具體如下：

頁面向上向下滾動(dòng)，分享到的模塊隨著滑動(dòng)。

要點(diǎn)：

復(fù)制代碼代碼如下:

var scrtop =document.documentElement.scrollTop||document.body.scrollTop;

var height = document.documentElement.clientHeight||document.body.clientHeight;

var top = scrtop + (height - jb51.offsetHeight)/2;

top = parseInt(top);

獲得頁面垂直居中的位置

上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標(biāo)題文檔</title>
<style>
body{margin:0; padding:0; font:12px/1.5 arial; height:2000px;}
#jb51{width:100px; height:200px; line-height:200px;
text-align:center; border:1p solid #ccc;
background:#f5f5f5; position:absolute; left:-100px; top:0;}
#jb51_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 jb51 = document.getElementById("jb51");
 jb51.onmouseover = function(){
 startrun(jb51,0,"left")
 }
 jb51.onmouseout = function(){
 startrun(jb51,-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 - jb51.offsetHeight)/2;
 top = parseInt(top);
 startrun(jb51,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="jb51">
 分享到內(nèi)容
 <span id="jb51_tit">分享到</span>
</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于JavaScript實(shí)現(xiàn)無限加載瀑布流
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)無限加載瀑布流，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
原生JS和jQuery操作DOM對(duì)比總結(jié)
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對(duì)比總結(jié)，文中總結(jié)了很多的對(duì)比，相信對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法
本文詳細(xì)介紹了JavaScript中Date類型的處理方法,包括日期的格式轉(zhuǎn)換和獲取特定月份或周的日期區(qū)間,本文介紹JS日期轉(zhuǎn)化指定格式及獲取月/周日期區(qū)間的方法,感興趣的朋友跟隨小編一起看看吧
2024-09-09
JavaScript聲明變量的這四兄弟(var、let、function、const)
這篇文章主要介紹了JavaScript聲明變量的這四兄弟，主要就是介紹var、let、function、const區(qū)別,需要的朋友可以參考下
2023-02-02
gulp-uglify 與gulp.watch()配合使用時(shí)報(bào)錯(cuò)(重復(fù)壓縮問題)
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器，gulp 和 grunt 非常類似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作。今天在學(xué)習(xí)gulp時(shí)遇到當(dāng)用gulp.watch來監(jiān)聽js文件的變動(dòng)時(shí)出現(xiàn)重復(fù)壓縮問題，下面小編給大家解答下
2016-08-08
JavaScript設(shè)計(jì)模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之模板方法模式原理與用法,結(jié)合實(shí)例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-08-08
js 事件處理函數(shù)間的Event物件是否全等
在非IE，事件對(duì)象Propagation之間的處理函數(shù)，或同dom節(jié)點(diǎn)觸發(fā)的多個(gè)函數(shù)之間的Event物件是全等的。與綁定形式[addEventListener/DOM0]無關(guān)。
2011-04-04
js控制的回到頁面頂端goTop的代碼實(shí)現(xiàn)
在瀏覽網(wǎng)頁的時(shí)候應(yīng)該會(huì)經(jīng)常見到右下角有個(gè)【回到頂端】的懸浮東東，本文也要使用js實(shí)現(xiàn)一下，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-03-03
使用JS手寫一個(gè)類似?Laravel?驗(yàn)證器的表單驗(yàn)證器
這篇文章主要為大家介紹了使用JS手寫一個(gè)類似?Laravel?驗(yàn)證器的表單驗(yàn)證器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
javascript模擬map輸出與去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了javascript模擬map輸出與去除重復(fù)項(xiàng)的方法,通過自定義函數(shù)結(jié)合遍歷與刪除的方法實(shí)現(xiàn)了去除重復(fù)項(xiàng)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02