下载煎蛋无聊图--简单Web浏览

下载下来的煎蛋无聊图方便和别人一块浏览。于是就做了一个简单的web应用。供局域网内一块浏览图片。
在网上找了一个jquery的图片浏览插件：
[url]http://blueimp.github.com/Bootstrap-Image-Gallery/[/url]
下载地址为：
[url]https://github.com/blueimp/jQuery-Image-Gallery/downloads[/url]

说下图片浏览实现方法：
将下载下来的图片放入img文件夹下无聊图放入funny文件夹下，妹子图放入girl文件夹下。
通过ajax访问后台来获取文件夹中的文件名，返回给页面。页面通过动态创建img标签来访问
文件夹中的图片

浏览页面，30张图片一页：
[img]http://dl.iteye.com/upload/picture/pic/115771/1cc2169d-3fbd-3691-b334-057e40b49932.jpg[/img]

浏览图片：
[img]http://dl.iteye.com/upload/picture/pic/115773/0a18adea-cb01-36b5-8d5d-82ca4c5dfd4f.png[/img]

web图片浏览项目目录如图：
[img]http://dl.iteye.com/upload/picture/pic/115769/78cbf74f-0c12-3186-8bb6-6e361a58a30d.png[/img]

js和css打包，就不贴代码了。

index.html 代码。



<!DOCTYPE HTML>

<html lang="en"><head><meta charset="utf-8"><title>Funny Day</title><meta name="description" content="jQuery Image Gallery is an extension to the Dialog component of jQuery UI, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality."><meta name="viewport" content="width=device-width"><!-- jQuery UI styles --><link rel="stylesheet" href="css/jquery-ui.css" id="theme"><!-- jQuery Image Gallery styles --><link rel="stylesheet" href="css/jquery.image-gallery.min.css"><!-- Generic page styles --><link rel="stylesheet" href="css/style.css"></head><body><ul class="nav">    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/downloads">Downloads</a></li>    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Source Code</a></li>    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery">Documentation</a></li>    <li><a href="https://github.com/blueimp/jQuery-Image-Gallery/issues">Issues</a></li>    <li><a href="https://blueimp.net">© Sebastian Tschan</a></li></ul><br><h1 id="bg">搞笑图</h1><blockquote id="page">

</blockquote><br><div>    <span id="buttonset">        <input type="checkbox" id="option-fullscreen"><label for="option-fullscreen">Fullscreen</label>        <input type="checkbox" id="option-slideshow"><label for="option-slideshow">Slideshow</label>         <input enabled type="checkbox" checked id="option-搞笑图" onclick="loadFunny(0)"><label for="option-搞笑图">搞笑图</label>        <input type="checkbox"  id="option-美女图" onclick="loadFunny(1)"><label for="option-美女图">美女图</label>    </span>    <select id="effect">        <option>blind</option>        <option>clip</option>        <option>drop</option>        <option>explode</option>        <option selected>fade</option>        <option>fold</option>        <option>puff</option>        <option>random</option>        <option>slide</option>        <option>scale</option>    </select>    <select id="theme-switcher">        <option value="base">Base</option>        <option value="black-tie">Black Tie</option>        <option value="blitzer">Blitzer</option>        <option value="cupertino">Cupertino</option>        <option value="dark-hive">Dark Hive</option>        <option value="dot-luv">Dot Luv</option>        <option value="eggplant">Eggplant</option>        <option value="excite-bike">Excite Bike</option>        <option value="flick">Flick</option>        <option value="hot-sneaks">Hot sneaks</option>        <option value="humanity">Humanity</option>        <option value="le-frog">Le Frog</option>        <option value="mint-choc">Mint Choc</option>        <option value="overcast">Overcast</option>        <option value="pepper-grinder">Pepper Grinder</option>        <option value="redmond">Redmond</option>        <option value="smoothness">Smoothness</option>        <option value="south-street" selected>South Street</option>        <option value="start">Start</option>        <option value="sunny">Sunny</option>        <option value="swanky-purse">Swanky Purse</option>        <option value="trontastic">Trontastic</option>        <option value="ui-darkness">UI Darkness</option>        <option value="ui-lightness">UI Lightness</option>        <option value="vader">Vader</option>    </select></div><br><br><!-- The container element for the gallery images --><div id="gallery"></div><script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script><!-- The Load Image plugin, providing image loading and resizing functionality --><script src="js/load-image.min.js"></script><!-- The jQuery Image Gallery plugin --><script src="js/jquery.image-gallery.min.js"></script><!-- The main application script --><script src="js/main.js"></script><script>var dat,imr;var pn=0;var fk="funny/";function next(p){  var gallery = $('#gallery'),url="img/"+fk; gallery.html("");   for(var __l=(Number(p)*30);__l<Number((Number(p)+1)*30);__l++){

  var photo = dat.split(",")[__l];   if(!photo) break; $('<a rel="gallery"/>')    .append($('<img width=200px height=200px>').prop('src',url+photo))    .prop('href', url+photo)//    .css('height', '100px')    .appendTo(gallery);  }}function loadFunny(f){  if(pn==f){      return;   }else{        pn=f;        dat="";        switch(f){        case 0:           fk="funny/";           break;        case 1:           fk="girl/";            break;        }     $.ajax({          url: 'funny.jsp?file='+fk,            async:false       }).done(function (data) {         dat=data;        });   } var sg = "";   for(var __i=0;__i<Math.round(dat.split(",").length/30);__i++){        sg+="<a href=# onclick=next("+__i+")>["+__i+"]</a>";    } $('#bg').html(fk=="funny/"?"搞笑图":"美女图");    $('#page').html("");  $('#page').append(sg);  next(0);}</script></body></html>

funny.jsp ajax响应后台。就是简单的文件夹文件遍历。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ page import="java.io.File" %><%@ page import="java.util.ArrayList" %><%  String prfix = request.getParameter("file")==null ? "funny":request.getParameter("file");    File f = new File(request.getServletContext().getRealPath("/img")+"\\"+prfix);    String result="";    for(File img:f.listFiles()){          result+=img.getName()+",";    }    result+="1.gif";    response.getWriter().write(result);%>

main.js 页面load，ajax请求

/* * jQuery Image Gallery Plugin JS Example 2.2 * https://github.com/blueimp/jQuery-Image-Gallery * * Copyright 2011, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */

/*jslint unparam: true, regexp: true *//*global $, document, window */

$(function () {    'use strict';

    // Initialize the Image Gallery widget:    $('#gallery').imagegallery();

    // Initialize the theme switcher:    $('#theme-switcher').change(function () {        var theme = $('#theme');        theme.prop(            'href',            theme.prop('href').replace(                /[\w\-]+\/jquery-ui.css/,                $(this).val() + '/jquery-ui.css'            )        );    });

    // Create a buttonset out of the checkbox options:    $('#buttonset').buttonset();

    // Listen to options changes:    $('#buttonset input, #effect').change(function () {        $('#gallery').imagegallery('option', {            show: $('#effect').val(),            hide: $('#effect').val(),            fullscreen: $('#option-fullscreen').is(':checked'),            slideshow: $('#option-slideshow').is(':checked') && 5000        });    });

    // Enable real fullscreen mode:    $('#option-fullscreen').click(function () {        var checkbox = $(this),            root = document.documentElement;        if (checkbox.is(':checked')) {            if (root.webkitRequestFullScreen) {                root.webkitRequestFullScreen(                    window.Element.ALLOW_KEYBOARD_INPUT                );            } else if (root.mozRequestFullScreen) {                root.mozRequestFullScreen();            }        } else {            (document.webkitCancelFullScreen ||                document.mozCancelFullScreen ||                $.noop).apply(document);        }    });

    // Load images via flickr for demonstration purposes:    $.ajax({        url: 'funny.jsp?file=funny',        data: {            format: 'json',            method: '',            api_key: '',            page:0            }    }).done(function (data) {        dat=data;        var sg = "";       for(var __i=0;__i<Math.round(dat.split(",").length/30);__i++){            sg+="<a href=# onclick=next("+__i+")>["+__i+"]</a>";        }     $('#page').append(sg);        var gallery = $('#gallery'),            url="img/funny/";

        $.each(data.split(","), function (index, photo) {            if(index<30 && photo)            $('<a rel="gallery"/>')                .append($('<img width=200px height=200px>').prop('src',url+photo))                .prop('href', url+photo)//                .css('height', '100px')                .appendTo(gallery);        });    });

});

下载煎蛋无聊图--简单Web浏览相关推荐

pyspider煎蛋无聊图爬取
命令行pyspider,启动pyspider. web预览界面太小,解决方法:找到pyspider的安装路径下的debug.min.css,修改css代码: 将其中的iframe{border-wid ...
【Python爬虫案例学习16】pyspider煎蛋无聊图爬取
命令行pyspider,启动pyspider. web预览界面太小,解决方法:找到pyspider的安装路径下的debug.min.css,修改css代码: 将其中的iframe{border-wid ...
chrome 扩展 hello world 本土版（煎蛋无聊图）
效果图如下步骤一建立一个文件夹,建立manifest.json { "name":"My first extension", "version&q ...
python爬虫--下载煎蛋网妹子图到本地
1 # -*- coding:utf-8 -*- 2 """ 3 下载煎蛋妹子到本地,通过selenium.正则表达式.phantomjs.Beautifulsoup实现 ...
用Python下载煎蛋网全站好看的小姐姐！
转载来自:Python技术春天到了,春光明媚,鸟语花香,各地都回温了!公园里面的花都开了,这几天都没有心情工作,准备周末出去游山玩水,踏踏青!先用Python爬取一波妹子图,摸摸鱼吧. 导入模块首 ...
Python爬虫实战(四) :下载煎蛋网所有妹子照片
煎蛋网是一个适合开车的网站,各种妹子福利图片. 网站:http://jandan.net/ooxx 里面有两种格式的图片:gif和jpg,写个程序将所有页面的妹子图全部下载下来. #coding=ut ...
下载煎蛋妹子图python代码[自用]
2019独角兽企业重金招聘Python工程师标准>>> [自用]高举社会主义精神文明大旗,不建议推广! 解析html没有费多少精力,主要是下载失败太多,后来模拟了浏览器访问还是有很多 ...
用Python爬虫抓取煎蛋(jandan.net)无聊图和妹子图
用Python爬虫抓取煎蛋(jandan.net)无聊图和妹子图,有需要的朋友可以参考下. 初学Python, 练手写了个程序通过Python爬虫抓取煎蛋无聊图和妹子图,存储到本地硬盘使用了pyq ...
python爬虫煎蛋网妹子图动态爬虫1
------来自某潮汕人的菜鸟教程爬虫目标网站:http://jandan.net/ooxx 爬虫目标中文名称:煎蛋网妹子图爬虫需求:分析js下载煎蛋网的妹子图 ...

下载煎蛋无聊图--简单Web浏览

下载煎蛋无聊图--简单Web浏览相关推荐

最新文章

热门文章