参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图. 2.右下角不支持拖动白色区域 主图跟着变位置,参考的博客里有这方面支持的代码,但不完善,这里也没有做. 源代码 http://pan.baidu.com/s/1qXYVFcg…

本例中的大图模式使用图片控件展示,监听控件的鼠标滚轮事件和移动事件,缩略图和鹰眼模式采用装饰器对象IndicatorObject和Canvas布局.百分比使用一个定时器,根据图片的放大倍数计算具体的数值显示. 首先看看效果图: 以下开始绘制图片 定义缩略图上白色的矩形,这其实是一个Indicator,它的外围是一个Canvas,然后缩略图是一个Image控件 internal class IndicatorObject : ContentControl { private MaskCanvas…

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. 多张图片切换,键盘左右键或左右箭头切换 2. 旋转 3. 放大,支持鼠标滚轮 4. 缩小,支持鼠标滚轮 5. 右下角缩略图 6. 拖拽大图 7. 全屏 PS:下面是插件各状态下效果,demo示例会在最后放出来. 全屏 全屏是容器的最大化. 缩小 可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片. 放…

—————————————————————— <script type="text/javascript">                    var arr = ['1.jpg','2.gif'];            function next(){                var img = document.getElementById('the_img');                var src = img.src;              …

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化,图片的缩放.旋转,平移.键盘控制等.插件的样式都是最基础的 CSS,定制非常容易,可以轻松修改成自己喜欢的样式.随后会陆续发布 React 及 Vue 相关版本的插件.本文主要介绍插件的特点及使用方法,而关于插件开发的细节将会在之后的具体文章中说明. Github: https://github.c…

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化,图片的缩放.平移.旋转,键盘控制等.插件的样式都是最基础的 CSS,定制非常容易,可以轻松修改成自己喜欢的样式.随后会陆续发布 React 及 Vue 相关版本的插件.本文主要介绍插件的特点及使用方法,而关于插件开发的细节将会在之后的具体文章中说明. Github: https://github.c…

最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class="PictureViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi…

原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要DataTemplateSelector了: class MessageDataTemplateSelector : DataTemplateSelector { public override System.Windows.DataTemplate SelectTemplate(object item,…

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l…

现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互.滥用插件,像今天要仿造的图片查看器,礼德财富也是直接套用的一款叫fancybox的插件: 个人觉得一名合格的前端还是要少用外部插件,减少代码冗余,也方便自己维护(毕竟自己的代码自己一清二楚). 今天咱用JQ来做个属于我们自己的图片查看器,刚好我项目也要用到. 还是老样子,大家可以到我的Github…