最近报名参加了360前端星计划,想当一名前端实习生,学习更多更流行的前端知识。然后需要完成一个作业,才能进培训,进了培训还得看运气才能留下,流程不少。书归正传,请看:

课后作业题目

  请从下面两个题目中任意选择一道题完成。

  题目1:使用网页做一份简历,可以根据自己的能力适当添加动画效果和交互。

  题目2:开发一个网页图片查看器,可以缩放、拖动图片。

  好吧,我果断选择了第二题,然后把自己的简历放在了图片查看器的图片中,真是机智啊。下面进入正题。

PicPicker

  光做个查看器好像也没什么意思,我绞尽脑汁想出了一个图片拾取器,PicturePicker,缩写为PicPicker。功能主要是查看图片,然后可以把相中的图片拖到自己的包裹中,然后一键打包下载。

  也就是说,PicPicker共有两部分组成,图片查看器图片包裹。其中图片查看器又分为主窗口图片滑动框。有图更形象:

  

  @图片查看器:可以放大,缩小,旋转图片,双层图实现图片加载时从模糊到清晰,当倍率大于自适应屏幕时,可以拖拽移动,当放大倍率小于自适应屏幕时,可以拖放到图片包裹中(非DnD实现)。并且键盘友好,支持左右键切换图片及鼠标滚轮缩放。

  @图片滑动框:根据图片数量计算滑动框长度,当所点击图片为当前可视区域最后或最前一个图片时,自动滑动呈现更多图片。

  @图片包裹:拖拽删除(DnD API实现),打包下载所选图片的压缩文件。

  具体实现大家可以下载源码来看看,有注释,但是我技术一般,写的有点乱。

总结

  PicPicker的原型主要来源于Windows图片查看器,以及梦幻西游图库。然后加上自己想的那么一个图片包裹,想法就成型了。从想法到写出HTML和CSS用了半天,但是写脚本用了好几天。一开始还在原生和jQuery中间纠结。毕竟是找实习,用原生可能更能体现一点技术。不过越写我越庆幸自己使用了jQuery,现在脚本有900行,用原生写的话代码量翻一倍估计都打不住。

  我写这个应用的顺序是这样的:想法>HTML>CSS>滑动框脚本>查看器脚本>图片包裹脚本>键盘事件>针对低版本IE的CSS hack和脚本调整。由于我这没有IE6,没能测试成,在IE7+运行的都挺和谐。

  自己真收获了很多,源代码放在这里,有兴趣的可以看看。

  另外,还有一个在线体验地址,当网址不能用时,我会把这句话从博客中删除。

  源码: PicPicker.rar 

  在线地址:PicPicker

图片拾取器-PicPicker的更多相关文章

  1. iOS UI-UIPickerView(拾取器)、UIWebView(网页视图)和传值方式

    // // ViewController.m // IOS_0107_finalToolClass // // Created by ma c on 16/1/7. // Copyright (c) ...

  2. 【Android】内存卡图片读取器,图库app

    上一篇<[Android]读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示>(点击打开链接)在真机上測试非常有问题.常常遇到内存溢出.卡死的情况.由于如今真机上的内存上,2G ...

  3. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  4. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  5. 发布两款JQ小插件(图片查看器 + 分类选择器),开源

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

  6. wpf图片查看器,支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  7. 用JQ仿造礼德财富网的图片查看器

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

  8. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  9. .NET破解之图片下载器

    自去年五月加入吾爱后,学习了三个月,对逆向破解产生了深厚的兴趣,尤其是对.NET方面的分析:但由于这一年,项目比较忙,事情比较多,破解这方面又停滞了许久,不知道还要好久. 前些天,帮忙批量下载QQ相册 ...

随机推荐

  1. myeclipse一直卡在loading workbench解决方法

    删除工作空间下.metadata中的org.eclipse.ui.workbench org.eclipse.ui.workbench.texteditor

  2. 【leetcode】Isomorphic Strings

    题目简述: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the ...

  3. git客服端基本操作

    以下操作基于git+gerrit 1.生成公钥 ssh -keygen -t rsa 默认公钥生成路径  C:\Documents and Settings\用户名\.ssh 2.配置姓名和邮箱地址 ...

  4. java中的throw与throws的区别

    什么时运行时异常?什么是非运行时异常? 通俗的讲: 运行时异常:就是编译通过,运行时就崩了,比如数组越界. 非运行时异常:就是编译不通过,这时就得必须去处理了.不然就没法运行了. 全面的讲: Thro ...

  5. vue学习之旅

    大纲: 属性 事件 循环 指令 交互 过滤器 模板 计算属性 自定义过滤器和指令 组件(父子组件之间的通讯) 路由和多层路由以及占位槽slot等其他 vue-loader和模块加载(webpack)等 ...

  6. Android Studio中获取SHA1或MD5的方法

    原来在Eclipse中获取SHA1或者MD5,在IDE界面上就可以查找到. 切换到Android Studio后,如何查看呢?找了半天没找到.那就老办法命令行. 第一步.打开Android Studi ...

  7. Codeforces 144D Missile Silos 最短路

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  8. jQuery参数学习与整理

    bind---可同时为元素嵌套多个事件. blur---当输入框焦点失去时发生的事件(获得焦点参数focus与之同理) change---当元素值改变时发生的事件 click---单击事件 dbcli ...

  9. mybatis配置文件的bug

    看看图片里的配置有什么问题么? url=jdbc--我擦,我怎么这么不小心,换来一整天的不得安宁,上网各种搜bug,把mysql驱动配置到classpath中,jar包放进jdkjre里面还是不行妈的 ...

  10. [RxJava^Android]项目经验分享 --- 递归实现

    介绍一下业务逻辑:获取接口数据,根据接口内容判断是否需要继续获取数据. 本文使用递归思路,通过RxJava来实现此功能,获取数据的Observable直接用模拟的Observable.just()替代 ...