RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站

 当前位置:主页 >> 网页制作 >> JS >> 文章内容
让文章里图片自动缩小的几种方法
[收藏此页[打印本页]   
来源:互联网  作者:未知  发布时间:2008-01-06

最简单的方法:

以下为引用的内容:
<img border="0" src="图片路径" onload="javascript:if(this.width>500)this.width=500" />
phperz.com

这样可是虽然也可以实现缩图的效果,但是如果图片很大,页面还是会先被撑破,再缩小.


第一种方法:
以下为引用的内容:
<script language="JavaScript">
<!--
var flag=false;

phperz~com


function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
    
if(image.width>0 && image.height>0){ phperz.com
      
flag=true;
      
if(image.width>650){
      
}else{
        
ImgD.width=image.width;

phperz.com


        
ImgD.height=image.height;
      
}
    
}
}
//-->
<
/script>

对应的HTML代码: www~phperz~com

以下为引用的内容:
<img border=0 src="图片路径" onload="javascript:DrawImage(this);" width="650" />

附其他方法供参考:

phperz~com

1、用鼠标拖动来改变大小
以下是代码片段:
以下为引用的内容:
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
phperz~com

newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
<
/script> www.phperz.com
<img src="7say.gif" ondrag="resizeImage(event,this)">
phperz.com

2、用鼠标滚动控制图片大小

以下为引用的内容:
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">
php程序员之家

3、图片标签里用代码控制大小
以下为引用的内容:
<img border="0" src="[!--picurl--]" onload="if(this.width>screen.width-500)this.style.width=screen.width-500;">

phperz~com

4、CSS控制图片大小
1. css2直接实现 (IE暂不支持):
以下为引用的内容:
img{max-width: 500px;}

phperz.com

2. expression实现(IE only):
以下为引用的内容:
img{width:expression(width>500?"500px":width);}

phperz.com

3. 使用js. 方法: 用 document.getElementsByTagName(”IMG”) 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作 phperz.com


 
 相关文章
 
发表评论
全部评论(0条)
 
 站内搜索
 热门搜索 mysql  基础  url  adodb
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长