首页
学习
活动
专区
圈层
工具
发布

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

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽、调整大小、最大化,图片的缩放...演示 如果你不想点开网址查看示例的话,可以通过下面的 CodePen 查看插件效果,除了视窗的大小之外,两种方式没有任何区别: See the Pen A jQuery plugin to view images...如果你的网速和其他原因不能打开 CodePen 的话,可以查看下面的图片演示。 主要功能 Magnify 的功能可以参考 Windows 照片查看器,基本完成了可以实现的所有功能。...1.模态窗拖拽 如果图片尺寸不大于展示区域,通过图片展示区域也可以拖拽弹窗。这和 QQ 图片查看器的操作方式是相同的。 2.模态窗调整大小 可以通过参数设置模态窗的最小宽高。...除了 Windows 照片查看器,QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果,但是部分功能比如缩略图还没有实现。

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

    Android 仿微信, QQ 裁剪

    这篇博客实现的功能主要有仿微信,QQ 上传图像裁剪功能,包括拍照,从相册选取。裁剪框的样式有圆形,正方形,九宫格。...主要讲解的功能点 使用说明 整体的实现思路 裁剪框的实现 图片缩放的实现,包括放大,缩小,移动,裁剪等 我们先来看看我们实现的效果图 拍照裁剪的 ? 相册裁剪的 ?...,移动,裁剪等 因此,为了方便日后的修改,我们将裁剪框的功能单独提取出来,图片缩放功能提出出来。...我们通过监听 ClipViewLayout 的 onTouchEvent 事件,设置 imageView 的图片矩阵。 我们先来了解一下,主要有三种模式,NONE,DRAG, ZOOM。...left, top,right, bottom 是否在图片裁剪框之内,如果在的话,需要对图片矩阵进行移动。

    1.9K31

    仿QQ音乐(HTML+CSS)

    @TOC 一、‍网站题目 音乐网页设计 、仿网易云音乐、各大音乐官网网页、明星音乐演唱会主题、爵士乐音乐、民族音乐、等网站的设计与制作。...要有JS特效,如定时切换和手动切换图片轮播。 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 。...网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。...其中: (1)html文件包含:其中index.html是首页、其他html为二级页面; (2) css文件包含:css全部页面样式,文字滚动, 图片放大等; (3) js文件包含:js实现动态轮播特效...--- 四、网站演示 图片 图片 五、⚙️ 网站代码 HTML结构代码 <!

    8.4K20

    仿qq聊天及定位等

    如:MSG|发送人ID|2012-2-12 07:25:12|发送类型      MSG是个标识,类型包括文本(包含表情),图片,语音,位置等。...图片和语音的发送,都是通过FTP先上传文件到服务器,然后把本地存储的路径发送给对方。 在聊天的页面中,用户的头像都是在本地存的。包括聊天的信息,也是本地数据库存的。这样就能记录信息。...                cursor.close();                 database.close();                 return de;         } 图片的查看和语音的播放...仔细看源码的话发现,在进入页面适配数据的时候已经从数据库读取内容了,而在适配器中查看图片,又重新读取了一次, 主要是因为,不这样做还是不能正确显示和播放。  对这个问题很费解。

    97260

    QQ空间缓存图片_QQ空间原图

    今天偶然打开PC端QQ空间时,我发现了一种似乎更好的方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。...顺着思路,一键 f12 打开源码,我看到了这样的代码: 显而易见,QQ应该是采用了js监听鼠标位置的做法,动态改变 img 标签中自定义属性的值,并根据此去改变图片的 margin-top..."img/nan.png" class="img" /> 这里class为before和after的两个标签就是前面所说的“占位”元素(至于QQ...再回到PC端QQ空间 —— 我们发现,它的transition时间竟然是动态变化的: 这…我猜测可能是设定了一个从上到下固定的时间,然后在JS中按照滑出部分高度(已经滑动的距离)占总高度的比例动态调节时间...相关代码笔者正在尝试ing ---- 当然,本文对QQ前端团队对图片的处理来说也许只是沧海一粟,,,更多的还有比如:根据图片整体平均色差调整说明文字的颜色黑/白(canvas-getImageData

    7.9K20
    领券