动感的网页相册

简介: 不知道大家有没有这样的体验,windows电脑上查看一张gif图,默认就把IE给打开了,还弹出个什么询问项,好麻烦的感觉。所以为了解决自己的这个问题,写了个简单的文件夹内图片浏览工具。

不知道大家有没有这样的体验,windows电脑上查看一张gif图,默认就把IE给打开了,还弹出个什么询问项,好麻烦的感觉。所以为了解决自己的这个问题,写了个简单的文件夹内图片浏览工具。


效果图

  • 以E盘某一文件夹为例
    素材图片

  • 效果图
    效果图


实现思路

Created with Raphaël 2.1.0 获取给定的文件夹,遍历获取所有图片(包含路径) 将包含了所有图片的列表输入到HTML模板 合并文件,生成Html 查看页面生成情况

业务代码

# coding:utf-8
import sys

reload(sys)
sys.setdefaultencoding('utf8')
#    __author__ = '郭 璞'
#    __date__ = '2016/8/5'
#    __Desc__ = 自动生成网页相册
import os


# 呵呵了,原来有标准库中的walk方法。那么这个方法就获得一个文件夹下的图片文件吧
def getFiles(filepath):
    files = []
    if os.path.isdir(filepath):
        for file in os.listdir(filepath):
            if os.path.isdir(file):
                getFiles(file)
            elif file.endswith('.jpg') or file.endswith('.png') or file.endswith('.gif'):
                files.append(filepath + str(file))
    elif os.path.isfile(filepath):
        files.append(filepath)
    return files


# 获取给定目录下所有以.jpg  .png  .gif结尾的文件,并补全路径保存到列表中输出
def recourse(filepath):
    files = []
    for fpathe, dirs, fs in os.walk(filepath):
        for f in fs:
            if f.endswith('.jpg') or f.endswith('.png') or f.endswith('.gif'):
                files.append(os.path.join(fpathe, f))
    return files



# 生成网页源码文件,指定
def generate(files, shuffle=False):
    template_start = '''
    <html><head><meta charset='utf-8'><title>网页版相册</title><link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
    <link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css"></script></head><body>
    '''
    template_body = ''
    # 如果指定乱序,就乱序列表中的数据
    if shuffle == True:
        from random import shuffle
        shuffle(files)
    for file in files:
        template_body += '<a href="' + file + '"><img class="shake-slow" src="' + file + '" style="width:64px;height:auto;"></a>'

    template_end = '''
    </body></html>
    '''%
    html = template_start + template_body + template_end
    return html

# 生成html文件,并输出到指定的目录
def write2File(filepath, data):
    file = open(filepath, 'wb')
    file.write(data)
    file.close()
    print 'Write to file Scuuess!'


if __name__ == "__main__":
    # E:\\Picture\\LOFTER\\
    filepath = 'E:\\Picture\\LOFTER\\'
    files = recourse(filepath=filepath)
    for item in files:
        print item
    html = generate(files, True)
    output_path = r'C:\Users\Administrator\Desktop\test.html'
    write2File(filepath=output_path, data=html)
    print 'HTML相册文件已生成在桌面,请查看'

总结

  • 首先说一下缺点:

    • 缺点很明显,对于中文支持的不够好,因为查看图片大图的时候是以超链接的形式出现的,所以会发生乱码的情况。
    • 然后是优点:
      优点不是很明显,因为如果一个文件夹下面有很多的子文件夹,或者图片很多的时候,就会很慢了。
  • 然后说一下可以改进的地方

    • 引入JQuery,添加双击事件相应,实现双击删除不想要的图片

    • 使用多线程的方式运行代码,加快网页的生成速度

最后,我想说的是,虽然这是个娱乐性质的小东西,但是多发挥一下想象力,不断地完善,对我们开发而言,一定会有帮助的。

目录
相关文章
|
7月前
|
移动开发 JavaScript 安全
分享66个相册特效,总有一款适合您
分享66个相册特效,总有一款适合您
80 5
|
13天前
|
移动开发 数据安全/隐私保护 SEO
(H5自适应)响应式相册图片网站模板 图片壁纸类网站源码下载
1:网站的代码都是纯手工DIV+CSS、代码精简有利于SEO优化。 2:自适应和代码适配两种模式,新版的HTML5技术,给您高端视觉体验。 3:全站每一个细节都做了SEO框架布局,栏目及文章页均可独立设置标题/关键词/描述。 4:附带测试数据、不需安装、上传即用、轻松简单。 5:后台直接修改LOGO、轮播、联系方式、传真、邮箱、地址等,修改更加方便。
42 11
|
4月前
简约好看音乐播放器网页网站MP4播放器源码
简约好看音乐播放器网页网站MP4播放器源码,music是存放音乐的文件夹,添加音乐也是非常简单,参考上图自己研究去吧,不多说了。
48 1
简约好看音乐播放器网页网站MP4播放器源码
|
4月前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
小程序 前端开发 JavaScript
微信小程序 | 使用 canvas 生成朋友圈分享图片并保存到手机相册
小程序只能转发给好友,或者转发到微信群,并不能转发到朋友圈,那么朋友圈的巨大流量应该怎么利用起来呢?
761 0
类似微信图片浏览,常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览
本项目受Google官方demo Zooming a View 启发,实现了点击小图放大至全屏预览,退出全屏恢复至原来位置这两个过程的动画过渡。 常见应用场景如微信朋友圈照片九宫格和微信聊天图片预览,某些手机系统相册等viewpager图片查看 缩放 拖拽下拉缩小退出(效果同微信图片浏览) 特点1.支持自定义图片加载框架。
2268 0
|
JavaScript 前端开发 HTML5
ShineTime - 带有 CSS3 闪亮特效的缩略图相册
  ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果。特别适用于个人摄影作品,公司产品展示等用途,快来来围观吧。
907 0
|
iOS开发 前端开发 敏捷开发
『精品素材』20套免费的网页小图标素材下载
  在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用。下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊。 您可能感兴趣的相关文章 10套华丽的Windows8 Metro风格图标 让人爱不释手的13套精美网...
1111 0
分享20套精美的免费 PSD 网页加载进度条素材
  随着用户对网站使用体验要求的提高,现在网站和 Web 应用程序都会在网页内容还未加载进来的时候向用户显示动态的加载动画或者提示文字。20套精美的免费 PSD 加载进度条素材。这些漂亮的 PSD 网页界面素材可以让您的工作得心应手,帮助您节省大量的时间和精力。
947 0
精美网站设计:25个以全屏照片为背景的网页作品
  高质量的照片能够给网站带来强烈的视觉冲击力,不仅能够增强设计的美感,还可以突出网站的主题。在使用这种大照片作为网站背景的时候,为了能够和网站的其它内容很好的融合在一起,你需要考虑很多事情,否则可能会导致网站内容杂乱,反而适得其反。
1067 0