基于jQuery的图片相册滑出放大插件
2024-04-04 18:46:58
今天给大家带来一款基于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;
}
via:http://www.w2bc.com/Article/17048
最新文章
- Xen之初体验：HA（额外附加）
- 【POJ 1523】SPF（割点）
- C++头文件的组织
- truncate/drop表非常慢，怎么办？用硬链接，极速体验
- td内元素居顶，td元素不随高度的撑开而变位置
- ZeroMQ(java)中的数据流SessionBase与SocketBase
- Bochs使用说明
- python学习笔记--Django入门四 管理站点--二
- java获取当前路径的几种方法
- Fruit Ninja(树状数组+思维)
- jquery_api(CSS)
- C# 使用 GDI+ 给图片添加文字，并使文字自适应矩形区域
- JAVA自学笔记10
- DELPHI中完成端口(IOCP)的简单分析(4)
- JS DOM操作（四） Window.docunment对象——操作内容
- SpringBoot（九）-- SpringBoot JDBC
- 秒杀多线程第六篇 经典线程同步 事件Event
- Linq学习以及简单用法
- 美化MFC 之调整静态文本的颜色 字体。 用于添加公司标题 联系方式 口号等数据
- 使用kubeadm部署Kubernetes v1.13.3