Rumah hujung hadapan web tutorial js pemalam jquery melaksanakan paparan imej aliran air terjun example_jquery

pemalam jquery melaksanakan paparan imej aliran air terjun example_jquery

May 16, 2016 pm 04:06 PM
jquery aliran air terjun

Dua pemalam aliran air terjun, batu jquery dan tatal infinite, mencipta contoh paparan gambar aliran air terjun yang paling popular pada masa ini Paparan gambar dengan kesan seperti air terjun dimuatkan secara tidak terhingga dengan menatal gambar dengan tetikus. Pengguna boleh menyemak imbas gambar tanpa had atau memuatkan kandungan tanpa had dengan kesan aliran air terjun.

Kod:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

<script type="text/javascript">

function item_masonry(){

  $('.item img').load(function(){

    $('.infinite_scroll').masonry({

      itemSelector: '.masonry_brick',

      columnWidth:226,

      gutterWidth:15              

    });  

  });

      

  $('.infinite_scroll').masonry({

    itemSelector: '.masonry_brick',

    columnWidth:226,

    gutterWidth:15              

  });

}

  

$(function(){

  

  function item_callback(){

      

    $('.item').mouseover(function(){

      $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');

      $('.btns',this).show();

    }).mouseout(function(){

      $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');

      $('.btns',this).hide();    

    });

      

    item_masonry();

  

  }

  

  item_callback();

  

  $('.item').fadeIn();

  

  var sp = 1

    

  $(".infinite_scroll").infinitescroll({

    navSelector   : "#more",

    nextSelector  : "#more a",

    itemSelector  : ".item",

      

    loading:{

      img: "images/masonry_loading_1.gif",

      msgText: ' ',

      finishedMsg: '木有了',

      finished: function(){

        sp++;

        if(sp>=10){ //到第10页结束事件

          $("#more").remove();

          $("#infscr-loading").hide();

          $("#page").show();

          $(window).unbind('.infscr');

        }

      

    },errorCallback:function(){

      $("#page").show();

    }

      

  },function(newElements){

    var $newElems = $(newElements);

    $('.infinite_scroll').masonry('appended', $newElems, false);

    $newElems.fadeIn();

    item_callback();

    return;

  });

  

});

</script>

Salin selepas log masuk

Gambar demo

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang mempelajari jQuery.

Kenyataan Laman Web ini
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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Feb 27, 2024 pm 06:45 PM

Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Feb 28, 2024 pm 03:12 PM

Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery? Feb 28, 2024 am 08:39 AM

Bagaimana untuk mengalih keluar atribut ketinggian elemen dengan jQuery?

Petua jQuery: Cepat ubah suai teks semua teg pada halaman Petua jQuery: Cepat ubah suai teks semua teg pada halaman Feb 28, 2024 pm 09:06 PM

Petua jQuery: Cepat ubah suai teks semua teg pada halaman

Analisis mendalam: kelebihan dan kekurangan jQuery Analisis mendalam: kelebihan dan kekurangan jQuery Feb 27, 2024 pm 05:18 PM

Analisis mendalam: kelebihan dan kekurangan jQuery

Gunakan jQuery untuk mengubah suai kandungan teks semua teg Gunakan jQuery untuk mengubah suai kandungan teks semua teg Feb 28, 2024 pm 05:42 PM

Gunakan jQuery untuk mengubah suai kandungan teks semua teg

Fahami peranan dan senario aplikasi eq dalam jQuery Fahami peranan dan senario aplikasi eq dalam jQuery Feb 28, 2024 pm 01:15 PM

Fahami peranan dan senario aplikasi eq dalam jQuery

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP Apr 03, 2024 pm 02:52 PM

Ringkasan fungsi operasi fail yang biasa digunakan dalam PHP

See all articles