实现图片预览效果及模糊效果

一、图片的预览效果

本次实现是在vue-cli中实现的路由来实现图片的预览效果

第一步定义两个组件命名为HelloWorld.vue和Layer.vue

第二步需要配置两个组件的前端路由

代码如下:


实现图片预览效果及模糊效果

第三步在HelloWorld的组件中完成需要预览的小图片如图


实现图片预览效果及模糊效果

此实现比较简单css布局不做过多说明,使用router-link把参数传递到layer组件

HelloWorld组件中代码如下,


实现图片预览效果及模糊效果

Layer组件中的代码如下,通过定位和margin将图片实现上下和左右同时居中,并通过router-link返回到HelloWorld页面


实现图片预览效果及模糊效果

以上是通过vue路由实现。

另外可以通过第三地方的api(钉钉api)来实现图片的预览功能

即 给小图片添加点击事件,来调用钉钉的api预览图片

代码实现如下:


实现图片预览效果及模糊效果

调用的maxImg方法:


实现图片预览效果及模糊效果

二、图片的模糊效果

先看效果对比


实现图片预览效果及模糊效果

代码设置


实现图片预览效果及模糊效果

项目中的应用

描述:背景是一张模糊的图片,同时有一个半透明蒙层

实现图片预览效果及模糊效果

实现方法

html部分代码:

实现图片预览效果及模糊效果

header是最外层的盒子,样式为


实现图片预览效果及模糊效果

然后设置背景图的样式


实现图片预览效果及模糊效果

当不给header添加overflow:hidden属性的时候,由于我们给背景图片使用了filter属性会导致背景图的阴影溢出,如下图

实现图片预览效果及模糊效果

所以需要给header添加overflow:hidden属性


实现图片预览效果及模糊效果

以上是自己在项目实践中的实现方法,大家有其他的方法实现的欢迎来讨论,指导!

上一篇:sticky footers布局


下一篇:二分查找算法