现在就职于一家P2P平台，自然也会关注同行其它网站的前端技术，今天要仿造的是礼德内页的一个图片查看器效果。不过说白了，无论人人贷也好礼德财富也好，很多地方的前端都做的不尽如人意，比如忽略细节、缺乏交互、滥用插件，像今天要仿造的图片查看器，礼德财富也是直接套用的一款叫fancybox的插件：

个人觉得一名合格的前端还是要少用外部插件，减少代码冗余，也方便自己维护（毕竟自己的代码自己一清二楚）。

今天咱用JQ来做个属于我们自己的图片查看器，刚好我项目也要用到。

还是老样子，大家可以到我的Github上下载本章的源文件查看效果。

原理

个人感觉到也没啥特别的原理好说明，凡涉及动画的，基本都是animate left/top来解决。但这个插件的制作可以说是略为繁琐，制作的过程中也遇到了几个bug，还是需要有点耐心来应对。

本例需要有一个全局变量来保存索引，左右切图是靠这个变量来确定要切到哪一张图的。

展示时，图片上的左右俩箭头不外乎是后续添加上去的<a>标签，宽度均设为30%，默认看不到，鼠标移上去才显示出来。

切图时，通过索引加减值来获取要切入的新图索引，然后绘制新图并淡入，旧图animate并淡出后remove掉，减少文档碎片。

上述提到的bug，主要是remove JQ对象时，要一个一个具体地remove掉，比如

$A.add($B).add($C).remove();

才能彻底清除掉，如果写做

$BF.nextAll().remove(); //$BF是$A、$B、$C前一个元素

//或者

$PARRENT.empty();//$PARRENT是包裹住$A、$B、$C的父元素

会导致切图的时候，按理应该成功被清除掉的旧图却重复显示出来。

页面原型

我们先把页面原型做出来，让缩略图能通过上方的按钮正常切换，这块主要还是对css部分要求比较多：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>picBox</title>

<script src="jquery-1.11.1.js"></script>

<style>

.wrap{width: 350px;height: 500px;border: solid 1px gray;overflow:hidden;}

