文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏 Alextao html

感觉还不错，只是部署到博客不太搭配（颜色太鲜艳了），用css加了个设备判断，电脑端显示、手机端隐藏。1221px 界点 预览: css 右侧悬浮菜单 開始--> /*footer*/ .elevator_item .hd-time-limited { display: block; position...--右侧悬浮菜单 結束--> 不锈钢料槽 html actionscriptapacheconfapplescriptaspnetbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyamletbashbasicbatchcclikecoffeescriptcppcsharpcssddartdiffdockerdockerfileerlangfortranfsharpgfmgitglslgographqlhamlhaskellhaxehtmlhttpiconinijjavajavascriptjsjsonjsonpjsxlatexlessluamakefilemarkdownmarkupmathmlmatlabmdmelnginxobjectivecparserpascalperlphppowershellpropertiespythonqrrubyrustsassschemescsssmartysqlstylussvgswifttcltstypescriptvbnetvimwikixmlyaml...--右侧浮动 结束--> 本文转载自:钻芒博客 原文链接:https://www.zmki.cn/5002.html

4.2K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    WEB入门之十八 动画特效

    ​学习内容​ jQuery显示/隐藏动画 jQuery滑动特效 jQuery淡入淡出特效 jQuery自定义动画特效 ​能力目标​ 能熟练实现jQuery内置动画特效 能熟练实现自定义动画特效 本章简介...核心技能部分​ 8.1 显示/隐藏动画 在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。.../离开事件中实现图片的显示/隐藏动画，鼠标悬浮到按钮上时，图片在1000毫秒内显示；鼠标离开按钮时，图片慢速隐藏。...除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。...3：滑动的横向菜单 ​训练技能点​ Ø jQuery内置动画函数 ​需求说明​ 模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单 淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏

    1.3K10

    WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商

    >  包含IP归属地、浏览器，以及文本信息等，目的是为后面鼠标悬浮显示时使用，js实现显示和隐藏效果   CID_print_comment_flag()   显示IP归属地的国旗 CID_print_comment_browser...').show();    }); 说明： 1）jQuery('.comment-body').hover  悬浮事件，主要用于PC电脑端，但是手机端没有悬浮事件 2）jQuery(...，只有当鼠标悬浮在评论框时才会显示出来 演示效果，请见米扑博客：https://blog.mimvp.com/donate/#comments ?...jQuery(".comment_ua_info").show();        jQuery(".comment_show_ip").html("隐藏评论IP");    }    else {        ...b）点击“隐藏评论IP”，则隐藏全部评论IP，并把按钮置为“显示评论IP”，如下图 ?

    2.3K20

    鸿蒙开发实战案例：视频悬浮窗

    将应用隐藏到后台，自动拉起悬浮窗继续播放视频。点击悬浮窗恢复图标，恢复到原始播放界面，视频继续正常播放。原始播放界面视频暂停不会拉起悬浮窗。悬浮窗视频暂停后，再点击恢复图标，原始播放界面视频继续播放。...悬浮窗点击关闭之后，原始播放界面视频暂停。点击原视频界面小窗口图标，可开启悬浮窗。手指在原视频左侧滑动可改变视频页面的亮度（需真机验证）。...手指在原视频右侧滑动可改变视频的声音（需真机验证，注：本案例使用的视频暂无声音，开发者可更换视频资源验证该功能）。...// 组件层-视频悬浮穿页面| |---VideoInfoComponent.ets // 组件层-视频详情介绍页面| |---XComponentView.ets...// 组件层-视频播放组件|---model | |---AVPlayer.ets // 模型层-媒体相关操作基本实现| |---PipManager.ets

    94310

    WEB入门之十八 动画特效

    核心技能部分 8.1 显示/隐藏动画 在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。.../离开事件中实现图片的显示/隐藏动画，鼠标悬浮到按钮上时，图片在1000毫秒内显示；鼠标离开按钮时，图片慢速隐藏。...除了show和hide函数外，jQuery还提供了一个显示/隐藏切换动画函数toggle。该函数可以自动进行显示/隐藏的切换，同样可以使用一个参数来设置动画速度。...3：滑动的横向菜单 训练技能点 Ø jQuery内置动画函数 需求说明 模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单 淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏。...min.js">td {FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;}div{/*设置层背景样式

    1.2K10

    三种方式实现网页二级菜单

    } 解释三个重要的css代码： 1.写出一个ul-li菜单时，它会默认垂直排列，而我们需要的是水平的菜单栏，所以需要设置li的浮动：float：left 2.当鼠标悬浮在有二级菜单的一级菜单选项时...，才会出现二级菜单，所以在鼠标不悬浮的情况下，需要把二级隐藏起 来display：none 3.最后，设置li :hover ul 这个意思是，当鼠标悬浮在li上时，li下的ul呈现状态，hover是悬浮的意思...，在设置a标签样 式时应该会接触过 方法二：使用jQuery实现 要用到jQuery首先第一步就是引入jquery.js文件 jquery文件必须放在js代码之前，浏览器编译html文件时，是从上自下编译的，如果jquery文件放在最后，那么在你的js代码又使用到了jquery...jquery-3.1.0.min.js 3. bootstrap.min.js 因为bootstrap所有js代码都是需要jquery做支撑的，所以只要引入bootstrap.js都必须引入jquery

    2.3K20

    【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）

    源码   CSS源码  右侧星球悬浮布局设计   HTML源码   CSS源码  右侧视频悬浮布局设计   HTML源码   CSS源码  右侧文本悬浮布局设计   HTML源码   CSS源码 完整源码...我将实现思路分成了如下五个部分，列举如下： 背景的设置 抬头栏设计 左侧文本悬浮布局设计 右侧星球悬浮布局设计 右侧视频悬浮布局设计 右侧文本悬浮布局设计  背景的设置   通过使用HTML...  使用HTML和CSS设计出左侧文本段落的样式，没啥重点的，直接上代码   PS：这一段落设计的样式其实是动态的，因为用户需要将光标悬浮在内部盒子中，左侧文本段落才会从左侧向右侧进入，所以默认情况下左侧文本段落是被隐藏起来的...  使用HTML和CSS设计出右侧星球布局的样式，直接上代码   PS：这一段落设计的样式其实是动态的，因为用户需要将光标悬浮在内部盒子中，右侧三个星球才会从右侧向左侧进入，所以默认情况下右侧三个星球是被隐藏起来的...PS：这一段落设计的样式其实是动态的，因为用户需要将光标悬浮在内部盒子中，右侧文本才会向左侧进行隐藏，所以默认情况下右侧文本是充满整个内部盒子并且居中置于视频之上的   HTML源码   复制如下源码粘贴到

    1.2K10

    CSS 侧边栏在小屏设备中进行隐藏

    图片 侧边栏的作用应该就不用多说了吧，能够很方便我们回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用...我们先来看下，在大屏设备中，侧边栏如何显示，继而再讲述，从大屏设备切换到小屏设备，侧边栏如何隐藏，国际惯例，先看 HTML 结构代码 右侧进行隐藏，并会出现一个提示图片，当鼠标移至图片上时，提示图片隐藏，侧边栏出现；当鼠标从侧边栏上移开时...，侧边栏隐藏，提示图片出现 CSS 媒体查询代码如下 @media screen and (max-width: 1410px) { .c_nav_side { right: -...'.c_nav_side').animate({'right': '-240px'}); }) 本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载

    2.4K30

    鸿蒙HarmonyOS - SideBarContainer 组件自学指南

    在日常开发中，如果你有类似「左侧导航 + 右侧内容」的布局需求，比如后台管理界面、文件管理器、设置页等，​​SideBarContainer​​ 是非常值得掌握的组件。...组件内部已实现侧边栏的显示与隐藏逻辑，开发者只需关注如何传入正确结构和控制显示行为即可。...支持三种布局类型： ​​Embed​​：并排展示； ​​Overlay​​：侧边栏悬浮； ​​Auto​​：根据容器宽度自动选择 Embed 或 Overlay。...显示模式控制 通过构造函数传入 ​​SideBarContainerType​​ 类型参数控制显示样式，推荐用法： ​​.Embed​​：固定并排展示； ​​.Overlay​​：悬浮在内容上； ​​....实际使用中，可以与页面状态管理、资源图标切换等逻辑配合，构建出灵活可交互的侧边栏体验。 建议从 Embed 模式开始练习，等熟悉后再尝试 Overlay 或 Auto 模式的布局响应性处理。

    39810

    布局之悬浮显示更多文本并增加箭头指示效果

    记录一个界面交互的小功能 UI效果图 需求描述 文本只显示一行，超出显示省略号 文本超出显示省略号的同时，在右侧显示箭头指示，否则，不显示箭头 鼠标悬浮展示全部文本，箭头转向...思路分析 先不考虑右侧"箭头"，单纯的鼠标悬浮展示全部不难实现（前面【卡片布局...】一文中已经实现过，本文代码是在上篇之上修改） 控制箭头交互的时候，把文本元素和箭头元素分别设置宽度...通过过渡（transtion）控制鼠标悬浮箭头转向 通过自定义指令控制“箭头”显示隐藏 代码展示 card 组件 html <div class="textCard...calc(100% - 20px) if (p_w - s_w <= 20) { // 一行文本已满格，显示icon } else { // 文本没有满一行，隐藏

    96510

    折叠屏 ③ | 华为资深专家解读折叠屏组合页面设计及多任务设计要求

    组合页面之间有如下三种关系类型： 层级关系 主从关系 并列关系 1.1.1层级关系 层级关系有多层级和单一层级两种。...2.单一层级 单一层级结构一般以“列表+详情”形式呈现，列表中的每个元素都是末端元素，元素中没有二级分类列表。例如邮件、信息、备忘录等内容型元素的列表。...点击左侧中某一个条目，右侧打开对应的详情内容。 用户可以借助在左侧列表中点击任意一个条目，在右侧快速打开对应的详情内容，实现内容快速切换。...2.悬浮窗面板 悬浮面板 3.侧边栏 从属信息默认以侧边栏形式显示，通过界面比例和视觉效果表现从属关系，不影响主要信息的展示，同时能快速浏览或操作从属信息。...该类型适合于采用多窗口的样式来实现，对持续播放类的媒体内容，建议可以考虑悬浮窗形式，对于多于两个应用内任务之间的切换，可以考虑构建悬浮球形式来辅助实现。

    1.2K30

    Android 可拖动悬浮窗实现

    // 根据滑动的方向，设置最开始的布局位置 switch (mSlideType) { // 从右往左滑动，悬浮窗内容全部位于屏幕的右侧...// 右侧进入，滑到右侧回到初始状态的动画 rightInSmoothToRight(); }...等到悬浮窗完全展示的时候，点击空白的地方，悬浮窗又需要从当前的位置回滚到初始的位置，其原理和拖出来的原理是一样的。...通过如上代码可以发现，contentView 的 layout 属性变化都是通过动画来实现的，这边我采用属性动画，来不断改变滑动的距离来实现悬浮窗显示和隐藏的效果，也就是就是上面代码中的 rightInSmoothToLeft...() { int posX = mScreenWidth - mContentView.getWidth(); // 通过属性动画做最后的效果，右侧滑进到左侧，contentView 的页面从右侧开始向左侧滑动显示

    2.8K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券