首页 | 小言视角 | 文摘 | 我的收藏 | 我爱我家 | 技术中心 | 学无止境留言本 |
当前位置:首页>>学无止境>>软件应用>>正文
如何让图片自适应表格

文章来源: 文章作者: 发布时间:2006-09-16   字体: [ ]

4、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作

1、用鼠标拖动来改变大小
以下是代码片段:
<SCRIPT LANGUAGE="JavaScript">
function resizeImage(evt,obj){
newX=evt.x
newY=evt.y
obj.width=newX
obj.height=newY
}
</script>
<img src="7say.gif" ondrag="resizeImage(event,this)">


2、用鼠标滚动控制图片大小
以下是代码片段:
<img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(window.event.wheelDelta==120)?-5:+5;">


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


4、CSS控制图片大小
1. css2直接实现: img{max-width: 500px;} (IE暂不支持)
2. expression实现: img{width:expression(width>500?"500px":width);} (IE only)
3. 使用js. 方法: 用 document.getElementsByTagName("IMG") 的方法取得全部img元素 遍历img元素 判断其宽度并做相应操作
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·~
当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。

实现此功能的最简单作法是用以下HTML代码创建一个图像链接:
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>
其中<a>标记的href属性指定全尺寸图片的URL,target属性设置为_blank指定在新窗口中显示该图片;<img>标记的src属性指定缩略图的URL。

如果我们想对显示全尺寸图片的窗口的外观进行某些控制(比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时),则可调用 window.open 方法,该方法接收三个参数,分别指定要打开文件的URL,窗口名及窗口特性,在窗口特性参数中可指定窗口的高度、宽度,是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏,宽、高分别为400、350的窗口中:
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>

这里就提出了个问题,如果所有全尺寸图片都具有统一的大小(比如都是400x350),那么以上代码适用于所有的缩略图片链接(只是href属性指向的全尺寸图片文件不同)。但如果全尺寸图片的大小并不统一,还用以上代码则我们需要先取得每幅全尺寸图片的大小,然后在window.open方法的窗口特性参数中一一设置height和width为正确的值,在图片数量较多的情况下,这显然效率太低了。那么是否有一劳永逸的方法,即让弹出窗口能自动适应要显示图片的大小?通过研究,发现可以使用 DHTML 中的 Image 对象来达到我们的目的,Image 对象可动态装载指定的图片,通过读取其 width 和 height 属性即能获得装入图片的大小,以此来设置弹出窗口的大小,即可实现自适应图片大小的弹出窗口了。下面即是实现代码:

