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 相关文章推荐
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
canvas时钟效果
Feb 16 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
php遍历目录viewDir函数
2009/12/15 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php实例分享之二维数组排序
2014/05/15 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript window对象属性整理
2009/10/24 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
网上开店必备创业计划书
2014/01/26 职场文书
2015年助残日活动总结
2015/03/27 职场文书
甲午大海战观后感
2015/06/02 职场文书
大学生支教感言
2015/08/01 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Hive日期格式转换方法总结
2022/06/25 数据库