您的位置:首页 > 前端开发 > 练手

仿新浪微博九宫格图片预览,仅那个预览的功能

2016-06-23 00:37:02

仿新浪微博的九宫格图片预览,jquery插件,兼容IE7以上,IE6没试过。这个插件主要是预览那部分的功能,至于九宫格,五宫格的自己定义,当点击缩略图时,调用这个插件功能就能预览图片,旋转,查看大图等功能。如下


安装


引入插件(保持插件目录结构,会自动引入css),此插件依赖我写的另一个插件hong.roteateImg.js(图片旋转),如下引入

<script src="//h.hovis.cn/mycode/js/jquery.js"></script>
<script src="//h.hovis.cn/mycode/js/hong.roteateImg.js"></script>
<script src="//h.hovis.cn/mycode/js/previewimg/hong.previewimg.js"></script>

html(我这里只是个示例)

<div class="wrap">
        <ul class="imgs-ul clearfix">
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s13.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
            <li><img src="images/s12_thumb.jpg" class="js-thumb" data-pic="images/s12.jpg"></li>
        </ul>
    </div>


调用

previewImg($thumbWrap,picInfo,curNum,456);

参数1:大容器,就是上边html代码中的div

参数2:数组,格式如这样

[

    {

      thumb:xxx //缩略图地址

       picurl:  //原图地址

    },

     {

      thumb:xxx //缩略图地址

       picurl:  //原图地址

    },

     {

      thumb:xxx //缩略图地址

       picurl:  //原图地址

    }

]

参数三:点击缩略图时传入的索引值,从0开始

参数四:容器的固定宽度


示例:

$(function(){
        $("body").on("click",".js-thumb",function(){
            var $this=$(this);
            //缩略图容器的容器,点开后,插件生成的预览元素也是放到这个容器里,缩略图容器就会隐藏掉
            var $thumbWrap=$this.parent().parent(); 
            var $thumbs=$thumbWrap.find(".js-thumb"); 
            var picInfo=[]; //需要传入九宫格所有图片的缩略图地址和大图地址
            for(var i= 0,l=$thumbs.length;i<l;i++){
                picInfo.push({
                    thumb:$thumbs.eq(i).attr("src"), //缩略图地址
                    picurl:$thumbs.eq(i).attr("data-pic"), //大图地址
                    extra:{} //这个功能暂未开发
                });
            }
            var curNum=$thumbs.index($this); //点了第几个缩略图,弹开后定位至相应图片
            //调用图片预览
            //四个参数分别是 1、最外层容器,即放新元素的容器;2、图片信息数组;
            //3、第几个缩略图(从0开始的);4、容器的固定宽度
            previewImg($thumbWrap,picInfo,curNum,456); 

        });
    });


插件下载地址:

http://hovis.cn/demo/download/hongPreviewImg.zip

more 最近