用JQ仿造礼德财富网的图片查看器
现在就职于一家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仿造礼德财富网的图片查看器的更多相关文章
- 发布两款JQ小插件（图片查看器 + 分类选择器），开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
- Js批量下载花瓣网及堆糖网专辑图片
插件作者:SaintIC 文章地址:https://blog.saintic.com/blog/256.html 一.安装 1. 安装Tampermonkey扩展,不同浏览器的支持,参见官网:http ...
- 用JQ仿造百度书籍预售页面的单屏滚页效果
今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...
- 【jQuery小实例】---3 凤凰网首页图片动态效果
---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...
- 用php实现百度网盘图片直链的代码分享
第一种代码:代码量较少通过正则表达式获取百度网盘的文件真实地址,来实现直链的效果 将下面的代码保存为downbd.php 复制代码代码如下: <?php $canshu=$_SERVER[&qu ...
- Python爬虫入门教程 18-100 煎蛋网XXOO图片抓取
写在前面 很高兴我这系列的文章写道第18篇了,今天写一个爬虫爱好者特别喜欢的网站煎蛋网http://jandan.net/ooxx,这个网站其实还是有点意思的,网站很多人写了N多的教程了,各种方式的都 ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
- 千图网爬图片（BeautifulSoup）
import requests from bs4 import BeautifulSoup import os #导入os模块 class TuKuSpider(): ""&quo ...
- GoLang爬取花瓣网美女图片
由于之前一直想爬取花瓣网(http://huaban.com/partner/uc/aimeinv/pins/) 的图片,又迫于没时间,所以拖了很久. 鉴于最近在学go语言,就刚好用这个练手了. 预览 ...
随机推荐
- 【转载】最完美解决Nginx部署ThinkPHP项目的办法
网上通用解决方法的配置如下: server { ... location / { index index.htm index.html index.php; #访问路径的文件不存在则重写URL转交给T ...
- cnavas
1.创建一个画布eg:<cnavas width=100px;height=100px; style="border:1px solid rgba(242 ,54,33,0.1)&qu ...
- CAD二次开发 - 可缩放块（四）
1.说明 可进行缩放性注释的对象有:文字.标注.图案填充.公差.多重引线.块及属性. 2.为图形添加.删除注释比例步骤 1)使用AnnotationScale类(在DatabaseServices命名 ...
- BZOJ1261: [SCOI2006]zh_tree
Description 张老师根据自己工作的需要,设计了一种特殊的二叉搜索树.他把这种二叉树起名为zh_tree,对于具有n个结点的zh_tree,其中序遍历恰好为(1,2,3,-,n),其中数字1, ...
- Android观察者模式的简单实现demo
观察者模式就是:当一个对象的状态发送改变时,所有依赖于它的对象都能得到通知并被自动更新. 下面介绍一种简单的使用方法,(下面有demo链接)先看一下project的目录构成: ObserverList ...
- Taylor定理证明
下图,单独打开查看 当n->inf时如果 Rn(c)趋0, c属于(a,x), 那么在区间(a,x) 内函数在a点生成的taylor级数收敛到函数f.
- Android adb常用指令
Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态. 可以通过下列几种方法加入adb: 在设备上运行shell命令 通过端口转发来管理模拟器或设备 从模拟器或 ...
- AutoMapper扩展
扩展类:AutoMapExtention using System; using System.Collections.Generic; using System.Linq.Expressions; ...
- java 线程安全不线程不安全
经常看到一些类,有的说线程安全,有的说线程不安全,顿时懵逼. 线程安全不安全,主要是在多线程执行的情况下,如果由于线程之间抢占资源而造成程序的bug即为线程不安全,下面就拿arraylist 和Vec ...
- Opacity多浏览器透明度兼容处理
用来设定元素透明度的 Opacity 是CSS 3里的一个属性.当然现在还只有少部分浏览器支持. 不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari: IE: fil ...