新网站再做，重写了之后考虑的不是那么多花里花哨的，而是简洁好用耐看更快极致，当然这都建立的我以为。这次就再做的需要图片展示的时候多花点了时间，由于平时工作也没多少时间，闲下来不是打游戏就是写写代码，很难静下心来做一件事情，但这次疫情的原因和政策的大放开，我有幸可以在家里居家办公，顺便也琢磨一点我自己的事情。为了提前拿出来我把这现在用的图片预览插件换成自己写的尝试一下，废话不多说，先看效果。
先上两张图预览感受下。
这次的写的插件没有用jq，后面的话都会去掉jq这个库，能用原生 js 尽量都手写，减少其他插件带来的依赖。
整体我感觉还是可以的，图片的放大缩小动画的处理，最重要的一点是图片在任何大小的时候弹出来的时候都会有一个逐渐放大和缩小的效果，这个效果我在很多图片预览插件都没有看到处理很OK的，一般的都是设置图片的自适应大小，然后可以再拿出来放大，这种是很常见，但是如果图片在固定的宽高的情况下再去弹出放大，就会有一个抖动的问题和关闭缩小的时候就有错位的问题，这些都是没处理好的地方。
为了解决上述的图片关闭的错位，我这里用到了 CSS3 的一个新属性 clip（裁剪）做的一个动画效果，当然还要计算初始图片位置大小和结束图片位置大小来得到 clip 数据。动画思想借助了我上一篇写的 flip 动画思路 ，有兴趣可以往上一篇看看。
当然插件本身还支持 inline 模式的插入，即便不是图片也可以插入dom元素显示，这样就可以在操作dom查看的时候就有用，看下面的例子
<div class="content">
<h2>这是标题</h2>
<p>这是一段文本</p>
</div>
// 给定插入的 class
<a data-model=".content">打开</a>想要使用也很简单，就是给每个打开的图片标签上加一个自定义属性 data-model 可以是任意（我没做那么多测试），也可以是 class 类名，然后在设置打开的类型即可。
有需要的话自取哦，
