js判断设备是否为PC并调整图片大小


Posted in Javascript onFebruary 12, 2014
<html> 
<head> 
<script type="text/javascript"> 
/* 判断设备是否为PC */ 
function isPC() { 
var userAgentInfo = navigator.userAgent; 
var Agents = new Array("Android", "iPhone", "SymbianOS","Windows Phone", "iPad", "iPod"); 
var flag = true; 
for ( var v = 0; v < Agents.length; v++) { 
if (userAgentInfo.indexOf(Agents[v]) > 0) { 
flag = false; 
break; 
} 
} 
return flag; 
} /* 调整图片大小 */ 
function AutoResizeImage(maxWidth, maxHeight, objImg) { 
var img = new Image(); 
img.src = objImg.src; 
var hRatio; 
var wRatio; 
var Ratio = 1; 
var w = img.width; 
var h = img.height; 
wRatio = maxWidth / w; 
hRatio = maxHeight / h; 
if (maxWidth == 0 && maxHeight == 0) { 
Ratio = 1; 
} else if (maxWidth == 0) { // 
if (hRatio < 1) Ratio = hRatio; 
} else if (maxHeight == 0) { 
if (wRatio < 1) Ratio = wRatio; 
} else if (wRatio < 1 || hRatio < 1) { 
Ratio = (wRatio <= hRatio ? wRatio : hRatio); 
} 
if (Ratio < 1) { 
w = w * Ratio; 
h = h * Ratio; 
} 
objImg.height = h; 
objImg.width = w; 
} 
/* 设置不同设备的缩放策略 */ 
function setImg(tagid,pcWidth,pcHeight,appWidth,appHeight){ 
var tag=document.getElementById(tagid); 
var images=tag.getElementsByTagName("img"); 
for(var i=0;i<images.length;i++){ 
if(isPC){ 
AutoResizeImage(pcWidth, pcHeight, images[i]); 
}else{ 
AutoResizeImage(appWidth, appHeight, images[i]); 
} 
} 
} 
window.onload=function(){ 
setImg('imgDIV',300,0,300,0); 
} 
</script> 
</head> 
<body> 
<div id="imgDIV"> 
<img alt="" src="http://192.168.1.116:9999/ffzx/news/20140205/015212022_1.jpg" /> 
<div> 
<img alt="" src="http://192.168.1.116:9999/ffzx/news/20140208/1386835169183.jpg" /> 
</div> 
</div> 
<br> 
</body> 
</html>
Javascript 相关文章推荐
js中document.write的那点事
Dec 12 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
package.json配置文件构成详解
Aug 27 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
PHP7变量处理机制修改
2021/03/09 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
React Native中Navigator的使用方法示例
2017/10/13 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python异常和文件处理机制详解
2016/07/19 Python
Python Requests库基本用法示例
2018/08/20 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python argparse模块使用方法解析
2020/02/20 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
求职信名称怎么写
2014/05/26 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL