元素的display方式是inline和inline-block的时候，出现多余的空白
摘要：解决办法 1.编写代码的时候，元素之间不要换行。 2.设置父元素的font-size为0或line-height为0。 3.设置元素的vertical-align属性为baseline以外的值。
阅读全文
posted @
2025-03-11 17:20
sxb_sunday
阅读(1)
推荐(0) 编辑
drag实现元素移动的bug
摘要：js的drag事件，如果结束拖拽的相对DOM的位置偏移初始开始拖拽时的相对DOM位置(一般如果没有在drag事件里面适应修改DOM的位置(比如修改frame的left，top)，那么拖拽鼠标是一定会满足的这个条件的)，那么会在松手的一瞬间将鼠标坐标重置到屏幕最左上角并触发drag时间，所以通过dra
阅读全文
posted @
2025-01-31 16:02
sxb_sunday
阅读(4)
推荐(0) 编辑
实现一个可缩放并支持滚动的图片容器 解决transformOrigin导致图片左上部分不可见的问题
摘要：实现一个可缩放并支持滚动的图片容器 在这篇博客中，我将介绍如何实现一个简单的交互功能：在一个 div 中放置一张图片，通过鼠标拖动操作实现图片缩放，并且在图片放大后，滚动条能够调整位置以查看被放大的部分。 以下是具体实现的代码和步骤。 功能概述 鼠标交互：当按下鼠标时记录初始位置；松开鼠标时，根据鼠
阅读全文
posted @
2025-01-29 00:52
sxb_sunday
阅读(29)
推荐(0) 编辑
如何使浏览器窗口获取焦点 window.open实现focus效果
摘要：最近公司的内部系统开发遇到一个问题，需要实现跨窗口的不同画面的获取焦点问题模型如下： 画面A通过window.open打开了画面B和画面C，然后想在点击画面B的按钮的时候，跳转到画面C。正常考虑的应该是通过window.focus()去解决，但是这里发现window.focus()只有在打开这个画面
阅读全文
posted @
2025-01-25 20:40
sxb_sunday
阅读(27)
推荐(0) 编辑
开源背书神器anki的安卓端bug-如何实现卡片正反面的值传递
摘要：0.最近学习需要，下载了anki的安卓端，但是在使用选择题的卡片模板的时候，遇到了bug（因为这个软件免费，所以作者也没有花很多时间维护吧=_=.IOS端是没有这个bug的，但是IOS需要128软妹币，好贵。。）。 1.bug内容：这个卡片模板，正面是题干和选项，点击显示答案之后，会显示卡片背面，背
阅读全文
posted @
2024-10-20 22:11
sxb_sunday
阅读(81)
推荐(0) 编辑
可能引起画面gif图片显示掉帧的问题
摘要：以下内容针对在IE11浏览器的情况，其他edge，chrome可能有些微差别。 GIF文件本质上是一个包含多帧静态图片的动画文件。当GIF播放时，浏览器只需按顺序显示这些帧，从而产生动画效果。 GIF动画帧切换过程： 解码GIF文件：当GIF被加载时，浏览器会解码GIF文件，提取出每一帧的图像数据。
阅读全文
posted @
2024-09-01 21:32
sxb_sunday
阅读(107)
推荐(0) 编辑
浏览器图片的加载与渲染详解
摘要：对于响应头中没有指定缓存策略的资源（图片，js，css等），浏览器默认会缓存，当再次请求这些资源的时候，会优先从缓存中获取，缓存命中且在有效期内的话，则不会发出请求，缓存命中但超过有效期，这时候会和服务器协商缓存（此部分内容本文不做解析）。 默认缓存策略是启发式缓存，缓存有效时间的计算式：（请求时间
阅读全文
posted @
2024-08-30 14:59
sxb_sunday
阅读(265)
推荐(0) 编辑
阻止a标签的跳转，a标签自动跳转引起的错误
摘要：a标签，有默认的点击事件，点击之后会跳转到href里面定义的网址去，有时候不想a标签默认的点击事件生效（因为可能会造成错误，比如系统有token的check之类的情况或者只是想用a标签的样式，而不需要它的跳转功能），可以有下面两种方法 <a href="javascript:void(0);"></
阅读全文
posted @
2024-04-30 20:18
sxb_sunday
阅读(282)
推荐(0) 编辑
