JS自动缩放页面图片

2019独角兽企业重金招聘Python工程师标准>>> hot3.png


02

 * 缩略图

03

 *

04

 * @param bool isScaling 是否缩放

05

 * @param int width 宽度

06

 * @param int height 高度

07

 * @param string loadindPic 表示“正在加载中”的图片地址

08

 */

09

jQuery.fn.LoadImage = function (isScaling, width, height, loadindPic) {

10

    if (loadindPic == null) {

11

        loadindPic = "../images/msg_img/loading.gif";

12

    }

13

 

14

    return this.each(function () {

15

        var _this = $(this);

16

        var src = $(this).attr("src")

17

            var img = new Image();

18

        img.src = src;

19

 

20

        // 自动缩放图片

21

        var autoScaling = function () {

22

            if (isScaling) {

23

                if (img.width > 0 && img.height > 0) {

24

                    if (img.width / img.height >= width / height) {

25

                        if (img.width > width) {

26

                            _this.width(width);

27

                            _this.height((img.height * width) / img.width);

28

                        } else {

29

                            _this.width(img.width);

30

                            _this.height(img.height);

31

                        }

32

                    } else {

33

                        if (img.height > height) {

34

                            _this.height(height);

35

                            _this.width((img.width * height) / img.height);

36

                        } else {

37

                            _this.width(img.width);

38

                            _this.height(img.height);

39

                        }

40

                    }

41

                }

42

            }

43

        }

44

 

45

        // 处理ff下会自动读取缓存图片

46

        if (img.complete) {

47

            autoScaling();

48

            return;

49

        }

50

        $(this).attr("src", "");

51

        var loading = $("\"加载中...\"");

52

 

53

        _this.hide();

54

        _this.after(loading);

55

        $(img).load(function () {

56

            autoScaling();

57

            loading.remove();

58

            _this.attr("src", this.src);

59

            _this.show();

60

            //$('.photo_prev a,.photo_next a').height($('#big-pic img').height());

61

        });

62

    });

63

}

64

 

65

 

66

// 应用举例

67

$(function () {

68

    $('#Article .content img').LoadImage(true, 660, 660, 'http://127.0.0.12:8088/statics/images/s_nopic.gif');

69

})


转载于:https://my.oschina.net/yonghan/blog/524764

你可能感兴趣的:(python,javascript)