文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    css 实现刘海屏样式兼容并支持 js 获取刘海屏高度后动态修改

    css :root { --safe-area-inset-top: 0px; --safe-area-inset-right: 0px; --safe-area-inset-bottom:...由于安卓不支持 constant css 函数，以及安卓 9 以下低版本系统不支持 env css 函数，会导致获取的结果为 0 从而导致 calc 计算结果也为 0 ，所以要在初始化写为 0px，则通过...css  @supports 来判断支持 constant 和 env 函数的情况下再赋值刘海屏高度值。...js 通过与iOS 和安卓的接口获取到客户端返回的实际刘海屏的高度，当返回的高度存在时，则重新赋值 root 跟元素的变量，否则用浏览器默认的。...js vue3 代码 import { readonly, reactive, watch, ref } from 'vue' import { setRootProperty } from '@/common

    1K10

    「jQuery」基础 - 01

    请注意，本文编写于 2075 天前，最后修改于 173 天前，其中某些信息可能已经过时。...简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。...相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。...方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。...over:鼠标移到元素上要触发的函数（相当于mouseenter） out:鼠标移出元素要触发的函数（相当于mouseleave） 如果只写一个函数，则鼠标经过和离开都会触发它 hover事件和停止动画排列案例

    9.2K21

    CSS实现一个粒子动效的按钮

    效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦（所有js实现的通病），这里尝试一下CSS的实现方式。 生成粒子 抛开js方案，还有HTML和CSS实现方式。... 一般情况下我不是很喜欢这种方式，标签太多，结构不美观，而且有可能对现有的页面造成其他影响（很多情况下并不方便修改原始HTML结构） 那么来看看CSS实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加...我们需要是鼠标离开时不收缩回去，如何实现呢？...很简单，把transition设置在:hover下就可以了，表示只有当鼠标经过时才有过渡，离开时没有 .button:hover::before{ background-position: 5% 44%...很遗憾，只有当只有按住不动的时候才能触发，一旦鼠标抬起就没有了，这个时候我们就需要换个角度了。

    2K20

    一个页面搞定几乎所有的列表需求的实现思路和一点代码。

    DataSource直接用就可以了，不用修改；而DataBind()就需要override一下了。      我们还要先定义一个 Dictionary，用于存放GridColumnsInfo集合。...样式/CSS，恩，就交给CSS来处理吧，定义几个css： css_Grid1 ：描绘table， css_GridTR：描绘页眉， td：控制td， css_TR_c1、css_TR_c2、css_TR_c3...css_TR_move ：鼠标经过时的样式； css_TR_CK： 鼠标单击杭的样式。      最后就是写几个js函数来控制鼠标经过和单击的效果。      这里有演示效果。...= null)             {                 //输出js脚本                 System.Text.StringBuilder js = new StringBuilder...(js.ToString());                 if (this.DataSource is DataTable)                 {

    1.6K80

    以文件修改时间戳做 CSS、JS 等文件的版本号，减少主动清理更新缓存的次数

    每次修改 WordPress 的 css 和 js 文件，都要主动清理文件的缓存才能生效，尤其是采用了 oss 和 cdn 回源。...使用函数 filemtime() 获取文件修改时间戳，并以此做版本号，比如 my.js?ver=1639757946141 就不用再去手动刷新缓存了。 注意文件必须是 相对路径，使用绝对路径会报错。...>" type="text/css"> js/jquery.min.js?...>"> WordPress 引用脚本 css/js 范例 //get_template_directory() 获取函数获取主题模板目录//wp_enqueue_style() 安全引入...css//wp_enqueue_script() 安全引入 js//代码中的 css 和 js 路径，请根据主题的实际路径修改 function theme_scripts() { wp_enqueue_style

    1.6K20

    一杯茶的时间，上手 Git 团队协作开发

    如果经讨论后发现需要修改，则在本地仓库修改后直接 git push 继续提交即可。如果代码通过了评审，则会由项目管理者将此分支并入 master 中，本次贡献代码流程结束。...存在依赖关系且没有修改同一文件 现在我们又假设大唐在开发着陆页的首页 index.html，煨鸽负责写着陆页的样式 index.css，很明显大唐的开发任务依赖煨鸽。...然后略经修正，将 index.js 改为如下： function add(x, y) { return x + y; } function multiply(x, y) { return x...Remove 'warning' module from the JS scheduler 这里的动宾结构是 Remove 'warning' module，修改对象是 JS scheduler。...我们可以选择特定一行来发表评论，只需把鼠标移到行首，就会显示一个加号，如下图。

    1.5K20

    Tab选项卡切换效果

    因为明天是星期六，哈哈哈 好了，今天要推荐给大家的这个js动画效果，基本上每个网站都会出现，就是tab选项卡的切换效果。...这个效果如果使用jQuery这些框架的话，写起来就很方便，但是，为了提高我们的写原生js的能力，所以我一般都会说用原生js来写，如果大家会js框架的话，也可以学着去用框架写。...首先是HTML： 然后是css部分：（由于css不是我们要讲的重点，大家可以直接复制） @charset "utf-8"; *{margin:0; padding:0; list-style:none...获取到所有标题之后，我们就可以对所有标题添加一个鼠标滑过事件，使用for循环来添加。...接着我们就可以在鼠标滑过事件里添加我们刚才的思路了：先循环将所有标题和内容取消高亮和隐藏，再单独给滑过的标题设置高亮和显示对应的内容。 以上，就实现了鼠标滑过时的切换效果了。

    4.8K50

    JavaScript笔记(22)

    mouseover和mouseenter的区别 当鼠标移动到元素上时就会触发mouseenter事件 mouseover: 鼠标经过自身盒子会触发,经过子盒子还会触发(冒泡). mouseenter:...现在我们怎么点都不会影响效果了 到现在为止,我们的动画都只是匀速的,那么怎么才能够像CSS3一样变化运动的速度呢?...于是我将代码再修改一下: 这样就完美啦 动画函数添加回调函数 回调函数原理: 函数可以作为一个参数.将这个参数作为参数传入到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调...回调函数的位置: 定时器结束的位置 为了方便使用,我们直接将函数封装在文件中 动画函数封装到单独的JS文件中 因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个文件即可...然后猝不及防的来了个案例,一个盒子在鼠标经过时滑动的案例: 先来看看结构: 样式: JS: 今天结束,明天学习轮播图,洗漱洗漱上床休息了

    1K20

    大一新生HTML期末作业——大学生抗疫感动专题网页设计作业

    ，使用CSS设置了网页背景颜色，制作了导航区域鼠标经过荧光效果。个别页面插入了感人MP4视频。作品代码采用学生简单水平制作，DIV命名合理。...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效

    87820

    动手练一练，深入学习 4 个与 Hover 相关的动效案例 （上）

    去掉原有 a 标签自带的下划线链接自定义下划线样式，鼠标 Hover 时，才显示动画效果下划线动画效果由左到右逐渐显示，然后从左往右移动逐渐缩小（先伸展后缩小）只要鼠标一直在文字上悬停，下划线的动画效果循环播放链接的文字效果由暗变亮... 接下来我们来完成基础的样式 main.css ，基于 normalize.css 定义默认的相关样式：/*!...需求：鼠标经过时链接上方渐入一个白色透明带蓝色边框的浮层浮层中间的最下方有个右下的箭头指向文本链接鼠标移出文本链接，浮层渐渐淡出2.1 、在线演示地址我们先通过以下链接，在线体验下效果，然后在亲自动手实践完成...text-decoration: none;}a:hover::after { border-color: #457DFB; right: 0;}2.3、定义 ToopTip 提示层样式接下来修改...2.5、添加 JS 代码，显示提示层 Title 属性的文字最后一步，我们需要使用 JS 代码，让提示层显示，我们首先要寻找所有包含 .anchor-tooltip 样式的锚点链接，然后迭代每个锚点链接

    2.1K62

    抗疫行动题材网页设计 大学生最美逆行者感动人物网页代码 众志成城万众一心抗击疫情HTML网页设计

    ，使用CSS设置了网页背景颜色，制作了导航区域鼠标经过荧光效果。个别页面插入了感人MP4视频。作品代码采用学生简单水平制作，DIV命名合理。...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效

    1.5K30

    Hexo + Fluid 美化

    然后在主题配置 _config.yml 中找到 custom_js 或者 custom_css，修改如下： custom_js: - /js/DynamicLine.js 如果不想这么麻烦或者不需要自行修改的话...，可以使用我的提供的 CDN 在主题配置 _config.yml 中找到 custom_js 或者 custom_css，修改如下： （效果添加或去除注释 # 即可使用） custom_js: -...# 鼠标点击出字 # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心 custom_css:...@1.1/Cherry.min.js #樱花飘落 鼠标跟随小星星 //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星...头部打字机颜色效果渐变 更换鼠标指针样式 图片 //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针 ---- 参考

    2.4K20

    妙用CSS变量，让你的CSS变得更心动

    ，通过时间差运行相同的动画，从而产生加载效果。...对于HTML部分的修改，让每个拥有一个自己作用域下的「CSS变量」。...对于CSS部分的修改，就需要分析哪些属性是随着index递增而发生规律变化的，对规律变化的部分使用「CSS变量」表达式代替即可。...悬浮跟踪按钮 通过几个栗子实践了「CSS变量」在CSS和JS上的运用，相信大家已经掌握了其用法和技巧。之前在某个网站看过一个比较酷炫的鼠标悬浮特效，好像也是使用「CSS变量」实现的。...其实思路也比较简单，先对按钮进行布局和着色，然后使用伪元素标记鼠标的位置，定义--x和--y表示伪元素在按钮里的坐标，通过JS获取鼠标在按钮上的offsetLeft和offsetLeft分别赋值给--x

    1.4K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券