WEB前端

分类:WEB前端

WEB前端

前端输出的2个小技巧

1、使用CSS实现带边框的对话框 如果需要实现下图的效果,我们会把左侧三角切成图片,定位在上方盖住元素,其实我们可以用更为灵活易维护的方式实现。 我们知道css可以实现三角形,虽单个元素不能实现带边框的三角形,那就用2个元素,即搭配伪元素,构思图如下 只需把上方的三角元素颜色改为对话框背景颜色即可,实现CSS代码如下: 最终效果,可兼容I……

WEB前端

JS如何对列表数据根据字段进行排序

近期遇到个问题,需要把Ajax获取到的国务院信息Json列表数据进行按发布时间倒序,于是在查找了相关资料后,在参考的代码基础上增加了参数:倒序/正序 改进后的排序函数代码: 最终效果的Demo演示代码 调用排序函数使用方法:data = data.sort(arrObjectOrder("pubDate", "DESC")); 根据排序前……

WEB前端

微信小程序实现搜索结果“关键词”高亮效果

为更好用户体验及设计效果,搜索结果列表都是需要对关键词进行高亮显示的,对关键词进行“<text class='high'>关键词</text>”样式定义,如果通过服务端返回wxml格式,在页面是不会被解析的,直接显示代码了,所以就需要在前端进行处理,先附上代码: JS代码: wxml代码: CSS代码: 原理是,对……

WEB前端

微信小程序下载附件处理方法

新建download.js文件放在utils目录,在页面中引入这个js 代码执行流程是:弹窗让用户选择打开是保存,选择打开则客户端尝试打开,打开失败则自动保存文件,保存文件目录是微信指定的随机文件夹,文件名保持原来一致。 在页面中使用示例: PS:附件下载地址可由wxml页面中的属性获取,看情况使用

WEB前端

CSS + JS 网站变灰(变黑白),兼容所有浏览器。

有的网站可能需要用到全站黑白功能(一般常用于悼念日) ,最方便就是增加css代码,但经测试不兼容IE10、11浏览器,所以配合grayscale.js这个插件,可以完美兼容所有浏览器,这里我制作了个一键变黑白的按钮, 按钮代码用到了JQ,需引用,可点击下面看效果: 点击这里页面变黑白 CSS: HTML及JS: grayscale.js下……

WEB前端

在线图片强力压缩工具 - Squoosh!

这次就分享一个在线的小工具吧,对于前端人员来说挺有用的,名称是:Squoosh! 是Google 开源发布的一款专门用来压缩图片的在线服务,支持 JPG、PNG、WebP 等格式的极限压缩。因为政府类的设计都流行了大背景图的形式了,能很好展现地方特色和网站美观,但背景图片多数是1080P的分辨率,有的可能更大,以保证在大分辨率的显示屏能正……