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