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

 更新时间:2014年02月12日 09:53:03   作者:  
这篇文章主要介绍了js判断设备是否为PC并调整图片大小,需要的朋友可以参考下

复制代码 代码如下:

<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>

相关文章

  • 原生JS实现翻书特效

    原生JS实现翻书特效

    这篇文章主要为大家详细介绍了原生JS实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 如何在JavaScript中运行.NET Core代码详情

    如何在JavaScript中运行.NET Core代码详情

    这篇文章主要介绍了在JavaScript中运行.NET Core代码详情,DotNetJS可以将C#项目编译为与任何环境兼容的单文件JavaScript库,变可以在JavaScript中运行.NET Core代码,相关操作分享详情,需要的小伙伴可以参考一下
    2022-04-04
  • 详解JavaScript之ES5的继承

    详解JavaScript之ES5的继承

    这篇文章主要介绍了JavaScript之ES5的继承的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 2007/12/23更新创意无限,简单实用(javascript log)

    2007/12/23更新创意无限,简单实用(javascript log)

    在javascript开发过程中,如果总是使用alert的方式调试程序,在某些简单的程序中是可行的. 但是在通常的项目很复杂,这种方式已经很难满足,企业级开发的需要。
    2007-12-12
  • IE浏览器兼容Firefox的JS脚本的代码

    IE浏览器兼容Firefox的JS脚本的代码

    对于经常用js的朋友,有时候一段脚本并不是两个浏览器都兼容的,下面一些对ie和firefox都兼容的一些代码,大家可以学习下。
    2008-10-10
  • 一文详解uniapp中如何使用easycom自定义组件

    一文详解uniapp中如何使用easycom自定义组件

    easycom是uniapp的一种组件自动引入的规则,使用这种规则可以使满足规则的组件无需注册直接使用,下面这篇文章主要给大家介绍了关于uniapp中如何使用easycom自定义组件的相关资料,需要的朋友可以参考下
    2023-05-05
  • Bootstrap风格的zTree右键菜单

    Bootstrap风格的zTree右键菜单

    这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能,实现代码分为html,css和js三部分,代码简单易懂,非常不错,需要的朋友可以参考下
    2017-02-02
  • 微信小程序获取手机验证码的方法

    微信小程序获取手机验证码的方法

    这篇文章主要为大家详细介绍了微信小程序获取手机验证码的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript实现一个多少秒后自动跳转的页面(案例代码)

    JavaScript实现一个多少秒后自动跳转的页面(案例代码)

    最近遇到这样一个需求是用js简单实现一个多少秒后自动跳转的页面,实现代码非常简单,对js自动跳转页面相关知识感兴趣的朋友一起看看吧
    2023-01-01
  • 微信小程序组件化开发的示例介绍

    微信小程序组件化开发的示例介绍

    虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,下面这篇文章主要给大家介绍了关于微信小程序组件化开发的相关资料,需要的朋友可以参考下
    2023-03-03

最新评论