h1{ margin-bottom:0px;text-align:right; border-bottom:solid 1px #CCCCCC;}

h1 a:hover,.pic_box a:hover{color:blue; cursor:pointer;}

.right_btn{margin:0px 20px;}

.pic_wrap{padding:0px 15px; width:320px; height:430px;}

.pic_box{ float:left; margin:10px 0px;width:150px; height:200px; text-align:center;}

.pic_box a{display:block;width:150px; height:180px; overflow:hidden;}

.pic_box h6{margin:0px;}

.nomoe{opacity:0.3};

</style>

<script type="text/javascript">

    $(function(){

        var index,nums,page=0,shows=4,temp;  //默认一页显示4张图

        var $show_picBox;

        var $left_btn = $("a:first","h1");

        var $right_btn = $("a:last","h1");

        var $picBox = $("div","#pic_wrap");

        var page_count = Math.ceil($picBox.length/shows); //获取页数

        var $a = $("#pic_wrap a");

        var $imgs = $picBox.find("img");

        var $title = $picBox.find("h6");

        temp=shows-1;

        $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide();

        $left_btn.addClass("nomoe");  //默认添加nomore类，表示左按钮不能按、左翻页已到底

        if(page_count<=1) $right_btn.addClass("nomoe");

        $left_btn.click(function(){    //左按钮

            if(page-1>=0){

                --page;

                $right_btn.removeClass("nomoe");

                nums = page*shows-1;

                nums=nums<0?0:nums;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide();

                if(nums==0) $picBox.eq(0).show();

                if(!page) $left_btn.addClass("nomoe"); //左翻页已到底,左按钮不能按

            }

        })

        $right_btn.click(function(){    //右按钮

            if(page+1<page_count){

                ++page;

                $left_btn.removeClass("nomoe");

                nums = page*shows-1;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide(); console.log(page+" "+page_count);

                if(page>=page_count-1) $right_btn.addClass("nomoe"); //右翻页已到底,右按钮不能按

            }

        })

    })

</script>

</head>

<body>

<div class="wrap">

    <h1>

      <a class="left_btn"><</a><a class="right_btn">></a>

    </h1>

    <div class="pic_wrap" id="pic_wrap">

        <div class="pic_box">

            <a><img src="img/1.jpg" /></a>

            <h6>图片1</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/2.jpg" /></a>

              <h6>图片2</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/3.jpg" /></a>

            <h6>图片3</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/4.jpg" /></a>

              <h6>图片4</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/5.jpg" /></a>

            <h6>图片5</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/6.jpg" /></a>

              <h6>图片6</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/7.jpg" /></a>

            <h6>图片7</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/8.jpg" /></a>

              <h6>图片8</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/9.jpg" /></a>

              <h6>图片9</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/10.jpg" /></a>

              <h6>图片10</h6>

        </div>

    </div>

</div>

<!--wrap结束-->

</body>

</html>

此时效果如下：

模态窗口

我们通过点击小图片，可以获取图片的索引并存到变量index中，从而获取到图片地址及其对应的描述文本，然后写入到模态窗口里，如果你研究过vajoyJS的源码，那对模态窗口的原理肯定不陌生，不外乎是把要显示的内容（居中到屏幕中间）和半透明黑色div一起append到<body>标签去。

相比之下，对“要显示的内容”的处理就棘手多了。我是将它们生成为文档碎片后，按顺序一个个append到<body>中，通过样式来控制布局（代码里不使用addClass而是直接定义.css({...})的原因是后期封装为插件的话，用起来无需再去写太多样式）。

另外一个细节就是要考虑图片太大，大过浏览器可视窗口，则应该压缩其大小（fixPic方法）：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>picBox</title>

<script src="jquery-1.11.1.js"></script>

<style>

html,body{min-height:100%;}

.wrap{width: 350px;height: 500px;border: solid 1px gray;overflow:hidden;}

h1{ margin-bottom:0px;text-align:right; border-bottom:solid 1px #CCCCCC;}

h1 a:hover,.pic_box a:hover{color:blue; cursor:pointer;}

.right_btn{margin:0px 20px;}

.pic_wrap{padding:0px 15px; width:320px; height:430px;}

.pic_box{ float:left; margin:10px 0px;width:150px; height:200px; text-align:center;}

.pic_box a{display:block;width:150px; height:180px; overflow:hidden;}

.pic_box h6{margin:0px;}

.nomoe{opacity:0.3;}

.close_btn{width:15px;height:15px;text-align:center;padding:20px;background:black;color:white;border-radius:30px;cursor:pointer;font-family:"Arial";opacity:0.8;font-weight:bold;}

.close_btn:hover{opacity:1;}

</style>

<script type="text/javascript">

    $(function(){

        var index,nums,page=0,shows=4,temp;

        var $show_picBox,$black_modalback,$click_img,$title,$close,$title_wrap,$show_wrap,pic_w,pic_h;

        var $left_btn = $("a:first","h1");

        var $right_btn = $("a:last","h1");

        var $picBox = $("div","#pic_wrap");

        var page_count = Math.ceil($picBox.length/shows);

        var $a = $("#pic_wrap a");

        var $imgs = $picBox.find("img");

        var $titleH6 = $picBox.find("h6");

        temp=shows-1;

        $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide();

        $left_btn.addClass("nomoe");

        if(page_count<=1) $right_btn.addClass("nomoe");

        $left_btn.click(function(){

            if(page-1>=0){

                --page;

                $right_btn.removeClass("nomoe");

                nums = page*shows-1;

                nums=nums<0?0:nums;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide();

                if(nums==0) $picBox.eq(0).show();

                if(!page) $left_btn.addClass("nomoe");

            }

        })

        $right_btn.click(function(){

            if(page+1<page_count){

                ++page;

                $left_btn.removeClass("nomoe");

                nums = page*shows-1;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide();

                if(page>=page_count-1) $right_btn.addClass("nomoe");

            }

        })

        //获取窗口大小复用

        var VJ_getWin = function(){

            var $win = $(window);

            return {

               h:$win.height(),

               w:$win.width(),

               t:$win.scrollTop(),

               l:$win.scrollLeft()

            }

        }

        //获取页面可视区域高度复用

        var VJ_getBH = function(){

            return Math.max($("body").height(),$("html").height());

        }

        //居中模块

        var VJ_stayCenter = function(obj,padding){

            if(!padding) padding = 0;

            var o_l = VJ_getWin().w/2 -padding + VJ_getWin().l;

            var o_h = VJ_getWin().h/2 -padding + VJ_getWin().t;

            var obj_w = -obj.width()/2;

            var obj_h = -obj.height()/2;

            obj.css({"left":o_l,"margin-left":obj_w, "top":o_h,"margin-top":obj_h});

        }

        //修改图片大小，注意得作为文档而非碎片时才能获取其大小

        var fixPic = function(obj){

            pic_w = obj.width();

            pic_h = obj.height();

            var win_w = VJ_getWin().w, win_h = VJ_getWin().h;

            if(pic_h>win_h*0.85){

                obj.css("height",win_h*0.85);

            }

            if(obj.width()>win_w*0.9){

                obj.css({"height":"auto","width":win_w*0.9});

            }

        }

        //绘制图片

        var drawPic = function(index){

            $click_img = $imgs.eq(index).clone();

            $title = $("<span>"+$titleH6.eq(index).text()+"</span>");

            $close = $("<a title='关闭'>X</a>");

            $click_img.css({"position":"relative","padding":"15px","background":"white","z-index":1002,"display":"none"});

            $close.css({"position":"absolute","z-index":1003,"display":"none","top":"-16px","right":"-16px"}).addClass("close_btn");

            $title.css({"position":"relative","padding":"5px 15px","background":"black","color":"white","z-index":1002,"display":"none","border-radius":"6px"});

            $("body").append($close).append($click_img).append($title).append($show_wrap);

            fixPic($click_img);

        }

        $a.click(function(){

            index = $(this).index("#pic_wrap a");

            $black_modalback = $("<div></div>").css({"position":"absolute","width":"100%","height":VJ_getBH(),"background":"black","opacity":"0.6","left":"0","top":"0","z-index":1001,"display":"none"});

            $("body").append($black_modalback);

            drawPic(index);

            //把全部元素包裹到一个div中

            $show_wrap = $("<div></div>").css({"position":"absolute","width":$click_img.width()+30,"height":$click_img.height()+30});

            $click_img.add($close).add($title).wrapAll($show_wrap);

            //title再包一层，以便居中

            $title_wrap = $("<h5></h5>").css({"text-align":"center","margin":"5px 0 0 0"});

            $title.wrapAll($title_wrap);

            //$show_wrap居中

            $show_wrap = $click_img.closest("div"); //到这里会失效，得重新获取

            VJ_stayCenter($show_wrap,15); 

            //显示出来

            $click_img.add($close).add($title).add($black_modalback).fadeIn();

            //关闭按钮

            $close.click(function(){

                $close.add($click_img).add($title).add($show_wrap).remove(); //一定要加上这一行才能删除彻底

                $black_modalback.nextAll().andSelf().remove();

            })

        })

    })

</script>

</head>

<body>

<div class="wrap">

    <h1>

      <a class="left_btn"><</a><a class="right_btn">></a>

    </h1>

    <div class="pic_wrap" id="pic_wrap">

        <div class="pic_box">

            <a><img src="img/1.jpg" /></a>

            <h6>图片1</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/2.jpg" /></a>

              <h6>图片2</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/3.jpg" /></a>

            <h6>图片3</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/4.jpg" /></a>

              <h6>图片4</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/5.jpg" /></a>

            <h6>图片5</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/6.jpg" /></a>

              <h6>图片6</h6>

        </div>

        <div class="pic_box">

            <a><img src="img/7.jpg" /></a>

            <h6>图片7</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/8.jpg" /></a>

              <h6>图片8</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/9.jpg" /></a>

              <h6>图片9</h6>

        </div>

        <div class="pic_box">

              <a><img src="img/10.jpg" /></a>

              <h6>图片10</h6>

        </div>

    </div>

</div>

<!--wrap结束-->

</body>

</html>

现在效果如下：

添加箭头和切图事件

我们还需按需添加左右箭头，方便在展示时用户直接点击箭头来左右切图，这里得通过index来判断是否添加左箭头或右箭头，比如index为0时表示为第一张图片，无需添加左箭头；若index为(图片数量-1)时表示展示的是最后一张图片，则无需添加右箭头。

至于切图事件，由于我们把绘图过程封装为一个独立函数，则点击箭头的时候我们把旧图片animate并淡出再remove掉，然后再执行绘图函数绘制新的图片即可：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>picBox</title>

<script src="jquery-1.11.1.js"></script>

<style>

html, body {

    min-height: 100%;

}

.wrap {

    width: 350px;

    height: 500px;

    border: solid 1px gray;

    overflow: hidden;

}

h1 {

    margin-bottom: 0px;

    text-align: right;

    border-bottom: solid 1px #CCCCCC;

}

h1 a:hover, .pic_box a:hover {

    color: blue;

    cursor: pointer;

}

.right_btn {

    margin: 0px 20px;

}

.pic_wrap {

    padding: 0px 15px;

    width: 320px;

    height: 430px;

}

.pic_box {

    float: left;

    margin: 10px 0px;

    width: 150px;

    height: 200px;

    text-align: center;

}

.pic_box a {

    display: block;

    width: 150px;

    height: 180px;

    overflow: hidden;

}

.pic_box h6 {

    margin: 0px;

}

.nomoe {

    color:#CCC;

}

.close_btn {

    width: 15px;

    height: 15px;

    text-align: center;

    padding: 20px;

    background: black;

    color: white;

    border-radius: 30px;

    cursor: pointer;

    font-family: "Arial";

    opacity: 0.8;

    font-weight: bold;

}

.close_btn:hover {

    opacity: 1;

}

.left_arrow, .right_arrow {

    position: absolute;

    display: block;

    width: 30%;

    height: 100%;

    opacity: 0;

    z-index: 1003;

}

.left_arrow:hover, .right_arrow:hover {

    opacity: 1;

}

.left_arrow {

    left: 0;

    background: url(img/left_arrow.png) left center no-repeat;

}

.right_arrow {

    right: 0;

    background: url(img/right_arrow.png) right center no-repeat;

}

</style>

<script type="text/javascript">

    $(function(){

        var index,nums,page=0,shows=4,temp,times=1;

        var $show_picBox,$black_modalback,$click_img,$title,$close,$title_wrap,$show_wrap,pic_w,pic_h;

        var $left_btn = $("a:first","h1");

        var $right_btn = $("a:last","h1");

        var $picBox = $("div","#pic_wrap");

        var page_count = Math.ceil($picBox.length/shows);

        var $a = $("#pic_wrap a");

        var $imgs = $picBox.find("img");

        var $titleH6 = $picBox.find("h6");

        var $left_arrow=$("<a href='#!/leftPic' class='left_arrow' title='上一张'></a>");

        var $right_arrow=$("<a href='#!/rightPic' class='right_arrow' title='下一张'></a>");

        temp=shows-1;

        $picBox.filter("div:odd").css({"margin-left":"20px"}).end().filter("div:gt("+temp+")").hide();

        $left_btn.addClass("nomoe");

        if(page_count<=1) $right_btn.addClass("nomoe");

        $left_btn.click(function(){

            if(page-1>=0){

                --page;

                $right_btn.removeClass("nomoe");

                nums = page*shows-1;

                nums=nums<0?0:nums;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide();

                if(nums==0) $picBox.eq(0).show();

                if(!page) $left_btn.addClass("nomoe");

            }

        })

        $right_btn.click(function(){

            if(page+1<page_count){

                ++page;

                $left_btn.removeClass("nomoe");

                nums = page*shows-1;

                temp = (page+1)*shows;

                $show_picBox = $picBox.filter("div:lt("+temp+")").filter("div:gt("+nums+")").show();

                $picBox.not($show_picBox).hide();

                if(page>=page_count-1) $right_btn.addClass("nomoe");

            }

        })

        //获取窗口大小复用

        var VJ_getWin = function(){

            var $win = $(window);

            return {

               h:$win.height(),

               w:$win.width(),

               t:$win.scrollTop(),

               l:$win.scrollLeft()

            }

        }

        //获取页面可视区域高度复用

        var VJ_getBH = function(){

            return Math.max($("body").height(),$("html").height());

        }

        //居中模块

        var VJ_stayCenter = function(obj,padding){

            if(!padding) padding = 0;

            var o_l = VJ_getWin().w/2 +padding + VJ_getWin().l;

            var o_h = VJ_getWin().h/2 -padding + VJ_getWin().t;

            var obj_w = -obj.width()/2;

            var obj_h = -obj.height()/2;

            obj.css({"left":o_l,"margin-left":obj_w, "top":o_h,"margin-top":obj_h});

        }

        //修改图片大小，注意得作为文档元素而非文档碎片时才能获取其大小

        var fixPic = function(obj){

            pic_w = obj.width();

            pic_h = obj.height();

            var win_w = VJ_getWin().w, win_h = VJ_getWin().h;

            if(pic_h>win_h*0.85){

                obj.css("height",win_h*0.85);

            }

            if(obj.width()>win_w*0.9){

                obj.css({"height":"auto","width":win_w*0.9});

            }

        }

        //箭头点击事件

        var arrowClick = function(flag){

            if(times==1){  //防抖

                var instance = flag?-100:100;

                index = flag?index+1:index-1;

                var $allElem = $black_modalback.nextAll();

                var cssleft = parseInt($allElem.css("left").replace("px","")) + instance;

                $allElem.animate({"left":cssleft,"opacity":"0"},200,function(){$allElem.remove();});

                drawPic(index);

                $click_img.add($close).add($title).add($black_modalback).fadeIn();

                times=0;  //防抖

                setTimeout(function(){times=1;},500);  //防抖

            }

        }

        //图片显示后是否要加左右指针

        var addArrow = function(index,obj){

            if(index>0){

                obj.before($left_arrow);

                $left_arrow.on("click",function(){

                    arrowClick();

                })

            }

            if(index<$imgs.length-1){

                obj.before($right_arrow);

                $right_arrow.on("click",function(){

                    arrowClick(1);

                })

            }

        }

        //绘制图片

        var drawPic = function(index){

            $click_img = $imgs.eq(index).clone();

            $title = $("<span>"+$titleH6.eq(index).text()+"</span>");

            $close = $("<a title='关闭'>X</a>");

            $click_img.css({"position":"relative","padding":"15px","background":"white","z-index":1002,"display":"none"});

            $close.css({"position":"absolute","z-index":1004,"display":"none","top":"-16px","right":"-16px"}).addClass("close_btn")

            .click(function(){ //关闭按钮点击事件

                $close.add($click_img).add($title).add($show_wrap).add($left_arrow).add($right_arrow).remove(); //一定要加上这一行才能删除彻底

                $black_modalback.nextAll().andSelf().remove();

            });

            $title.css({"position":"relative","padding":"5px 15px","background":"black","color":"white","z-index":1002,"display":"none","border-radius":"6px"});

            $("body").append($close).append($click_img).append($title).append($show_wrap);

            fixPic($click_img);

            //把全部元素包裹到一个div中

            $show_wrap = $("<div></div>").css({"position":"absolute","width":$click_img.width()+30,"height":$click_img.height()+30});

            $click_img.add($close).add($title).wrapAll($show_wrap);

            //title再包一层，以便居中

            $title_wrap = $("<h5></h5>").css({"text-align":"center","margin":"5px 0 0 0"});

            $title.wrapAll($title_wrap);

            //$show_wrap居中

            $show_wrap = $click_img.closest("div"); //到这里会失效，得重新获取

            VJ_stayCenter($show_wrap,15);

            addArrow(index,$click_img);

        }

        $a.click(function(){

            index = $(this).index("#pic_wrap a");

            $black_modalback = $("<div></div>").css({"position":"absolute","width":"100%","height":VJ_getBH(),"background":"black","opacity":"0.6","left":"0","top":"0","z-index":1001,"display":"none"});

            $("body").append($black_modalback);

            drawPic(index);

            //显示出来

            $click_img.add($close).add($title).add($black_modalback).fadeIn();

        })

    })

</script>

</head>

<body>

<div class="wrap">

  <h1> <a class="left_btn"><</a><a class="right_btn">></a> </h1>

  <div class="pic_wrap" id="pic_wrap">

    <div class="pic_box"> <a><img src="img/1.jpg" /></a>

      <h6>图片1</h6>

    </div>

    <div class="pic_box"> <a><img src="img/2.jpg" /></a>

      <h6>图片2</h6>

    </div>

    <div class="pic_box"> <a><img src="img/3.jpg" /></a>

      <h6>图片3</h6>

    </div>

    <div class="pic_box"> <a><img src="img/4.jpg" /></a>

      <h6>图片4</h6>

    </div>

    <div class="pic_box"> <a><img src="img/5.jpg" /></a>

      <h6>图片5</h6>

    </div>

    <div class="pic_box"> <a><img src="img/6.jpg" /></a>

      <h6>图片6</h6>

    </div>

    <div class="pic_box"> <a><img src="img/7.jpg" /></a>

      <h6>图片7</h6>

    </div>

    <div class="pic_box"> <a><img src="img/8.jpg" /></a>

      <h6>图片8</h6>

    </div>

    <div class="pic_box"> <a><img src="img/9.jpg" /></a>

      <h6>图片9</h6>

    </div>

    <div class="pic_box"> <a><img src="img/10.jpg" /></a>

      <h6>图片10</h6>

    </div>

  </div>

</div>

<!--wrap结束-->

</body>

</html>

现在效果如下：

自此，我们的图片查看器便基本完成了。

不过本例还有一些可以改进的地方，比如向左切图时，旧图向右淡出消失，但新图没有任何运动效果，如果新图能从左到右淡入进来，会有更好的视觉交互。

另一个是本例的代码封装性还不高，你可以进一步封装该代码作为项目插件备用（也是我后续要做的事情，本来打算扩展到vajoyJS中的，不过此效果代码较多而且项目要使用的地方也较少，故还是决定独立出来）。

还有一个细节的地方，就是原始缩略图只显示了部分区域，我们应该写一段代码让图片自动缩放到父元素大小：

这个功能后续我会写为插件扩展入vajoyJS，敬请期待。

还有类似箭头也好、旧图消失也好，我们都通过opacity:0来解决，这样对IE8-的支持不好，可以考虑更换为 display:none 更佳。

本章的内容如上，祝大家假期返工路途一切顺利、愉快地迎接工作日，共勉~

用JQ仿造礼德财富网的图片查看器的更多相关文章

  1. 发布两款JQ小插件（图片查看器 + 分类选择器），开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  2. Js批量下载花瓣网及堆糖网专辑图片

    插件作者:SaintIC 文章地址:https://blog.saintic.com/blog/256.html 一.安装 1. 安装Tampermonkey扩展,不同浏览器的支持,参见官网:http ...

  3. 用JQ仿造百度书籍预售页面的单屏滚页效果

    今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...

  4. 【jQuery小实例】---3 凤凰网首页图片动态效果

    ---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...

  5. 用php实现百度网盘图片直链的代码分享

    第一种代码:代码量较少通过正则表达式获取百度网盘的文件真实地址,来实现直链的效果 将下面的代码保存为downbd.php 复制代码代码如下: <?php $canshu=$_SERVER[&qu ...

  6. Python爬虫入门教程 18-100 煎蛋网XXOO图片抓取

    写在前面 很高兴我这系列的文章写道第18篇了,今天写一个爬虫爱好者特别喜欢的网站煎蛋网http://jandan.net/ooxx,这个网站其实还是有点意思的,网站很多人写了N多的教程了,各种方式的都 ...

  7. 微信小程序——网盘图片预览

    微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...

  8. 千图网爬图片（BeautifulSoup）

    import requests from bs4 import BeautifulSoup import os #导入os模块 class TuKuSpider(): ""&quo ...

  9. GoLang爬取花瓣网美女图片

    由于之前一直想爬取花瓣网(http://huaban.com/partner/uc/aimeinv/pins/) 的图片,又迫于没时间,所以拖了很久. 鉴于最近在学go语言,就刚好用这个练手了. 预览 ...

随机推荐

  1. [Notes] AWS Automation using script and AWS CLI

    (c) 2014 Amazon Web Services, Inc. and its afflialtes, All rights reserved. The content in this file ...

  2. 使用 xsd.exe 命令工具将 xsd 架构生成 类（CS） 文件

    vs自带命令行工具 命令:xsd  xml文件路径 C:\Program Files (x86)\Microsoft Visual Studio 9.0\VC>xsd d:Scheme.xml ...

  3. javascript eval和JSON之间的联系

    原出处:http://www.jb51.net/article/21688.htm eval函数的工作原理 eval函数会评估一个给定的含有JavaScript代码的字符串,并且试图去执行包含在字符串 ...

  4. read函数返回值始终为1

    部分程序如下: while(count=read(fd_s,buf,512)>0)      printf("count=%d\n",count);      write(f ...

  5. 一个暂时无法理解的bug

    BUG bug的存在是不可避免的 一个静态变量,改成绝对地址之后可以生成静态页面.但是主页有一个用了静态变量的超链接就不能用, 最后我加了一个相对地址的静态变量,可以解决这个问题.

  6. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

  7. easyui自定义标签 datagrid edit combobox 手动输入保存不上问题解决办法

    使用onEndEdit事件(该事件可以获取到editor对象,onAfterEdit事件获取不到Editor对象) 通过editor拿到输入数据并保存. int ci = 0; for(Column ...

  8. [ MySql学习心得 ] --Two

    五.MySql 中常用子句 1.where子句 我们都知道在查询数据时,未必会查整个表中的数据,当有条件查询时,就会用到where子句.其结构: select * from  [表名]  where ...

  9. XAMARIN +VS2015 ANDROID 开发判断gps 是否打开。

    在获取位置的时候首先要判断gps是否打开,如果没有打开就要提示打开,当然最友好的就是直接调转到打开界面. LocationManager alm = (LocationManager)this.Get ...

  10. URI和URL、URN区别

    URI不能读取/写入资源,这是统一的资源定位器(URL)的任务.URL是一种URI,它的schema是已知的网络协议,并且它把URI与某种协议处理程序联系起来(一种与资源通讯的读/写机制).URI一般 ...