from one unnamed source, i changed from it.
your can see it demo fromhttp://cdn.pk17s.cn/s/htm/sample/jquery.pkBookShelf/index.htm
here is source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Author" content="liandeliang@yahoo.com.cn" />
<meta http-equiv="Copyright" content="pkrss.com" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="all" />
<meta name="Distribution" content="global" />
<meta http-equiv="Cache-Control" content="max-age=3000"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>pkrss - 图片魔法书 </title>
<style type="text/css">
body{
padding:0;
margin:0;
}
/** bookshelf **/
.pkbookshelf:before,.pkbookshelf:after {
content: ".";
display:block;
width: 100%;
height: 25px;
background: #620;
margin: 0;
background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%);
background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620));
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}
.pkbookshelf,.pkbookshelfInner{
width: 100%;
}
.pkbookshelfInner{
border-spacing:0;
background: #270202;
}
.pkbookshelf,.pkbookshelfInner,.pkbookshelfInner tbody,.pkbookshelfInner tr,.pkbookshelfInner tr td {
margin: 0;
padding: 0;
}
.pkbookshelfInner tr td.pkbookshelfInnerVSide {
content: ".";
width: 25px;
height: 100%;
background: #620;
-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
}
/** books **/
.pkbookshelfInnerBody_book {
display: inline-block;
float: left;
}
.pkbookshelfInnerBody_book .pkbookshelfInnerBody_thumbnail {
text-align: center;
width: 138px;
margin: 20px 20px 0 20px;
}
.pkbookshelfInnerBody_book:hover .pkbookshelfInnerBody_thumbnail {
-webkit-transform: scale(1.24, 1.24);
-moz-transform: scale(1.24, 1.24);
-o-transform: scale(1.24, 1.24);
-ms-transform: scale(1.24, 1.24);
transform: scale(1.24, 1.24);
-webkit-transition: -webkit-transform .2s cubic-bezier(.5,.1,.1,1);
-moz-transition: -moz-transform .2s cubic-bezier(.5,.1,.1,1);
-o-transition: -o-transform .2s cubic-bezier(.5,.1,.1,1);
-ms-transition: -ms-transform .2s cubic-bezier(.5,.1,.1,1);
transition: transform .2s cubic-bezier(.5,.1,.1,1);
}
.pkbookshelfInnerBody_book .pkbookshelfInnerBody_thumbnail a{
text-decoration:none;
}
.pkbookshelfInnerBody_book .pkbookshelfInnerBody_thumbnailBody {
height:144px;
width:120px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
background: white;
}
</style>
</head>
<body>
<div class="pkbookshelf">
<table class="pkbookshelfInner">
<tbody>
<tr>
<td class="pkbookshelfInnerVSide"></td>
<td class="pkbookshelfInnerBody">
<div class="pkbookshelfInnerBody_books">
<div class="pkbookshelfInnerBody_book">
<div class="pkbookshelfInnerBody_thumbnail">
<a href="javascript:;">
<span class="pkbookshelfInnerBody_thumbnailBody">
“我们现在可以确定，河南信阳光山县砍伤学生案的犯罪嫌疑人闵拥军，就是受到同村一名60多岁‘全能神’女信徒的影响，才导致了悲剧的发生。”曾多次参与侦破“全能神”邪教组织案件的中国人民公安大学教授、疑难案件犯罪心理分析专家武伯欣教授称。
“河南中南部地区是‘全能神’传播的发源地和重灾区。”武伯欣说，今年12月，“全能神”邪教组织在所谓的“12月21日世界末日”即将到来之际，策划在多个地区提前行动，扩大影响力。
</span>
</a>
</div>
</div>
<div class="pkbookshelfInnerBody_book">
<div class="pkbookshelfInnerBody_thumbnail">
<a href="javascript:;">
<img height="144" src="http://imagery.pragprog.com/products/261/dsproc_largebeta.jpg?1345061523" width="120" />
</a>
</div>
</div>
<div class="pkbookshelfInnerBody_book">
<div class="pkbookshelfInnerBody_thumbnail">
<a href="javascript:"><img height="144" src="http://imagery.pragprog.com/products/256/tpantlr2_largebeta.jpg?1340069054" width="120" /></a>
</div>
</div>
</div>
</td>
<td class="pkbookshelfInnerVSide"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment