今天给大家带来一款基于jQuery的图片相册滑出放大插件。点击相册图片，展示该图片。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.。效果图如下：
实现的代码。
html代码：
<div class="menu">
<a href="index.html">演示1（默认）</a> <a class="cur" href="index_2.html">演示2（无动画）</a>
<a href="index_3.html">演示3（自动播放）</a>
</div>
<div class="plusview">
<ul>
<li><a href="images/1b.jpg" data-type="image">
<img src="data:images/1s.jpg" alt="">
</a></li>
<li><a href="images/2b.jpg" data-type="image">
<img src="data:images/2s.jpg" alt="">
</a></li>
<li><a href="images/3b.jpg" data-type="image">
<img src="data:images/3s.jpg" alt="">
</a></li>
<li><a href="images/4b.jpg" data-type="image">
<img src="data:images/4s.jpg" alt="">
</a></li>
<li><a href="images/5b.jpg" data-type="image">
<img src="data:images/5s.jpg" alt="">
</a></li>
<li><a href="images/6b.jpg" data-type="image">
<img src="data:images/6s.jpg" alt="">
</a></li>
<li><a href="images/7b.jpg" data-type="image">
<img src="data:images/7s.jpg" alt="">
</a></li>
<li><a href="images/8b.jpg" data-type="image">
<img src="data:images/8s.jpg" alt="">
</a></li>
<li><a href="images/9b.jpg" data-type="image">
<img src="data:images/9s.jpg" alt="">
</a></li>
<li><a href="images/10b.jpg" data-type="image">
<img src="data:images/10s.jpg" alt="">
</a></li>
<li><a href="images/11b.jpg" data-type="image">
<img src="data:images/11s.jpg" alt="">
</a></li>
<li><a href="images/12b.jpg" data-type="image">
<img src="data:images/12s.jpg" alt="">
</a></li>
<li><a href="images/13b.jpg" data-type="image">
<img src="data:images/13s.jpg" alt="">
</a></li>
<li><a href="images/14b.jpg" data-type="image">
<img src="data:images/14s.jpg" alt="">
</a></li>
<li><a href="images/15b.jpg" data-type="image">
<img src="data:images/15s.jpg" alt="">
</a></li>
<li><a href="images/16b.jpg" data-type="image">
<img src="data:images/16s.jpg" alt="">
</a></li>
<li><a href="images/17b.jpg" data-type="image">
<img src="data:images/17s.jpg" alt="">
</a></li>
<li><a href="images/18b.jpg" data-type="image">
<img src="data:images/18s.jpg" alt="">
</a></li>
</ul>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/plusview.js"></script>
<script>
$(function () {
$('.plusview').plusview({
height: 400,
hide: "hide",
show: "show"
});
});
</script>
css代码：
.plusview
{
width: 700px;
margin: 0 auto;
overflow: hidden;
}
.plusview ul
{
margin-left: -10px;
list-style-type: none;
}
.plusview li
{
float: left;
margin: 10px 0 0 10px;
display: inline;
}
.plusview img
{
border: 0 none;
}
.PlusView-largeBg
{
background: #fafafa;
text-align: center;
position: relative;
padding: 0 50px;
zoom:;
}
.PlusView-button
{
width: 50px;
position: absolute;
border: 1px solid #f0f0f0;
background: #fff;
}
.PlusView-button span
{
background: url(images/plusview_arrows.png) no-repeat;
display: block;
width: 50px;
height: 50px;
}
.PlusView-button:hover
{
border: 1px solid #d0d0d0;
}
.PlusView-leftArrow
{
left:;
}
.PlusView-leftArrow span
{
background-position: -100px 0px;
}
.PlusView-leftArrow:hover span
{
background-position: -150px 0px;
}
.PlusView-rightArrow
{
right:;
}
.PlusView-rightArrow span
{
background-position: -50px 0px;
}
.PlusView-rightArrow:hover span
{
background-position: 0 0;
}