一个简单的图片弹出层，兼容所有浏览器

关键词：时间:2008年10月10日星期五阅读:265

该代码仅适用于BCMS1.1版本！（使用了BCMS内置的JS函数）

<!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" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="keywords" content="蓝雨设计,蓝雨博客,asp,access,勃客蓝雨" />
<meta name="description" content="蓝雨博客系统基于asp+access 技术开发,程序小巧,功能强大." />
<meta name="copyright" content="蓝雨设计" />
<meta name="author" content="蓝雨" />
<script language="javascript" type="text/javascript" src="/template/lanyu/js/common.js"></script>
<script> 
//简单图片显示，兼容所有浏览器
function showimg(url) {
var url=url.replace("file/preview","file");
var img = new Image(); //创建图像对象
img.src = url; //设置图像源 
// 如果图片已经存在于浏览器缓存，直接调用
if (img.complete) {
showajaxdiv("img","<img src="+url+" onclick=\"hidden_div('ajax-div-img')\" style=\"cursor:pointer;\" alt=\"点击关闭\">",img.width,0);
return; // 直接返回，不再处理onload事件
}else{
//显示提示信息
showajaxdiv("imgline","图片加载中……",200,1);
//图片下载完毕时异步调用
img.onload = function () {
//关闭提示信息
hidden_div("ajax-div-imgline");
//调用显示
showajaxdiv("img","<img src="+url+" onclick=\"hidden_div('ajax-div-img')\" style=\"cursor:pointer;\" alt=\"点击关闭\">",img.width,0);}
}
}
</script> 
<p><img border="0" width="180" src="http://www.iaviva.com/upload_1ahhm/photo/08108182837.jpg" style="cursor:pointer;" onclick="showimg(this.src);return false;"></p>
<p><img border="0" width="180" src="http://www.iaviva.com/upload_1ahhm/photo/08108182943.jpg" style="cursor:pointer;" onclick="showimg(this.src);return false;"></p>
<p><img border="0" width="180" src="http://www.iaviva.com/upload_1ahhm/photo/08108183345.jpg" style="cursor:pointer;" onclick="showimg(this.src);return false;"></p>
</body>
</html>

提示：可以先修改部分代码后再运行

上一篇：很牛的一个效果！下一篇：文本链接渐隐渐显

0条记录访客评论

发表评论