css 缩略图 显示大图

html-css052

css 缩略图 显示大图,第1张

纯css实现的大图浏览

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

<title>CSS examples - A:hover图片预览效果--By:小web</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

<mce:style type="text/css"><!--

*{

position:relative

}

img {

border:none

}

#room{

width:520px

margin:50px auto

text-align:centerfont-size:13px

}

#room a{

display:block

width:100pxheight:100px

margin:5pxpadding:5px

float:left

line-height:25px

border:1px solid graybackground:#ccc

}

#room a img{

width:100pxheight:100px

}

#room a:hover{/*IE6的bug在这个设置中可以消除*/

background:none

color:#0065FF

z-index:1000

}

#room a:hover img{

display:block

width:200pxheight:200px

margin-left:-100pxpadding:2px

position:absoluteleft:50%top:-50px

border:1px solid graybackground:#fff

}

--></mce:style><style type="text/css" mce_bogus="1">

*{

position:relative

}

img {

border:none

}

#room{

width:520px

margin:50px auto

text-align:centerfont-size:13px

}

#room a{

display:block

width:100px

height:100px

margin:5px

padding:5px

float:left

line-height:25px

border:1px solid graybackground:#ccc

}

#room a img{

width:100pxheight:100px

}

#room a:hover{/*IE6的bug在这个设置中可以消除*/

background:none

color:#0065FF

z-index:1000

}

#room a:hover img{

display:block

width:200pxheight:200px

padding:2px

position:absoluteleft:-25%top:-25%

border:1px solid graybackground:#fff

}</style>

</head>

<body>

<div id="room">

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_1.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_2.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_3.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_4.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_5.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_6.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_7.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_8.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_9.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_10.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_11.jpg" alt="星坐" /></a>

<a href="#" mce_href="#"><img src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" mce_src="http://images.cnblogs.com/cnblogs_com/littleweb/170141/r_12.jpg" alt="星坐" /></a>

</div>

</body>

</html>

代码：

<?php

$szPostContent = $post->post_content

$szSearchPattern = '~<img [^\>]*\ />~'// 搜索所有符合的图片

preg_match_all( $szSearchPattern, $szPostContent, $aPics )

$iNumberOfPics = count($aPics[0])// 检查一下至少有一张图片

?>

<?php if ( $iNumberOfPics >0 ) { ?><?php echo '<span class="miniature" >'.$aPics[0][0].'</span>'?><?php } ?>

以上结束，然后需要在style.css中添加miniature的样式，图片尺寸，width(宽)，height（高）大小自己修改。

如：

.miniature img{width:140pxheight:160pxfloat:leftmargin-right:5pxoverflow:hiddentext-align:centerline-height:22pxpadding:2pxborder:1px solid #ccc}

以此类推，不同地方换不同的class样式就行了。

一般情况下 用css定义 可以制定一个最大宽度会最大高度，这样图片就不会超出列表队列的宽高，不过原图片的比例也要适当才可以

img{max-height:100pxmax-width:200px}