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 相关文章推荐
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jQuery filter函数使用方法
May 19 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
详解Angular2响应式表单
Jun 14 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
document.execCommand()的用法小结
2014/01/08 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
js实现拖拽功能
2017/03/01 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
村官学习十八大感想
2014/01/15 职场文书
大气污染防治方案
2014/05/19 职场文书
财务总监岗位职责
2015/02/03 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers