技术相关

JS控制图片显示的大小（图片等比例缩放）

 
代码

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<br />
原图显示（534 X 800）<br />
onload="AutoResizeImage(0,0,this)<br />
<a href="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
onload="AutoResizeImage(250,0,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)"  alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
onload="AutoResizeImage(0,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)"  alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
onload="AutoResizeImage(250,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)"  alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br />
onload="AutoResizeImage(400,512,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)"  alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br />
onload="AutoResizeImage(300,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)"  alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />
原图444 x 207,压缩为 500 x 600,将保持原图显示<br />
onload="AutoResizeImage(500,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)"  alt="444 X 207"/></a><br /><br />
</body>
</html>

效果图：

效果图：

JS控制图片显示的大小（图片等比例缩放）

2014年9月7日 by 技术相关

兼容 IE,Firefox 的图片自动缩放 CSS

方法一 

.Image {  
    max-width:600px;height:auto;cursor:pointer;  
    border:1px dashed #4E6973;padding: 3px;  
    zoom:expression( function(elm) {  
        if (elm.width>560) {  
            var oldVW = elm.width; elm.width=560;  
            elm.height = elm.height*(560 /oldVW); 
        } 
        elm.style.zoom = '1'; 
    }(this));
}

方法二 

.thumbImage {max-width: 100px;max-height: 100px;} /* for Firefox & IE7 */
* html .thumbImage { /* for IE6 */
width: expression(this.width > 100 && this.width > this.height ? 100 : auto);
height: expression(this.height > 100 ? 100 : auto);

方法三 

<div id="pic"><img src=http://xxxxx.com/images/zidian_s.gif /></div>
<script language="javascript">
var cfg = {
 maxWidth  :  480,
 maxHeight  :  480
} ;

lstImg = document.getElementById('pic').getElementsByTagName('img'); 
for (var i = 0; i < lstImg.length; i++) {
 var tmpW, tmpH;
 var img = lstImg[i];
 tmpW = img.width;
 tmpH = img.height;
 if (tmpW > cfg.maxWidth && tmpH > cfg.maxHeight) {
  if (tmpW / cfg.maxWidth > tmpH / cfg.maxHeight) {
   img.width = cfg.maxWidth;
   img.height = cfg.maxHeight * (cfg.maxWidth / tmpW);
  }
 }
 else {
  if (tmpW > cfg.maxWidth) {
   img.width = cfg.maxWidth;
   img.height = cfg.maxHeight * (cfg.maxWidth / tmpW);
  }
  else if (tmpH > cfg.maxHeight) {
   img.height = cfg.maxHeight;
   img.width = cfg.maxWidth * (cfg.maxHeight / tmpH);
  }
 }
}

</script>

2014年9月7日 by 技术相关

javascript获取url参数

function GetUrlParms()    
{
    var args=new Object();   
    var query=location.search.substring(1);//获取查询串   
    var pairs=query.split("&");//在逗号处断开   
    for(var   i=0;i<pairs.length;i++)   
    {   
        var pos=pairs[i].indexOf('=');//查找name=value   
            if(pos==-1)   continue;//如果没有找到就跳过   
            var argname=pairs[i].substring(0,pos);//提取name   
            var value=pairs[i].substring(pos+1);//提取value   
            args[argname]=unescape(value);//存为属性   
    }
    return args;
}



function settab()
{
    var args = new Object();
    args = GetUrlParms();

    var ParametrUrl=args["act"];
    switch(ParametrUrl)
    {
       case "note":
            document.getElementById("t1").className="tabnosel";
            document.getElementById("t2").className="tabsel";
       break;
      default:
         break;
      break; 
    }

}
2014年9月7日 by 技术相关

兼容IE,Firefox 的图片自动缩放CSS及expression用法

用CSS按比例缩放图片

CSS图片自动适应大小防止表格被撑开或div层被撑开的多种方法css实现按比例限制图片的显示大小。css ie中最小（最大）高度（宽度） 的处理方法用CSS如何控制网页中图片自适应大小用CSS来控制图片显示大小用CSS控制图片自适应大小的方法

兼容IE、Firefox 

img { max-width:200px; max-height:200px; }
*html img { width: expression(this.width > 200 && this.width > this.height ? 200 : auto); height: expression(this.height > 200 ? 200 : auto); }

 IE7 FF支持max-width/max-height,IE6不支持，FF不支持expression,IE支持。
2. expression例子
鼠标经过时改变颜色  

input {star : expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }
<a href=”link1.htm” onfocus=”this.blur()”>link1</a>去除链接虚框
img {margin-top: expression(( 150 - this.height ) / 2);}

 图片在容器里垂直居中显示，150是容器高

2014年9月7日 by 技术相关

IE8.0下DIVCSS网站不居中解决办法

一种在客户端解决 

其实解决方法很简单。用IE8浏览器打开你的网站，如果发现错位问题，请不用惊慌。在菜单栏上，打开“工具”选项，在下拉菜单里找到“兼容性视图”，勾选上，你再看，是不是网站没再错位了。 

二网站本身解决 

IE8对margin:0 auto;这个CSS好像不再有用了，页面不能居中啦，下午回来再看看有什么办法居中，太平洋的前端也说他们公司无视IE8的存在，测试还是以前的版本。 
原因找到啦，我把margin:0 auto;写在了body标签中，IE7以下都可以居中，IE8就不行，解决办法是，把这代码写在div大框架中就可以了。 

百度搜索的资料： 

程序代码  

<style type="text/css"> 
body{text-align:center;width:100%;} 
#wrap{ 
text-align:left; 
width:560px; 
margin:0 auto; 
border:1px solid #333; 
background-color:#ccc; 
} 
</style> 
<div id="wrap"> 在所有浏览器中都有效的方法: <pre> 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法: 在所有浏览器中都有效的方法: 
</pre> 
</div>

2014年9月7日 by 技术相关

手机网站宽度自动适应手机屏幕

方法一： 

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是： 


<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

方法二：

把这段 

<!DOCTYPE ........>

替换为这段 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

注：此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条，解决方法就是加上方法一的代码

2014年9月7日 by 技术相关

JS判断手机访问

       现在手持设备越来越高级了，网页访问必须等跟上。一般为了适应手机的访问，大多数网站就设置一个简版或者是文字版用来提供手机访问。对于静态化的网站来说，要判断访问是客户端用的是什么系统还是有点麻烦的，下面这段代码可以帮你解决这问题。 

<script>
var system ={
win : false,
mac : false,
xll : false
};

//检测平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//跳转语句
if(system.win||system.mac||system.xll){
alert(system.mac)
}else{
window.location.href="手机访问地址";
}
</script>


2014年9月7日 by 技术相关

ecshop中添加搜索历史记录

首先申明本功能是为手机页面做的， 设计到两个页面 search.php,  search_list.php。

在search_list.php中添加历史记录： 

/*记录搜索历史记录*/
if (!empty($_COOKIE['ECS']['keywords']))
{
$history = explode(',', $_COOKIE['ECS']['keywords']);

array_unshift($history, $keywords); //在数组开头插入一个或多个元素
$history = array_unique($history);  //移除数组中的重复的值，并返回结果数组。

setcookie('ECS[keywords]', implode(',', $history), gmtime() + 3600 * 24 * 30);
} 
else
{
setcookie('ECS[keywords]', $keywords, gmtime() + 3600 * 24 * 30);
}

在 search.php 中取出历史记录
if (!empty($_COOKIE['ECS']['keywords']))
{
$histroy = explode(',',$_COOKIE['ECS']['keywords']);
foreach ($histroy as $key=>$val)
{
$histroy_list[$key]['histroy'] = $val;
} 
}

2014年8月21日 by 技术相关

ecshop订单表状态判断

ecshop数据库订单状态判断

order_info 表


刚下完订单

order_status 0      shipping_status 0      pay_status 0

取消

order_status 2      shipping_status 0       pay_status 0

确认

order_status 1     shipping_status 0        pay_status 0

已付款

order_status 1     shipping_status 0       pay_status 2

配货中

order_status 1    shipping_status 3       pay_status 2

已发货

order_status 5    shipping_status 1      pay_status 2

已收货

order_status 5   shipping_status 2       pay_status 2

退货

order_status 4   shipping_status 0      pay_status 0

/* 订单状态 */

define(‘OS_UNCONFIRMED’, 0); // 未确认

define(‘OS_CONFIRMED’, 1); // 已确认

define(‘OS_CANCELED’, 2); // 已取消

define(‘OS_INVALID’, 3); // 无效

define(‘OS_RETURNED’, 4); // 退货

/* 支付类型 */

define(‘PAY_ORDER’, 0); // 订单支付

define(‘PAY_SURPLUS’, 1); // 会员预付款

/* 配送状态 */

define(‘SS_UNSHIPPED’, 0); // 未发货

define(‘SS_SHIPPED’, 1); // 已发货

define(‘SS_RECEIVED’, 2); // 已收货

define(‘SS_PREPARING’, 3); // 备货中

/* 支付状态 */

define(‘PS_UNPAYED’, 0); // 未付款

define(‘PS_PAYING’, 1); // 付款中

define(‘PS_PAYED’, 2); // 已付款

$_LANG[‘os’][OS_UNCONFIRMED] = ‘未确认’;0

$_LANG[‘os’][OS_CONFIRMED] = ‘已确认’;1

$_LANG[‘os’][OS_CANCELED] = ‘ 取消‘;2

$_LANG[‘os’][OS_INVALID] = ‘无效‘;3

$_LANG[‘os’][OS_RETURNED] = ‘退货‘;4

$_LANG[‘ss’][SS_UNSHIPPED] = ‘未发货’;

$_LANG[‘ss’][SS_PREPARING] = ‘配货中’;

$_LANG[‘ss’][SS_SHIPPED] = ‘已发货’;

$_LANG[‘ss’][SS_RECEIVED] = ‘收货确认’;

$_LANG[‘ps’][PS_UNPAYED] = ‘未付款’;

$_LANG[‘ps’][PS_PAYING] = ‘付款中’;

$_LANG[‘ps’][PS_PAYED] = ‘已付款’;

订单的处理判断

while ($row = $GLOBALS[‘db’]->fetchRow($res))

{

//

if ($row[‘order_status’] == OS_UNCONFIRMED)

{

$row[‘handler’] = ““.$GLOBALS[‘_LANG’][‘cancel’].”“;

}

else if ($row[‘order_status’] == OS_CONFIRMED)

{

/* 对配送状态的处理 */

if ($row[‘shipping_status’] == SS_SHIPPED)

{

@$row[‘handler’] = ““.$GLOBALS[‘_LANG’][‘received’].”“;

}

elseif ($row[‘shipping_status’] == SS_RECEIVED)

{

@$row[‘handler’] = ‘‘.$GLOBALS[‘_LANG’][‘ss_received’] .’‘;

}

else

{

if ($row[‘pay_status’] == PS_UNPAYED)

{

@$row[‘handler’] = “‘ .$GLOBALS[‘_LANG’][‘pay_money’]. ‘‘;

}

else

{

@$row[‘handler’] = “‘ .$GLOBALS[‘_LANG’][‘view_order’]. ‘‘;

}

}

}

else

{

$row[‘handler’] = ‘‘.$GLOBALS[‘_LANG’][‘os’][$row[‘order_status’]] .’‘;

}

2014年8月21日 by 技术相关
2024 年 4 月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
2930