<script language="JavaScript" type="text/JavaScript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 对象是否已创建
if (typeof(imgObj) == "object"){
// 是否已取得了图像的高度和宽度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度,并打开该窗口
// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因为通过 Image 对象动态装载图片,不可能立即得到图片的宽度和高度,所以每隔100毫秒重复调用检查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}

function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 弹出窗口外观参数
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 调用是否来自 checkImg
if (features == null || features == ""){
// 创建图像对象
imgObj = new Image();
// 设置图像源
imgObj.src = theURL;
// 开始获取图像大小
checkImg(theURL, winName)
}
else{
// 打开窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>

使用时将上面的代码放在网页文档的<head></head>标记对中,然后在链接的点击事件中调用OpenFullSizeWindow函数,如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代码在IE 5.x-6.0中测试通过。

使用时将上面的代码放在网页文档的<head></head>标记对中,然后在链接的点击事件中调用OpenFullSizeWindow函数,如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
以上代码在IE 5.x-6.0中测试通过。

用asp实现:
服务器要支持fso;
showpic.asp 文件,代码如下
<!--#include file="ImgWHInfo.asp"> /*调用类*/
<%
IMGPath="icon_lblog.gif"

Set PP=New ImgWHInfo
W = PP.imgW(Server.Mappath(IMGPath))
H = PP.imgH(Server.Mappath(IMGPath))
Set pp=Nothing
if W>500 then
w=500
b=w/500
v=h*b
end if
%>
<img src="icon_lblog.gif" width="<%=w%>" height="<%=b%>" border="0">

ImgWHInfo.ASP 文件,代码如下
<%
Class ImgWHInfo '获取图片宽度和高度的类,支持JPG,GIF,PNG,BMP
Dim ASO
Private Sub Class_Initialize
Set ASO=Server.CreateObject("ADODB.Stream")
ASO.Mode=3
ASO.Type=1
ASO.Open
End Sub
Private Sub Class_Terminate
Err.Clear
Set ASO=Nothing
End Sub

Private Function Bin2Str(Bin)
Dim I, Str
For I=1 To LenB(Bin)
clow=MidB(Bin,I,1)
If ASCB(clow)<128 Then
Str = Str & Chr(ASCB(clow))
Else
I=I+1
If I <= LenB(Bin) Then Str = Str & Chr(ASCW(MidB(Bin,I,1)&clow))
End If
Next
Bin2Str = Str
End Function

Private Function Num2Str(Num,Base,Lens)
Dim Ret
Ret = ""
While(Num>=Base)
Ret = (Num Mod Base) & Ret
Num = (Num - Num Mod Base)/Base
Wend
Num2Str = Right(String(Lens,"0") & Num & Ret,Lens)
End Function

Private Function Str2Num(Str,Base)
Dim Ret,I
Ret = 0
For I=1 To Len(Str)
Ret = Ret *base + Cint(Mid(Str,I,1))
Next
Str2Num=Ret
End Function

Private Function BinVal(Bin)
Dim Ret,I
Ret = 0
For I = LenB(Bin) To 1 Step -1
Ret = Ret *256 + AscB(MidB(Bin,I,1))
Next
BinVal=Ret
End Function

Private Function BinVal2(Bin)
Dim Ret,I
Ret = 0
For I = 1 To LenB(Bin)
Ret = Ret *256 + AscB(MidB(Bin,I,1))
Next
BinVal2=Ret
End Function

Private Function GetImageSize(filespec)
Dim bFlag
Dim Ret(3)
ASO.LoadFromFile(filespec)
bFlag=ASO.Read(3)
Select Case Hex(binVal(bFlag))
Case "4E5089":
ASO.Read(15)
ret(0)="PNG"
ret(1)=BinVal2(ASO.Read(2))
ASO.Read(2)
ret(2)=BinVal2(ASO.Read(2))
Case "464947":
ASO.read(3)
ret(0)="gif"
ret(1)=BinVal(ASO.Read(2))
ret(2)=BinVal(ASO.Read(2))
Case "535746":
ASO.read(5)
binData=ASO.Read(1)
sConv=Num2Str(ascb(binData),2 ,8)
nBits=Str2Num(left(sConv,5),2)
sConv=mid(sConv,6)
While(len(sConv)<nBits*4)
binData=ASO.Read(1)
sConv=sConv&Num2Str(AscB(binData),2 ,8)
Wend
ret(0)="SWF"
ret(1)=Int(Abs(Str2Num(Mid(sConv,1*nBits+1,nBits),2)-Str2Num(Mid(sConv,0*nBits+1,nBits),2))/20)
ret(2)=Int(Abs(Str2Num(Mid(sConv,3*nBits+1,nBits),2)-Str2Num(Mid(sConv,2*nBits+1,nBits),2))/20)
Case "FFD8FF":
Do
Do: p1=binVal(ASO.Read(1)): Loop While p1=255 And Not ASO.EOS
If p1>191 And p1<196 Then Exit Do Else ASO.read(binval2(ASO.Read(2))-2)
Do:p1=binVal(ASO.Read(1)):Loop While p1<255 And Not ASO.EOS
Loop While True
ASO.Read(3)
ret(0)="JPG"
ret(2)=binval2(ASO.Read(2))
ret(1)=binval2(ASO.Read(2))
Case Else:
If left(Bin2Str(bFlag),2)="BM" Then
ASO.Read(15)
ret(0)="BMP"
ret(1)=binval(ASO.Read(4))
ret(2)=binval(ASO.Read(4))
Else
ret(0)=""
End If
End Select
ret(3)="width=""" & ret(1) &""" height=""" & ret(2) &""""
getimagesize=ret
End Function

Public Function imgW(IMGPath)
Dim FSO,IMGFile,FileExt,Arr
Set FSO = Server.CreateObject("Scripting.FileSystemObject")
If (FSO.FileExists(IMGPath)) Then
Set IMGFile = FSO.GetFile(IMGPath)
FileExt=FSO.GetExtensionName(IMGPath)
Select Case FileExt
Case "gif","bmp","jpg","png":
Arr=GetImageSize(IMGFile.Path)
imgW = Arr(1)
End Select
Set IMGFile=Nothing
Else
imgW = 0
End If
Set FSO=Nothing
End Function

Public Function imgH(IMGPath)
Dim FSO,IMGFile,FileExt,Arr
Set FSO = server.CreateObject("Scripting.FileSystemObject")
If (FSO.FileExists(IMGPath)) Then
Set IMGFile = FSO.GetFile(IMGPath)
FileExt=FSO.GetExtensionName(IMGPath)
Select Case FileExt
Case "gif","bmp","jpg","png":
Arr=getImageSize(IMGFile.Path)
imgH = Arr(2)
End Select
Set IMGFile=Nothing
Else
imgH = 0
End If
Set FSO=Nothing
End Function
End Class
%>


↑返回顶部   打印本页   关闭窗口↓  
 
相关信息

·好用的图片缩放代码(js)
·Word中输入商标等符号的快
·解决IIS的Server Applicat
·教程:CSS视频教程
·标记的用法
·DIV+CSS 网页制作的基础
·推荐一个好东西:免费电话
·WinXP系统网络不能互访的

热点文章

·推荐一个好东西:免费电话
·上传软件LeapFtp的使用方
·Flashfxp使用指南(网站文
·如何关闭FlashFXP的被动模
·十大常遇流氓软件完全卸载
·IE最新高危漏洞非官方补丁
·LZK主讲网页制作入门(图
·corelDRAW12教程:女性内衣

推荐文章

 

首页>>学无止境>>软件应用>>
语深深版权所有 2005-2008