首頁 > web前端 > js教程 > jQuery圖片特效外掛程式Revealing實現拉伸放大_jquery

jQuery圖片特效外掛程式Revealing實現拉伸放大_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 16:02:38
原創
1306 人瀏覽過

點擊圖片,圖片拉伸放大顯示,效果非常棒!

使用方法:

1、head區域引用檔案 jquery.js,photorevealer.js,datouwang.css

2、在檔案中加入區域程式碼

3.圖片個數可以自由增減,增加或刪除

即可

4、如果圖片資訊更多,需要更大的空間,可修改photorevealer.js中第36行的數字

核心程式碼:

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

72

73

74

75

76

77

78

79

80

81

82

$(document).ready(function(){

      

$('.photo_slider').each(function(){

    

  var $this = $(this).addClass('photo-area');

  var $img = $this.find('img');

  var $info = $this.find('.info_area');

      

  var opts = {};

    

  $img.load(function(){

    opts.imgw = $img.width();

    opts.imgh = $img.height();

  });

    

  opts.orgw = $this.width();

  opts.orgh = $this.height();

    

  $img.css ({

    marginLeft: "-150px",

    marginTop: "-150px"

  });

    

  var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);

  

  var $open = $('<a href="#" class="more_info">More Info ></a>').appendTo($this);

    

  var $close = $('<a class="close">Close</a>').appendTo($info);

    

  opts.wrapw = $wrap.width();

  opts.wraph = $wrap.height();

    

  $open.click(function(){

    $this.animate({

      width: opts.imgw,

      height: (opts.imgh+30),

      borderWidth: "10"

    }, 600 );

          

    $open.fadeOut();

      

    $wrap.animate({

      width: opts.imgw,

      height: opts.imgh

    }, 600 );

  

    $(".info_area",$this).fadeIn();

      

    $img.animate({

      marginTop: "0px",

      marginLeft: "0px"

    }, 600 );

      

    return false;

  });

    

  $close.click(function(){

    $this.animate({

      width: opts.orgw,

      height: opts.orgh,

      borderWidth: "1"

     }, 600 );

      

    $open.fadeIn();

      

    $wrap.animate({

      width: opts.wrapw,

      height: opts.wraph

       }, 600 );

      

      $img.animate({

        marginTop: "-150px",

        marginLeft: "-150px"

      }, 600 );

  

    $(".info_area",$this).fadeOut();

    return false;

  });

    

});

  

});

登入後複製

以上所述就是本文的全部程式碼了,希望大家能夠喜歡。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板