微信更新后，发现多了个悬浮窗功能。公众号阅读，网页浏览回退后默认会出现。再点击，可以回到刚才阅读的地方。于是，再也不会遇到回复老婆的信息，再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。
其交互效果，也被不少人称赞。例如，窗口会收缩到悬浮按钮中，悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢，使用web前端技术也是可以实现，有demo，有截图，有必要的源代码展示，希望本文的内容能够对您的学习有所帮助。
文章关键字 ‘图片剪裁’
微信网页悬浮窗交互效果的web实现
2018年06月6日，星期三半深入理解CSS3 object-position/object-fit属性
2015年03月15日，星期日
现代web显示环境万变，响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局（任意宽度水平自适应）都比较常见，结果，在处理这些有着固定尺寸的元素的时候，就会遇到障碍，例如，一个2:1的视频，永远要等比例充满容器，但是，随着浏览器宽度不一样，容器的长宽比有可能小于2，也有可能大于2. 你说，你能轻松实现小于比例2时候，视频宽度100%；比例大于2的时候，高度100%吗？
显然，很麻烦，最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求，object-fit和object-position才应运而生……
CSS3/SVG clip-path路径剪裁遮罩属性简介
2014年12月22日，星期一CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类，还有很重要的一个分支：SVG属性家族！
所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性，可以游走于SVG属性和CSS属性之前。本文中等篇幅，中等难度，丰富的源代码展示，丰富的demo页面，丰富的截图，还有必要的gif演示，总之，希望本文的内容能够对您的学习有所帮助！
CSS clip:rect矩形剪裁功能及一些应用介绍
2011年04月2日，星期六
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。实际上clip是实在在的可以在实际项目中大放光彩的东东。
本文一如既往，提供必要的demo页面以及源代码展示，提供属性的一些具有代表性的实例。总之，希望本文的内容能够对您的学习有所帮助。
图片旋转+剪裁js插件(兼容各浏览器)
2010年05月6日，星期四在现在的web应用中，对上传的图片，例如头像，原始的摄影照片常常需要在web页面上进行一些处理，常见的处理就是剪裁与旋转。但是，似乎就目前而言，缺少即支持剪裁又支持旋转且轻量级的js插件。于是，我就抽时间写了个简单的插件。
兼容各个浏览器，使用canvas元素实现旋转，封装良好，希望能对您有所帮助。
jQuery照片图像剪裁插件Jcrop中文翻译详解
2009年11月13日，星期五
在现阶段的网络应用上，凡是涉及到头像上传的，都会对头像照片进行高宽比例固定的图片剪裁处理，方便开发维护。而为了节约开发时间与成本，有时候我们可以试着使用一些jQuery插件来实现图片剪裁，其中Jcrop就是一款很不错的图片裁剪插件，然而，目前无好的中文讲解演示页面，所以我花了一天的时间将原来的英文的项目页面以及多个demo页面全部汉化变成中文，并对部分内容进行删改，方便中文用户的使用与学习。
本文讲解了图片裁剪的些方法，优缺点，讲解了Jcrop的demo的一些情况，并附加其余几个图片剪裁插件的项目地址，demo等。
文本提供完整的中文demo演示页面以及源文件下载，希望对您有所帮助。
我的应用
我的应用