你的位置: PHP爱好者论坛 -> HTML/XML/CSS ->网页制作常用代码 [精华]

网页制作常用代码 [精华]

lele729
yafeikf

UID
2064 
帖子
111 
积分
1101 
在线时间
54小时 
注册时间
2006-10-26 
最后登录
2011-02-26 
1# lele729 发表于2007-01-07

自适应图片大小的弹出窗口
◆实现此功能的最简单作法是用以下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中测试通过：）
心若水寒
yafeikf

UID
4 
帖子
936 
积分
1710 
在线时间
2168小时 
注册时间
2006-05-17 
最后登录
2015-07-08 
2# 心若水寒 发表于2007-01-07

好东西,收藏
毕业了。。。
freeren
yafeikf

UID
16029 
帖子
26 
积分
7 
在线时间
7小时 
注册时间
2007-04-28 
最后登录
2008-01-28 
3# freeren 发表于2007-05-12

版主，有个小小的请求，为什么现在不多发些关于xhtml的东西呢？
liwenggen
yafeikf

UID
11241 
帖子
1 
积分
0 
在线时间
1小时 
注册时间
2007-01-22 
最后登录
2007-09-17 
4# liwenggen 发表于2007-09-17

顶

顶一下！以后要多多向你请教！呵呵
snowolf
yafeikf

UID
18855 
帖子
2 
积分
1 
在线时间
1小时 
注册时间
2007-09-24 
最后登录
2007-10-24 
5# snowolf 发表于2007-09-24

好东西
wj520
yafeikf

UID
19236 
帖子
3 
积分
2 
在线时间
1小时 
注册时间
2007-10-17 
最后登录
2007-10-17 
6# wj520 发表于2007-10-17

真是好东西呀，谢谢
robrk
yafeikf

UID
19668 
帖子
6 
积分
0 
在线时间
1小时 
注册时间
2007-11-11 
最后登录
2008-03-24 
7# robrk 发表于2008-03-24

好东西，谢谢楼主
tancu
yafeikf

UID
18109 
帖子
6 
积分
8 
在线时间
6小时 
注册时间
2007-08-19 
最后登录
2008-06-01 
8# tancu 发表于2008-04-26

很好很详细，谢谢楼主！
yuanweiphp
yafeikf

UID
22808 
帖子
14 
积分
1 
在线时间
25小时 
注册时间
2008-05-04 
最后登录
2008-09-09 
9# yuanweiphp 发表于2008-07-08

hao
seley
yafeikf

UID
24303 
帖子
4 
积分
4 
在线时间
1小时 
注册时间
2008-08-02 
最后登录
2008-08-02 
10# seley 发表于2008-08-02

这么多啊！有点晕了
首页上一页 123下一页末页
© 2006-2021 PHP爱好者 | 关于我们 | 联系我们 | 免责声明 备案号：湘ICP备19024003号-2