日常小纠结
jocchoc
生活最沉重的负担,不是工作,而是无聊
展开
-
移动端active伪类无效,最佳解决办法
移动端active伪类无效,最佳解决办法前言active伪类,常用于按钮点击态的样式。然而移动端ios web页面,常遇到active伪类无效的问题。一、为什么无效参看链接:https://developer.mozilla.org/en-US/docs/Web/CSS/:active#browser_compatibility二、最佳解决办法body标签加上ontouchstart属性。用js去监听touchstart亦可,但不够优雅。...原创 2021-02-25 17:40:31 · 885 阅读 · 0 评论 -
背景图片切换实现轮播效果,并解决抖动问题
应用场景页面需要做持续性图片切换的效果。考虑到页面的性能消耗,采用css3控制一张sprite背景图切换来实现效果。部分代码展示这里是一个宽高比2:1的图片.want-club { position: relative; width: 36%; height: 0; padding-bottom: 36%; background-imag原创 2017-12-14 16:17:04 · 7170 阅读 · 0 评论 -
解决Fixed布局失效的问题
解决transform导致的Fixed布局失效的问题问题描述当父元素存在css3的transform属性时,会导致子元素的fixed布局失效(其表现像化为absolute布局)。场景示例例如在vue-cli项目中,长遇见这种情况。当使用vue-router路由切换效果,导致页面固定在底部的按钮布局失效。路由切换完毕,按钮归位。解决办法经过一番折腾,总结最好的解决办法就是。用...原创 2019-05-16 17:38:22 · 5782 阅读 · 0 评论 -
百度地图API,自定义圆形头像标柱
web端基于百度地图,呈现自定义圆形头像项目需求基于百度地图,在当前用户的位置上,呈现用户圆形的头像。并附加一个水滴状的背景图。如图所示:基本思路原本打算通过BMap.Icon分别来添加水滴背景和头像,并用叠加的方式来显示。但是后台返回的头像是矩形,API里面也没有找到圆角化功能。所以,此处使用自定义标柱的方式来实现该功能。(如果后台返回的图片为圆形,建议用叠加的方式)具体...原创 2019-07-17 10:42:56 · 1477 阅读 · 3 评论