cari

Rumah >hujung hadapan web >tutorial js >js untuk mencapai perkongsian dan kesan gelongsor sebagai kemahiran halaman scrolls_javascript

js untuk mencapai perkongsian dan kesan gelongsor sebagai kemahiran halaman scrolls_javascript

WBOY
WBOYasal
2016-05-16 16:04:571258semak imbas

Contoh dalam artikel ini menerangkan kaedah menggunakan js untuk mencapai kesan perkongsian dan gelongsor semasa halaman menatal. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Tatal halaman ke atas dan ke bawah, dan modul yang dikongsi akan meluncur bersamanya.

Isi Penting:

Salin kod Kod adalah seperti berikut:
var scrtop =document.documentElement.scrollTop||document.body.scrollTop ;
var height = document.documentElement.clientHeight||document.body.clientHeight;
var top = scrtop (ketinggian - jb51.offsetHeight)/2;
atas = parseInt(atas);

Dapatkan kedudukan tengah menegak halaman

Kod di atas: 
<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js untuk melaksanakan papan mesej ringkas menggunakan kemahiran DOM operations_javascriptArtikel seterusnya：js untuk melaksanakan papan mesej ringkas menggunakan kemahiran DOM operations_javascript

Artikel berkaitan

Lihat lagi