cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan animasi tatal mudah effect_jquery

jQuery melaksanakan animasi tatal mudah effect_jquery

WBOY
WBOYasal
2016-05-16 15:06:211787semak imbas

Idea animasi sangat mudah Klik pada elemen pada halaman dan halaman akan menatal ke kedudukan yang ditentukan. Berikut adalah pengenalan kepada hasil penyelidikan saya selama 3 jam tentang Baidu:

Pertama ialah bahagian html: 

<html>
<body>
<a>顶部</a>
<a>中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>
</html>

Mula-mula tambah dua 3499910bf9dac5ae3c52d5ede7383485 Kemudian tambahkan 3499910bf9dac5ae3c52d5ede7383485 elemen: 

<html>
<body>
<a href="javascript:;" id="tab1">顶部</a>
<a href="javascript:;" id="tab2">中部</a>
...<p>持续添加直到出现滚动条</p>...
</body>

href="javascript:;" mungkin bermaksud bahawa elemen boleh mengaktifkan kod js. Jika tidak ditambah, kod tersebut akan menjadi tidak sah. Tidak perlu menambah apabila menggunakan 07cb10094d7fc1aeafbde86dbf86ce42.
Kemudian perkenalkan jquery dan tulis kod: 

<script src="js/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function(){
    $("#tab1").click(function(){
      $("html,body").animate({scrollTop:'0px'},300);
    });
    $("#tab2").click(function(){
      $("html,body").animate({scrollTop:'600px'},300);
    });
  });
</script>

Nota:

1. Sebaiknya tulis kod di bawah pernyataan jquery yang diperkenalkan

2. Id mesti sepadan dengan elemen 3499910bf9dac5ae3c52d5ede7383485

3. "html,badan" mewakili keseluruhan pergerakan

4. ({scrollTop:'600px'},300);

Selepas langkah ini, kod akan dijalankan.

Berikut ialah analisis terperinci kod jquery: 

 $(document).ready(function(){
//这一句都要加，不加会出错，没有实际作用


    $("#tab1").click(function(){
    //$("#tab1")是选择器，click()是方法。意思是说对#tab1使用click方法


      $("html,body").animate({scrollTop:'0px'},300);
      //我理解的scrollTop是个变量属性，代表元素最顶端和当前浏览器显示区域上边沿之间的距离，所以这句话的意思是：让body的上边沿和浏览器可视区域上边沿距离为0px，结果就是回到页面顶端。


    });
    ...
  });
Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.
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：Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)Artikel seterusnya：Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)

Artikel berkaitan

Lihat lagi