js pour obtenir des effets de partage et de glissement grâce aux compétences page scrolls

js pour obtenir des effets de partage et de glissement grâce aux compétences page scrolls_javascript

WBOY

Libérer： 2016-05-16 16:04:57

original

1250 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'utilisation de js pour obtenir l'effet de partage et de glissement lors du défilement de la page. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Faites défiler la page de haut en bas et les modules partagés glisseront avec elle.

Points clés :

Copier le code Le code est le suivant :

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

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

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

top = parseInt(top);

Obtenez la position centrale verticale de la page

Code ci-dessus :

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</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&#63;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&#63;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">
 分享到内容
 <span id="jb51_tit">分享到</span>
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.