cari

Rumah  >  Artikel  >  hujung hadapan web  >  Ringkasan kaedah jQuery untuk mencapai kesan lompatan lancar bagi mata utama dalam page_jquery

Ringkasan kaedah jQuery untuk mencapai kesan lompatan lancar bagi mata utama dalam page_jquery

WBOY
WBOYasal
2016-05-16 15:59:561335semak imbas

Biasanya apabila kita menatal melalui navigasi ke kandungan, kita melakukannya melalui titik sauh Hanya leret dan melompat terus ke kandungan tanpa sebarang kesan tatal Selain itu, pautan URL akan mempunyai "ekor kecil" di hujungnya. sama seperti #keleyi. Hari ini saya akan memperkenalkan kesan khas tatal yang dibuat oleh jquery, yang bukan sahaja boleh menetapkan kelajuan tatal, tetapi juga tidak mempunyai "ekor kecil" pada pautan url. 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery实现页面内锚点平滑跳转</title><base target="_blank" /> 
<style type="text/css"> 
#hovertree { 
height: 800px; 
background: red; 
text-align:center;color:white; 
} 
 
#keleyi { 
height: 800px; 
background: green;text-align:center;color:white; 
} 
 
#myslider { 
height: 800px; 
background: black;text-align:center;color:white; 
} 
 
#zonemenu { 
height: 800px; 
background: yellow;text-align:center; 
} 
 
.keleyilink{position:fixed;} 
.keleyilink a {text-decoration:none;} 
</style> 
</head> 
<body> 
<div class="keleyilink"> 
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> 
<a href="javascript:scroll('keleyi');" target="_self">KKK</a> 
<a href="javascript:scroll('myslider');" target="_self">myslider</a> 
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> 
</div> 
<div id="hovertree">hovertree 
<br /><br /><br /><a href="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</a> 
</div> 
<div id="keleyi">jb51</div> 
<div id="myslider">myslider</div> 
<div id="zonemenu">zonemenu</div> 
<script src="jquery/jquery-1.11.3.min.js"></script> 
<script src="jquery.hovertreescroll.js"></script> 
<script> 
function scroll(id) { 
$("#" + id).HoverTreeScroll(1000); 
} 
</script> 
</body> 
</html>

Kaedah pelaksanaan yang lebih mudah:

Kod hanya mempunyai satu ayat

Salin kod Kod adalah seperti berikut:

$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

Kaedah animate() digunakan untuk melaksanakan satu set animasi tersuai CSS Terdapat dua kaedah panggilan

Borang pertama menerima 4 parameter, seperti yang ditunjukkan di bawah

.animate( sifat [, tempoh] [, pelonggaran] [, lengkap] )

sifat – peta yang mengandungi sifat gaya dan nilai
tempoh – parameter kelajuan pilihan, yang boleh berupa rentetan pratetap atau nilai milisaat
easing – Jenis pelonggaran pilihan hanya mempunyai dua jenis lalai: swing dan linear Untuk menggunakan kesan lain, anda perlu memasang pemalam pelonggaran
lengkap – fungsi panggil balik pilihan, dipanggil apabila animasi tamat

Contoh borang pertama adalah seperti berikut

.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

Kod untuk melaksanakan lompatan anchor point dalam artikel ini menggunakan bentuk pertama

$("html,body") mewakili animasi html atau elemen badan, iaitu, menukar nilai atribut css mereka
scrollTop ialah nilai atribut yang akan ditukar, yang mewakili jarak slaid bar skrol Di sini ia mewakili ketinggian html (badan) yang disembunyikan oleh bahagian atas penyemak imbas selepas menarik bar skrol penyemak imbas ke bawah
. $("#elementid").offset().top ialah ketinggian html (body) yang perlu disembunyikan oleh bahagian atas penyemak imbas Ia mewakili jarak mutlak dari bahagian atas elemen dengan id elementid ke bahagian atas halaman web (bukan bahagian atas kawasan kelihatan penyemak imbas) .
1000 bermakna masa animasi ialah 1 saat

Kaedah animate() juga mempunyai borang panggilan kedua

.animate( sifat, pilihan )

Satu ialah pemetaan atribut dan satu lagi ialah pemetaan pilihan. Malah, parameter kedua di sini merangkumi 2-4 parameter bentuk pertama dalam pemetaan lain, dan menambah dua pilihan. Kod untuk borang kedua adalah seperti berikut: 

.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

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：Kaedah JavaScript untuk menukar tetingkap log masuk dengan mengklik pada kemahiran text_javascriptArtikel seterusnya：Kaedah JavaScript untuk menukar tetingkap log masuk dengan mengklik pada kemahiran text_javascript

Artikel berkaitan

Lihat lagi