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 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript实现动态标签云
Oct 16 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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
改变Apache端口等配置修改方法
2008/06/05 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
YII框架关联查询操作示例
2019/04/29 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
7个JS基础知识总结
2014/03/05 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
联谊活动策划书
2014/01/26 职场文书
升旗仪式主持词
2014/03/19 职场文书
应届大学生求职信
2014/07/20 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
详解Python类和对象内容
2021/06/22 Python
Golang 遍历二叉树
2022/04/19 Golang