文档章节

处理静态页面中的图片,自使用屏幕大小

会飞的篮板球
 会飞的篮板球
发布于 2017/08/30 16:39
字数 259
阅读 3
收藏 0

处理静态页面中的图片,自使用屏幕大小

<script type="text/javascript">
	$(document).ready(function(){
		var _w = parseInt($(window).width());//获取浏览器的宽度
		alert(_w);
		$("img").each(function(i){
		var img = $(this);
		var realWidth;//真实的宽度
		var realHeight;//真实的高度
		//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
		$("<img/>").attr("src", $(img).attr("src")).load(function() {
		/*
		如果要获取图片的真实的宽度和高度有三点必须注意
		1、需要创建一个image对象:如这里的$("<img/>")
		2、指定图片的src路径
		3、一定要在图片加载完成后执行如.load()函数里执行
		*/
		realWidth = this.width;
		alert(realWidth);
		realHeight = this.height;
		//如果真实的宽度大于浏览器的宽度就按照100%显示
		if(realWidth>=_w){
		$(img).css("width","100%").css("height","auto");
		}
		else{//如果小于浏览器的宽度按照原尺寸显示
		$(img).css("width",realWidth+'px').css("height",realHeight+'px');
		}
		});
		});
	}); 
</script>

.replace(/falshStaticLink/g, "A") //jQuery的替换方法

© 著作权归作者所有

共有 人打赏支持
会飞的篮板球
粉丝 0
博文 9
码字总数 3178
作品 0
私信 提问
「前端那些事儿」② 极限性能优化

前言 前端的工作并不仅仅是实现「视觉&交互稿」,想要开发一个高性能易维护的「完美」站点并未易事,针对前端的性能优化贯穿着项目开发的始终,绝不是交互口中的「拖拽工人」! 然而前端优化...

木羽zwwill
2017/11/06
0
0
视网膜New iPad与普通分辨率iPad页面的兼容处理

一、这是篇经验分享 就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是...

大雄小熊
2014/01/21
0
0
移动H5前端性能优化指南

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s...

32氪
2017/07/31
0
0
响应式Web设计(四):响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来...

幸福2胖纸
2013/05/06
0
23
七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧...

祈澈姑娘
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部