用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

ttx9n · 发表于 2007-5-19 00:00:00

功能：

1.图片可以缩放，外框也随之变动。

2.图片缩放后，居底对齐。

3.鼠标滑上去，边框有虚线。

结构：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="mapbar" /> 
<meta name="keywords" content="mapbar" /> 
<meta name="author" content="www.mapbar.com" /> 
<meta name="robots" content="all" /> 
<title>相册自适应写法 </title>

.sideBlock{float:left;width:150px;height:150x;padding:10px 0px;text-align:center;border:1px solid #fff;margin:10px;}

.sideBlock p{height:24px;line-height:24px;text-align:center;} 
.sideBlock table{margin-bottom:3px;margin:0px auto;} 
.sideBlock table td{height:125px;} 
.sideBlock .t2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/ce38fdcdfae7c9540eb34552.jpg) repeat-x right top;} 
.sideBlock .b2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/2c0860cbea2ba51abf09e652.jpg) repeat-x right bottom;} 
.sideBlock .t1{height:6px;font-size:6px;} 
.sideBlock .m1{background:url(http://hiphotos.baidu.com/ouhee/pic/item/800911461372e90c6a63e552.jpg) repeat-y #fff;} 
.sideBlock .m2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/6ce9cf074a94b1c87a894752.jpg) repeat-y top right;padding:2px 9px 3px 20px;} 
.sideBlock .m2 img{vertical-align:top;} 
.sideBlock .b1{height:7px;font-size:4px;} 
.sideBlock .b1 img{vertical-align:top!important;vertical-align/* */:bottom;}

.borderColor{border:1px dashed #000;}/*边框滑动过颜色*/ 
.borderColorNone{border:1px solid #fff;}/*边框滑动后的颜色*/

</style> 
<script> 
function g_b_ccn(obj, addClass, delClass) { 
    var addReg = new RegExp("\\b" + addClass + "\\b"); 
    var delReg = new RegExp("\\b" + delClass + "\\b"); 
    obj.className = obj.className.replace(delReg, ''); 
    if (!obj.className.match(addReg)) { 
        if (obj.className != "") obj.className += (" "+addClass); 
        else obj.className += addClass; 
    } 
} 
</script>

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
             <td align="center" valign="bottom"> 
 
 
            
            
             
             
    
             
             
              
              
               
              
             
             
             
              
             
    
            
 
</td> 
           </tr> 
</table> 
<p><a href="#">底部底部边边</a></p> 
<p>底部底部边边</p> 
<p>底部底部边边</p>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

w18pvaep · 发表于 2024-4-10 10:18:33

收下来看看怎么样

ajcdn016 · 发表于 2024-5-25 00:18:16

借款金额看了就立刻

81708585 · 发表于 2024-6-16 17:02:15

这个源码还可以

qzdhcgs · 发表于 2024-7-16 04:04:01

飞飞飞飞飞飞飞飞飞飞飞飞飞

ppwxcg · 发表于 2024-9-1 12:34:42

很好，谢谢分享

qwe520 · 发表于 2024-9-5 08:01:23

论坛有你更精彩！

额呵呵 · 发表于 2024-9-11 07:05:06

大家都不容易！

j__j33p · 发表于 2024-9-14 23:47:31

呵呵呵呵呵呵呵a

360784533 · 发表于 2024-9-30 14:42:57

看看怎么样再说

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

相关帖子

[JavaScript] 用xhtml+css写的相册自适应 - 类似九宫格[兼容 ff ie6 ie7 opear ]

相关帖子

[JavaScript] 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]