Home >Web Front-end >JS Tutorial >Adaptive photo album written with xhtml css - similar to Jiugongge [compatible with ff ie6 ie7 opear]_javascript skills

Adaptive photo album written with xhtml css - similar to Jiugongge [compatible with ff ie6 ie7 opear]_javascript skills

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

Function:

1. The picture can be zoomed, and the frame will also change accordingly.

2. After the picture is zoomed, it will be aligned at the bottom. >
3. Slide the mouse up and there will be a dotted line in the border.

结构：

源代码：

<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="#">Bottom bottom edge</a></p>
<p>Bottom bottom edge</p>
<p>Bottom bottom edge</p>
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several top-notch javascript compression and obfuscation tools_javascript skillsNext article：Several top-notch javascript compression and obfuscation tools_javascript skills

See more

Adaptive photo album written with xhtml css - similar to Jiugongge [compatible with ff ie6 ie7 opear]_javascript skills

Related articles