基于jQuery的图片相册滑出放大插件

今天给大家带来一款基于jQuery的图片相册滑出放大插件。点击相册图片，展示该图片。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

1. <div class="menu">
   
2.         <a href="index.html">演示1（默认）</a> <a class="cur" href="index_2.html">演示2（无动画）</a>
   
3.         <a href="index_3.html">演示3（自动播放）</a>
   
4.     </div>
   
5.     <div class="plusview">
   
6.         <ul>
   
7.             <li><a href="images/1b.jpg" data-type="image">
   
8.                 <img src="images/1s.jpg" alt="">
   
9.             </a></li>
   
10.             <li><a href="images/2b.jpg" data-type="image">
    
11.                 <img src="images/2s.jpg" alt="">
    
12.             </a></li>
    
13.             <li><a href="images/3b.jpg" data-type="image">
    
14.                 <img src="images/3s.jpg" alt="">
    
15.             </a></li>
    
16.             <li><a href="images/4b.jpg" data-type="image">
    
17.                 <img src="images/4s.jpg" alt="">
    
18.             </a></li>
    
19.             <li><a href="images/5b.jpg" data-type="image">
    
20.                 <img src="images/5s.jpg" alt="">
    
21.             </a></li>
    
22.             <li><a href="images/6b.jpg" data-type="image">
    
23.                 <img src="images/6s.jpg" alt="">
    
24.             </a></li>
    
25.             <li><a href="images/7b.jpg" data-type="image">
    
26.                 <img src="images/7s.jpg" alt="">
    
27.             </a></li>
    
28.             <li><a href="images/8b.jpg" data-type="image">
    
29.                 <img src="images/8s.jpg" alt="">
    
30.             </a></li>
    
31.             <li><a href="images/9b.jpg" data-type="image">
    
32.                 <img src="images/9s.jpg" alt="">
    
33.             </a></li>
    
34.             <li><a href="images/10b.jpg" data-type="image">
    
35.                 <img src="images/10s.jpg" alt="">
    
36.             </a></li>
    
37.             <li><a href="images/11b.jpg" data-type="image">
    
38.                 <img src="images/11s.jpg" alt="">
    
39.             </a></li>
    
40.             <li><a href="images/12b.jpg" data-type="image">
    
41.                 <img src="images/12s.jpg" alt="">
    
42.             </a></li>
    
43.             <li><a href="images/13b.jpg" data-type="image">
    
44.                 <img src="images/13s.jpg" alt="">
    
45.             </a></li>
    
46.             <li><a href="images/14b.jpg" data-type="image">
    
47.                 <img src="images/14s.jpg" alt="">
    
48.             </a></li>
    
49.             <li><a href="images/15b.jpg" data-type="image">
    
50.                 <img src="images/15s.jpg" alt="">
    
51.             </a></li>
    
52.             <li><a href="images/16b.jpg" data-type="image">
    
53.                 <img src="images/16s.jpg" alt="">
    
54.             </a></li>
    
55.             <li><a href="images/17b.jpg" data-type="image">
    
56.                 <img src="images/17s.jpg" alt="">
    
57.             </a></li>
    
58.             <li><a href="images/18b.jpg" data-type="image">
    
59.                 <img src="images/18s.jpg" alt="">
    
60.             </a></li>
    
61.         </ul>
    
62.     </div>
    
63.     <script src="js/jquery-1.7.2.min.js"></script>
    
64.     <script src="js/plusview.js"></script>
    
65.     <script>
    
66.         $(function () {
    
67.             $('.plusview').plusview({
    
68.                 height: 400,
    
69.                 hide: "hide",
    
70.                 show: "show"
    
71.             });
    
72.         });
    
73.     </script>

复制代码css代码：

1. .plusview
   
2.         {
   
3.             width: 700px;
   
4.             margin: 0 auto;
   
5.             overflow: hidden;
   
6.         }
   
7.         .plusview ul
   
8.         {
   
9.             margin-left: -10px;
   
10.             list-style-type: none;
    
11.         }
    
12.         .plusview li
    
13.         {
    
14.             float: left;
    
15.             margin: 10px 0 0 10px;
    
16.             display: inline;
    
17.         }
    
18.         .plusview img
    
19.         {
    
20.             border: 0 none;
    
21.         }
    
22.         .PlusView-largeBg
    
23.         {
    
24.             background: #fafafa;
    
25.             text-align: center;
    
26.             position: relative;
    
27.             padding: 0 50px;
    
28.             zoom: 1;
    
29.         }
    
30.         .PlusView-button
    
31.         {
    
32.             width: 50px;
    
33.             position: absolute;
    
34.             border: 1px solid #f0f0f0;
    
35.             background: #fff;
    
36.         }
    
37.         .PlusView-button span
    
38.         {
    
39.             background: url(images/plusview_arrows.png) no-repeat;
    
40.             display: block;
    
41.             width: 50px;
    
42.             height: 50px;
    
43.         }
    
44.         .PlusView-button:hover
    
45.         {
    
46.             border: 1px solid #d0d0d0;
    
47.         }
    
48.         .PlusView-leftArrow
    
49.         {
    
50.             left: 0;
    
51.         }
    
52.         .PlusView-leftArrow span
    
53.         {
    
54.             background-position: -100px 0px;
    
55.         }
    
56.         .PlusView-leftArrow:hover span
    
57.         {
    
58.             background-position: -150px 0px;
    
59.         }
    
60.         .PlusView-rightArrow
    
61.         {
    
62.             right: 0;
    
63.         }
    
64.         .PlusView-rightArrow span
    
65.         {
    
66.             background-position: -50px 0px;
    
67.         }
    
68.         .PlusView-rightArrow:hover span
    
69.         {
    
70.             background-position: 0 0;
    
71.         }

复制代码via:http://www.w2bc.com/Article/17048

【基于jQuery的图片相册滑出放大插件】相关文章

1. 基于jQuery的图片相册滑出放大插件

2. 基于jQuery向下弹出遮罩图片相册

3. 一款基于jQuery的图片分组切换焦点图插件

4. 一款基于jQuery的图片场景标注提示弹窗特效

5. 一款基于jQuery的图片左右滑动焦点图

6. ZOOM - 简单易用的 jQuery 照片相册插件

7. jQuery可放大预览的图片滑块插件

8. 支持鼠标滚轮缩放的图片放大镜效果

9. jQuery图片放大预览插件

10. 基于jQuery的网站首页宽屏焦点图幻灯片

本文来源：https://www.51html5.com/a1453.html