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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
小程序实现上下切换位置
Nov 16 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
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP echo()函数讲解
2019/02/15 PHP
js常用函数 不错
2006/09/08 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python 实现登录网页的操作方法
2018/05/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python中dict使用方法详解
2019/07/17 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
几道PHP面试题
2013/04/14 面试题
函授毕业生的自我鉴定
2013/11/26 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书