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

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

WBOY

Lepaskan： 2016-05-16 15:59:56

asal

1340 orang telah melayarinya

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>

Salin selepas log masuk

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.');
    });

Salin selepas log masuk

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
});

Salin selepas log masuk

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