文档章节

JS自动缩放页面图片

 蜗牛奔跑
发布于 2015/11/02 10:41
字数 274
阅读 106
收藏 2


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 = $("<img alt=\"加载中...\" title=\"图片加载中...\" src=\"" + loadindPic + "\" />");

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

})


本文转载自:

粉丝 38
博文 615
码字总数 118352
作品 0
海淀
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
常用CSS语句

控制横向和纵向滚动条的显隐? 去掉x轴 去掉y轴 不显 表格变色 禁止复制,鼠标拖动选取 普通iframe页面 iframe自适应高度 IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标 字号缩放 ...

晨曦之光
2012/05/16
338
0
为Web应用程序提速的50条秘技

快速响应网络请求。 避免重定向。排名前1000的网站中,63%使用了重定向。如果不执行重定向的话,页面速度可以提高10%。 避免Meta-refresh。世界上14%的URL使用了Meta-refresh。 尽可能通过C...

knots
2012/12/12
120
2
Web设计与开发终极资源大全(上)

Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专...

红薯
2010/03/18
1K
3
12 月份 10 个新鲜的 jQuery 插件和教程

1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行...

红薯
2011/12/30
3.2K
6

没有更多内容

加载失败,请刷新页面

加载更多

学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
45分钟前
7
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
10
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
14
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
17
0
【Medium 万赞好文】ViewModel 和 LIveData:模式 + 反模式

原文作者: Jose Alcérreca 原文地址: ViewModels and LiveData: Patterns + AntiPatterns 译者:秉心说 View 和 ViewModel 分配责任 理想情况下,ViewModel 应该对 Android 世界一无所知。...

秉心说
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部