Heim >Web-Frontend >js-Tutorial >用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]_javascript技巧

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

WBOYOriginal: 2016-05-16 19:13:211390Durchsuche

功能：

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

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

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

结构：

源代码：

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

<div class="sideBlock" onmouseover="g_b_ccn (this, 'borderColor', 'borderColorNone');" onmouseout="g_b_ccn (this, 'borderColorNone', 'borderColor');"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
           <tr> 
             <td align="center" valign="bottom"> 
 
<div class="t2"> 
            
           <div class="b2"> 
             
            <div class="t1"><img src="http://hiphotos.baidu.com/ouhee/pic/item/2fc52efa66a32c8c9f514652.jpg" alt=""></div> 
    
             
            <div class="m1"> 
              
             <div class="m2"> 
              <img src="http://hiphotos.baidu.com/ouhee/pic/item/56f64282bae68ba70df4d27d.jpg" alt=""    style="max-width:90%"  style="max-width:90%" onload="this.parentNode.parentNode.parentNode.parentNode.style.width=this.offsetWidth+30+'px';"> 
             </div> 
            </div> 
             
            <div class="b1"> 
             <img src="http://hiphotos.baidu.com/ouhee/pic/item/f731cccaa4a65d43f31fe752.jpg" alt=""> 
            </div> 
    
           </div> 
</div> 
</td> 
           </tr> 
</table> 
<p><a href="#">底部底部边边</a></p> 
<p>底部底部边边</p> 
<p>底部底部边边</p> 
</div>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：几款极品的javascript压缩混淆工具_javascript技巧Nächster Artikel：input之怎么清除默认值_表单特效

In Verbindung stehende Artikel

Mehr sehen

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

In Verbindung stehende Artikel

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