首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽、调整大小、最大化,图片的缩放...因为没有找到相关的插件,所以很多问题都是绞尽脑汁独立思考,比如以鼠标为中心缩放图片、改变弹窗大小时对图片移动的限制、图片旋转之后的缩放、平移等问题,而开发插件最让人头疼的就是细节,甚至大部分时间是在修复单一功能的...4.图片缩放 可以通过鼠标滚轮、按钮、键盘等操作 5.图片旋转 目前的图片旋转功能还没有添加支持 IE9 以下版本的代码。...向右旋转 7.全屏显示 Magnify 的全屏显示只实现了基本的展示功能,还没有实现幻灯片自动轮播的功能。全屏环境下使用键盘控制图片。...除了 Windows 照片查看器,QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果,但是部分功能比如缩略图还没有实现。

3.2K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【第3期】前端常用插件、工具类库汇总

    弹出框 layer:http://layer.layui.com/ 独立维护的三大组件之一(layDate、layer、layim) dialogBox:http://www.jq22.com/jquery-info4822.../slick/ jQuery旋转木马插件slick jQuery slider:http://www.jq22.com/jquery-info889 插件描述:最全最简单最通用的 幻灯片轮播 ,可控制的插件...二维码 jQuery qrcode:https://github.com/jeromeetienne/jquery-qrcode 是一个能够在客户端生成矩阵二维码的jQuery插件,使用它可以很方便的在页面上生成二维码...webuploader:http://fex.baidu.com/webuploader/ 由百度开发的以HTML5为主,以FLASH为辅的文件上传组件。...如果是多张图片压缩需要付费~ 图好快:https://www.tuhaokuai.com/ 一款国内的在线图片压缩。同样大量图片文件压缩需要付费。

    4.4K10

    Thumbnailator的简介和使用范例

    简单介绍 Thumbnailator是一个用来生成图像缩略图的 Java类库,通过很简单的代码即可生成图片缩略图,也可直接对一整个目录的图片生成缩略图。...那我要是有一个文件夹都需要生成缩略图,那还是很麻烦,有没有对文件夹下所有图片生成缩略图呢?...|Graphics.drawImage生成的缩略图 可以在缩略图中嵌入水印,并且可以设置水印的透明度 * * * * 支持生成经过旋转后的缩略图 * * * * * 代码: for...如下面的代码和上面的作用的一样的: Thumbnails.of("original.jpg") .size(160, 160) .toFile("thumbnail.jpg"); 生成一个带有旋转和水印的缩略图...160*160,顺时针旋转90°,水印放在右下角,50%的透明度,80%的质量压缩的缩略图

    2.1K10

    Linux之convert命令

    ,加入新图片,生成缩略图等。    ...我们还可以批量生成缩略图:    mogrify -sample 80×60 *.jpg注意,这个命令会覆盖原来的图片,不过你可以在操作前,先把你的图片备份一下。    ...变成一张油画,效果非常的逼真    convert -paint 4 foo.png bar.png旋转把一张图片旋转一定的角度:    convert -rotate 30 foo.png bar.png...其他其他功能都是不太常用的,如果你感兴趣的话,可以看它的联机文档    importimport是一个用于屏幕截图的组件,下面列出的是我们常用的功能,其他的功能,你参考它的man好了。    ...    h: 水平翻转    v: 垂直翻转    /:顺时针旋转90度    \:逆时针旋转90度    >: 放大    <: 缩小    F7:模糊图片    Alt+s:把图片中间的像素旋转

    3.4K10

    WordPress素锦-超级美的小众博客自适应主题

    favicon 以及添加到手机屏幕所需要的小图片 缩略图相关 网站正常显示需要每篇文章都必须设置特色图片。...显示壁纸 gallery 所需要的缩略图是 300x...,需要在 WordPress 后台 媒体选项 将 缩略图大小 设置为 宽度 300 高度 0。...(推荐:其他都设置为 0) 首页显示文章缩略图大小是 680x440,有两种模式产生缩略图,一种是用原生 WordPress 提供的裁切图片功能,一种是使用 timthumb.php。...: about 关于模版,不可评论 Archive  文章归档模版,不可评论 feedback  评论模版,可以评论 links  友情链接模版,可以评论 开发说明 主题使用了 5 个 js 插件: jquery.justifiedGallery.js...Chocolate.js jquery.qrcode.js jquery.parallax.js Vibrant.js 这些插件都合并在一个文件上: static/plugin.js 修改 css 只需要修改

    2.3K00

    jQuery Mobile 中使用 UI 组件

    利用 jQuery Mobile,您可以创建多种不同的列表格式,如基本链接列表、嵌套列表、编号列表、拆分按钮列表、带分隔符的列表、带图标的列表、缩略图或计数泡泡,以及包括搜索筛选器栏的列表。...class="ui-li-count">12 就像您将一个图片添加到 HTML 页面中一样,您也可以添加一个缩略图。...只需要将一个定位点元素添加到列表项,添加一个用作缩略图图片,然后添加您希望在它旁边显示的副本。jQuery Mobile 就会处理剩下的工作(见 清单 10)。 清单 10....该属性值将一个自定义 jQuery Mobile 选择列表转换为一个切换开关。 结束语 jQuery Mobile 框架提供一个为移动网站创建可用 UI 组件的快速解决方案。...本文并未介绍由该框架所提供的组件完整列表,如需了解有关框架组件的更多信息并观看它们的运行,请查看 参考资料 中的链接。

    8.1K20

    快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    开发技术:HTML 5, CSS 3, JS, jQuery 网站特色: l 滑块 l 响应式视网膜菜单 l 幽灵按钮 l SEO友好 l 设备响应 l jQuery&Javascript插件 l YouTube...主页上有一个带有标题文字的猫头鹰旋转木马滑块。此外,有jQuery UI日历的旅行预订表格。在主页有旅游套餐,最热门的目的地和关于您的公司的部分,让网站访问者和专业外观的网站印象深刻。 5. ...) 作为营养师网站模板,Jessica采用了极简风格的网页设计,颜色搭配非常美观,图片看起来让人很有食欲。...这个模板的设计是完全基于Bootstrap框架,HTML5,CSS3和JQuery构建的100%响应式跨浏览器模板。 3. Asentus - 免费的响应式引导页HTML5模板 ?...只需要通过Mockplus的图片组件导入自己的图片和自定义组件,就可以快速的完成一个中低保真的HTML5网页原型设计。

    10.9K51

    快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    它完全建立在Bootstrap框架中,HTML5,CSS3和JQuery.你可以轻松的将这个模板与任何其他类型的生意相结合。 4. ...主页上有一个带有标题文字的猫头鹰旋转木马滑块。此外,有jQuery UI日历的旅行预订表格。在主页有旅游套餐,最热门的目的地和关于您的公司的部分,让网站访问者和专业外观的网站印象深刻。 5. ...)下载 l 风格指南(开发人员用途和模板设计指南) 作为营养师网站模板,Jessica采用了极简风格的网页设计,颜色搭配非常美观,图片看起来让人很有食欲。...这个模板的设计是完全基于Bootstrap框架,HTML5,CSS3和JQuery构建的100%响应式跨浏览器模板。 3. ...只需要通过Mockplus的图片组件导入自己的图片和自定义组件,就可以快速的完成一个中低保真的HTML5网页原型设计。

    13.1K120

    上传伪技术~很多人都以为判断了后缀,判断了ContentType,判断了头文件就真的安全了。是吗?

    dirPath)) { Directory.CreateDirectory(dirPath); } try { //todo:缩略图...(理论上需要二次渲染下图片,微软Save的时候有应该有一定的验证[我把含有一句话木马图片上传,最后会返回一张空图片]) /// /// public...Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); } try { //todo:缩略图 +...生成了一句话图片木马 ? 第2个,用edjpgcom 打开一张图片就可以直接插入一句话木马了 ? 图片跟之前看起来没什么不同的 ? 用WinHex看看~ ? 上传测试 ? 成功上传了 ?...有人说把图片另存为其他格式就能消除一句话木马。。。。。呃,好吧,你可以这样理解~看图: ?

    1.3K80

    JPEGExifTIFF格式解读(4):win10照片旋转win7不识别。

    IFD1中的数据是缩略图的图像及该图像的元数据。Maskernote IFD中是制造商自己定义的元数据,没有标准,有些商家的数据也不对外公开。...,而图片的内容不会做任何改变,包括旋转后的宽度与高度也不会做改变,包括JPEG和EXIF中的宽度与高度信息。...10进行旋转图片,如果在Windows XP或Windows 7上面通过“相片”进行查看仍然显示为未旋转前的图片,因为不识别这个标志位。...但是,如果是在Windows XP或Windows 7当中,对图片文件进行旋转时,文件的内容做了全面的变化。旋转后的宽度与高度也会改变并保存到EXIF中,图片内容的改变。...Windows 下用缩略图视图查看图像会按照【第一步读取当前文件夹下Thumbs.db – 如果没有Thumbs.db文件则读取图像exif缩略图信息 – 如果图像文件没有exif缩略图信息则生成缩略图信息并保存至

    1.4K10

    WordPress 中部署真正的懒加载(Lazy Load)

    不少WordPress 主题(包括DeveWork.com目前的主题)都有部署jquery 插件“懒加载”(Lazy Load),但其实很多都不能产生真正的懒加载(包括本站主题),充其量只是有个“淡入淡出...可以参考mg12 的《Lazy Load, 延迟加载图片jQuery 插件》,该文章已经非常较详细了。一些难理解的知识点可以参考该文。...因此,文章中的图片(编辑器写成的文章中的图片),除非特殊情况,否则没必要去弄这个懒加载。 那么,在WordPress 中,懒加载(Lazy Load)可以运用在哪里了? 图片缩略图,还有头像图片。...缩略图的懒加载 相信不少博客主题的首页文章排版都是 缩略图+文章摘要 的格式,其中的缩略图不少还是用timthumb 截图的。那么这种排版格式就给懒加载提供了便利,我们只需要小小改动一下代码。...对于缩略图,找到代码可能如下: /timthumb.php?src=<?

    1.2K70

    史上最全的njRAT通信协议分析

    控制端: 木马配置选项如下: ? 控制界面如下图 ? 木马程序 总体的代码结构: 对于被控端代码(也就是木马程序)的总体代码结构如下图: ? 木马的Main函数入口只是调用了Ok类的ko方法。 ?...结束木马端的运行,@重新启动木马客户端, ~卸载木马程序 卸载木马程序主要进行下面的操作 ? ?...聊天通信的实现: 从注册表中得到ch的组件,大小为 0×3000。 ? ? 屏幕图像的通信: 这里的通信并不是“远程桌面”的效果,而是下图中的缩略图的通信内容 ?...通过CopyFromScreen得到屏幕截图保存到图片格式,随后将此次生成的图像与上次生成的图像进行md5比较,如果md5不一致,则发送这次的截图数据。...通信的数据包内容为: CAP|'|'|35|'|'|23 表示向受控端请求的图像是用来显示在主控端的缩略图中 ? 远程桌面的通信: 远程桌面的效果图: ?

    3.4K60
    领券