前端小火龙 2023-05-22 16:05 采纳率: 93.3%
浏览 50
已结题

类似于itab那样的楼层效果插件

有没有什么好用的vue2，实现楼层效果的插件，效果就跟谷歌itab插件那样的，一滚就到下一个，内部滚动i到底才前往下一个，点侧边也可以去指定位置的那种，就下面这个谷歌浏览器插件插件

img

img

可以在官方的插件市场找到这个

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-05-22 16:58
    关注

    直接撸itab代码就行，edge 扩展保存位置，需要自己点开里面的目录确认具体是是哪个

    C:\Users\当前系统登录的账号名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions

    要么就是jquery.fullpage插件了。

    jQuery全屏滚动插件fullPage.js_dowebok 如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试fullPage.js。 https://www.dowebok.com/77.html

    简单示例

    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>fullPage.js — 绑定菜单演示_dowebok</title>
<link rel="stylesheet" href="https://cdn.dowebok.com/77/css/jquery.fullPage.css">
<style>
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
</head>

<body>
    <div id="app">
        <ul id="menu">
            <li v-for="(item,index) in pages" :data-menuanchor="`page${index+1}`" :class="{active:item.active}"><a :href="`#page${index+1}`">{{item.tabText}}</a></li>
        </ul>
        <div id="dowebok">
            <div class="section" v-for="(item,index) in pages" v-html="item.html">
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>
    <script>
        $(function () {
            new Vue({
                el: '#app',
                data: {
                    pages: [{ tabText: '第一屏', html: '<h3>第一屏</h3><p>fullPage.js — 绑定菜单演示</p>', active: true },
                        { tabText: '第二屏', html: '<h3>第二屏</h3><p>请查看左上角，点击可以控制</p>',  },
                        { tabText: '第三屏', html: '<h3>第三屏</h3><p>绑定的菜单没有默认的样式，你需要自行编写</p>'  },
                        { tabText: '第四屏', html: '<h3>第四屏</h3><p>这是最后一屏</p>'}]
                },
                mounted() {
                    $('#dowebok').fullpage({
                        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
                        anchors: ['page1', 'page2', 'page3', 'page4'],
                        menu: '#menu'
                    });
                }
            })
        });
    </script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

  • 安装oracle11g grid 执行root.sh时一直卡在Adding Clusterware entries to inittab oracle
    2019-08-21 11:03
    回答 2 已采纳 https://blog.csdn.net/jycjyc/article/details/90714427
  • itab插件，适用于chrome浏览器
    2023-10-30 11:11
    itab插件，适用于chrome浏览器
  • 谷歌浏览器itab离线版插件
    2023-04-08 22:09
    iTab，一个标签页美化插件，安装之后，可以取代浏览器默认的标签页，效果如下。 iTab 最大的特色在于，加入了 iOS 上的小组件的设计，让它在众多标签页美化插件中显得与众不同，而且拖动小组件可以重新调整小组件的...
  • itab-chome插件
    2024-04-03 13:55
    添加chrome标签页插件，拖进使用
  • itab chrome谷歌浏览器crx插件 适合大学生和工作党
    2023-05-03 09:41
    "itab chrome谷歌浏览器crx插件"是专为大学生、工作党和追求简洁桌面体验的用户设计的一款工具。这款插件旨在优化用户的浏览体验，提供更加高效、个性化的功能。 CRX是Chrome扩展的文件格式，全称为Chrome ...
  • ITAB「iTab」-crx插件
    2021-03-23 00:01
    简约标签，选择适合自己的标签页 iTab是一款基于Html5的Chrome浏览器扩展应用。它提供了网站快速拨号、扩展应用快捷访问等功能来增强 Chrome 原生新标签页（New Tab）。 ======================...支持语言:中文 (简体)
  • iTab-crx插件
    2021-04-02 19:50
    语言:中文 (简体) 简约标签，选择适合自己的标签页 iTab是一款基于Html5的Chrome浏览器扩展应用。它提供了网站快速拨号、扩展应用快捷访问等功能来增强 Chrome 原生新标签页（New Tab）。==========================...
  • iTab - Awesome Tab Manager-crx插件
    2021-04-03 05:31
    语言:English 浏览器的强大功能扩展。 iTab是一款用于浏览器的简单免费的标签管理器，可在标签和窗口之间快速切换。 快捷键Alt + Space在选项卡中打开搜索栏。 搜索结果显示URL和标题与搜索词匹配的所有选项卡。
  • 浏览器最强简洁插件——iTab
    2023-03-28 11:26
    熊吖的博客 浏览器最强简洁插件——iTab
  • iTab浏览器插件使用教程
    2022-11-04 15:32
    *拯的博客 iTab浏览器插件 iTab是一个好看好用的自定义卡片式浏览器新标签页扩展。 安装iTab标签页扩展后，您将告别呆板无趣的原生标签页，享受iTab标签页为您带来的个性化新体验： iTab资源 安装教程 IE 浏览器 1....
  • 【工具】工具推荐-Edge浏览器新标签页插件———iTab
    2022-08-30 19:50
    程序员加文的博客 向大家推荐一款好用的插件
  • 推荐几款优秀的Chrome插件，值得收藏！
    2023-11-24 20:11
    程序员云帆哥的博客 Wetab是一款可以亲手打造属于自己的高颜值主页的小组件新标签页插件，跟Infinity New Tab新标签页一样美观大气，跟iTab iTab新标签页一样主打小组件功能。iOS苹果小组件卡片设计，内置倒计时、纪念日、天气、热搜、...
  • iTab浏览器插件安装教程
    2022-11-04 14:46
    迂 幵的博客 iTab是一个好看好用的自定义卡片式浏览器新标签页扩展。 安装iTab标签页扩展后，您将告别呆板无趣的原生标签页，享受iTab标签页为您带来的个性化新体验：
  • 比itab和wetab更好用的新标签页插件来了！
    2024-07-02 14:18
    大众生活的博客 每次打开浏览器，主页都充斥着繁杂的信息和突如其来的弹窗广告，非常影响使用体验，而最近小编发现了一款微软官方出品的插件，不仅界面简洁，还可以随意的切换各种动态壁纸，安装小组件，添加各种各样的网站导航等等...
  • iTab浏览器插件，助你打造个性桌面
    2022-09-16 15:25
    xdlumia的博客 iTab浏览器插件，助你打造个性桌面哈喽！各位小伙伴们。随着互联网的高速发展，软件种类层出不穷，人们愈发注重其简便性、功能性、实用性等。今天我要向大家推荐一款非常好用的浏览器插件-iTab。&nbsp;iTab拥有...
  • iTab插件谷歌浏览器安装、使用（程序员、开发、设计、摸鱼神器）
    2024-05-15 08:32
    2401_83946044的博客 最全的Linux教程，Linux从入门到精通第一份《Linux从入门到精通》466页内容简介====本书是获得了很多读者好评的Linux经典畅销书**《Linux从入门到精通》的第2版**。本书第1版出版后曾经多次印刷，并被51CTO读书频道...
  • 神级浏览器插件iTab新标签页
    2022-09-03 10:22
    xdlumia的博客 这款插件就是iTab，iTab是一款可以用于多种浏览器平台，一个让你不受广告干扰的个性化卡片式起始页插件。在没用这个插件之前，我们的浏览器首页可能长这样：可以看到，信息杂乱，画面丑陋，还有大画幅的广告，非常的...
  • 在android编程中做成仿iphone的tab效果.doc
    2022-07-08 19:28
    在Android编程中，模仿iPhone的Tab效果主要涉及到自定义视图、图形绘制和交互设计。以下将详细讲解如何实现这一效果。 首先，我们要创建一个自定义的View类，例如名为`Itab`，继承自`View`。在这个类中，我们需要...
  • iTab插件谷歌浏览器安装、使用（程序员、开发、设计、摸鱼神器）(2)
    2024-05-15 08:31
    2401_83946044的博客 最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 5月30日
  • 已采纳回答 5月22日
  • 创建了问题 5月22日

悬赏问题

  • ¥35 navicat将excel中的数据导入mysql出错
  • ¥15 rt-thread线程切换的问题
  • ¥20 python忆阻器数字识别
  • ¥15 高通uboot 打印ubi init err 22
  • ¥20 PDF元数据中的XMP媒体管理属性
  • ¥15 R语言中lasso回归报错
  • ¥15 网站突然不能访问了，上午还好好的
  • ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
  • ¥15 semrush,SEO,内嵌网站，api
  • ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