用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语言,就刚好用这个练手了. 预览 ...
随机推荐
- Step by Step 配置使用HTTPS的ASP.NET Web应用[转载]
原创地址:http://www.cnblogs.com/jfzhu/p/4064654.html 转载请注明出处 有关HTTPS.SSL以及SSL证书的工作原理,参见 <HTTPS那些事(一)H ...
- rem介绍
手机端开发,一般以320px宽为最低标题.市场上的手机,大多数是360px宽. 20px=1rem是最容易换算的,基本上可以口算,除以2并缩小十倍.1px/20=0.05rem.两位小数就可以除尽了. ...
- Q_OBJECT
所有QObject的派生类在官方文档中都推荐在头文件中放置宏Q_OBJECT,那么该宏到底为我们做了哪些工作?在qobjectdef.h中有下面的代码: #define Q_OBJECT \ publ ...
- 父窗口，子窗口之间的JS"通信"方法
今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...
- 基于现有数据库的Code First模式迁移更新数据库
本文讨论的内容是基于EF4.1版本.文中谈论的现有的数据库不是由EF创建.本文假定你已经对Code First迁移有一定的了解,如果不了解Code First迁移更新数据库可以查看 文章涉及的主题如下 ...
- （python）对象的引用
对比下列两个例子: 例子1: a=10 b=a a=a+2 print "a=",a,"b=",b 结果:a= 12 b= 10 a+2后,b仍然是10 例子2 ...
- System.Security.SecurityException The source was not found, but some or all event logs could not be searched.Inaccessible logs Security.
An exception occurred during the Install phase. System.Security.SecurityException The source was not ...
- second class
nothing no very good. 1.look at shuruo.html,after display:inline-block; li's width as the content; S ...
- 闲来无事——第一弹 Java基础 基本数据类型
一个优秀的Java类一定要去优质的名称,类的命名主要有字母和数字,并且必须以字母开头:虽然说没有明确规定类名首字母要大写,但是实际上如果出现首字母小写的类名,那就呵呵了,坐等挨骂吧!类名首字母大写是业 ...
- SpringMVC常用注解實例詳解3：@ResponseBody
我的開發環境框架: springmvc+spring+freemarker開發工具: springsource-tool-suite-2.9.0JDK版本: 1.6.0_29tomcat ...