首页 > web前端 > js教程 > 快速反应选框

快速反应选框

Susan Sarandon
发布: 2025-01-17 02:31:10
原创
959 人浏览过

使用 React Fast Marquee 创建平滑选框

本文介绍了 React Fast Marquee,一个简单但功能强大的组件,用于创建平滑滚动的选取框。 即使使用 Next.js,集成也非常容易。

安装

安装很简单:

<code class="language-bash">npm install react-fast-marquee --save</code>
登录后复制

导入组件:

<code class="language-javascript">import Marquee from "react-fast-marquee";</code>
登录后复制

用法

只需将您的内容包含在 <Marquee> 标签内即可。 这可以是文本、单个 React 组件或多个组件。

<code class="language-javascript"><Marquee>
  This is my marquee text.  It will scroll smoothly!
</Marquee></code>
登录后复制

React Fast Marquee 提供了众多可定制的道具,包括 classNameautoFillloopgradient 等。 详细的使用说明请参考组件的文档和demo。

示例:品牌展示

以下是如何使用 React Fast Marquee 在美食设备网站上创建品牌展示:

<code class="language-javascript">const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    // ... more brands
    ];


const MarqueeBrands = () => {
    return (
        <Marquee>
            {brands.map(brand => (
                <img alt={brand.name} className="w-[100px] sm:w-[150px] md:w-[200px] h-[70px] sm:h-[75px] md:h-[100px] object-contain mx-4 md:mx-6" height={100} key={brand.name} quality={50} sizes="(max-width: 768px) 150px, 200px" src={brand.logo} width={200} />
            ))}
        </Marquee>
    )
}</code>
登录后复制

结果是具有视觉吸引力、平滑滚动的品牌展示。

React Fast Marquee

以上是快速反应选框的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板