![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器
文章平均质量分 67
想必是渣渣宇了
soCoooooool~
展开
-
react组件封装:可视页面内盒子渐显上浮
需求滑动到可视窗口时,自下向上进行渐显不影响内部盒子的布局结构高度自定义(延迟时间,下沉距离)效果图(gif较慢,实际上要快一些):实现思考像这种的需求,由于很多参数都是需要变量填充的,而且得保证内部盒子不会受影响,所以首先排除绝对定位来实现,而是使用 transform:translate(l/r,t/b) 来进行一个位置的变换。然后再配合opacity完成渐显。设置过渡(transition)来决定延迟时长步骤首先它得是一个组件获取到当前页面所有的目标dom判断当前视图中有原创 2021-10-15 09:13:38 · 444 阅读 · 0 评论 -
跨页面拖拽DOM - transmat
亮点:跨越浏览器边界,实现数据共享本文仅简述如何快速在页面内实现,若想了解原理,请前往文末的链接!实现方式 react - HOOK拖拽方: // 引入 js文件 <script src="https://unpkg.com/transmat/lib/index.umd.js"></script> // jsx // 设置 draggable="true" 表示此DOM可进行拖拽 <div className="draggable"原创 2021-07-16 10:50:37 · 457 阅读 · 0 评论 -
移动端 H5 相关疑难总结
本文主要讲解关于移动端H5页面内的一些小操作、与app之间的交互注意事项A. 本文提及的安卓系统包括Android和基于Android开发的系统B. 本文提及的苹果系统包括iOS与iPadOSC. 本文内的大部分内容都是适应绝大多数浏览器的,所以除去某些偏门操作不用担心兼容问题D. 本文是针对移动端浏览器的,所以下文提到的浏览器均为移动端浏览器,PC上不一定会有效HTML调用系统功能使用 < a > 能快速调用移动设备的 电话/短信/邮件 三大通讯功能使用 < input原创 2021-02-03 16:46:11 · 961 阅读 · 0 评论 -
rem.js
(function (designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var tid; var rootItem, rootStyle; function refreshRem() { var width = docEl.getBoundingClientRect().width; if (!maxWidth) {原创 2021-02-03 14:33:26 · 133 阅读 · 0 评论 -
关于X5内核(微信浏览器) 中 video 的处理
不全屏状态,不弹出播放层的话 X5里面的video最好只加这三个参考链接: 腾讯文档–X5内核视频之问答汇总转载 2020-06-03 11:09:09 · 2452 阅读 · 2 评论