首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。...结构与样式 结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。 样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。 a....无限滚动原理 由于这里的停止位置是固定的,前排永远是当前卡片相对于视口居中,后排永远是两个卡片相对于视口居中,且每个卡片是一样的,所以当卡片列表向前或向右移动到一个目标位置时,都将列表重置为初始位置继续滚动...如下图以前排卡片为例: 1544756683_12_w2480_h1496.png 所以当滚动停止后会统一将列表样式设置为transform: translateX(0)。...目标位移与帧位移 为了做出滑动后到停留位置的缓动效果,所以当用户左右滑动屏幕时,会记录滑动距离,计算出卡片该到的目标位移位置,目标位移位置是有规则的,因为这里有10张卡片均分宽度,位置必须是(100%/

30.4K102
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用html,css,js 实现一个龙年春节祝福卡片效果

    然后呢,我打算实现了一个春节祝福卡片的效果....这是下面的效果: 点击按钮之后,进入卡片背面,也就是主要内容的一面 可以编辑title 和 content 内容区域 content 的文案可以点击小龙随机生成一个 同时也支持保存当前卡片,保存本地 2...了解 css中 backface-visibility 属性 前面那个卡片使用图片进行填充, 后面那个卡片进行内容的展示, 具体使用到的布局方式: 相对定位和绝对定位....FileSaver.js 支持在浏览器中保存各种类型的文件,例如文本文件、图像文件、PDF 文件等。...介绍完基本用法之后, 看看我们的demo 里面如何写的 获取卡片内容元素,使用html2canvas转换为一个 canvas 对象,然后使用 FileSaver.js 库将 canvas 转换为 Blob

    11710

    Material Design —卡片(Cards)

    卡片集合是同一个平面上的多个卡片的布局形式。 用法 卡片展示的是由不同尺寸或不同支持的动作的元素组成的内容。...卡片集合是共面的,或同一平面上的卡片布局。 ?...左:不同布局的卡片    右:排版方式能突出重点内容 ? 左:不同内容与布局的卡片集合    右:不同布局与不同内容层次的卡片集合 ---- 行为 卡片具有恒定的宽度和可变的高度。...超过最大卡片高度的卡片内容会被省略,内部不会滚动,但可以扩展卡片。 一旦展开,卡片可能会超过视图的最大高度。 在这种情况下,卡片将随卡片集合一起滚动。 ? ?...pc端卡片可展开和内部滚动 卡片聚焦 当遍历卡片上的焦点时,在移动到下一张卡片之前访问所有可聚焦元素。

    4.3K100

    cocos植物大战僵尸(四)选择植物卡片:植物卡片

    2.4 选择植物卡片 在播完地图滚动后出现选择植物卡片层。能够选择相应的植物进行游戏。 2.4.1 植物卡片类 植物卡片是实体类的子类。实体类是游戏中一切能看到的,可操作的游戏元素。...植物卡片具备以下功能:点击自身判断;根据名字读json显示花费阳光值,冷却时间;冷却跑秒。...void colorChangeByCanFlg(std::string sName,bool bCanFlg);//改变卡片的颜色通过点击标签 void coolDownTimerStart()...;//开启冷却跑秒定时器 private: CC_SYNTHESIZE(int, m_iCoolDownTime, iCoolDownTime);//卡片的冷却时间 CC_SYNTHESIZE(Label...//卡片根据名字装载阳光消耗值,并显示在卡片的相应位置 void CWaitChooseCard::costLoad() { m_iCost = CGlobalComm::getInstance()-

    26420

    首页文章卡片修改

    2022-03-31:内测版v0.07 发布预览截图 编写开发思路 吐槽贰猹 参考方向 教程原贴 本帖的卡片原设为贰猹提供 贰猹の小窝 Flex布局参数解释 Flex 布局教程:语法篇 - 阮一峰的网络日志...原本呢,贰猹是打算等自己学好了前端就把这个卡片写出来的。然后,就这么咕咕咕了一个寒假(其实是被木木抓起来关进小黑屋里写友链朋友圈后端API,写不好不给饭吃)。...编写手机端样式时,在F12界面调试伪类三角平移量的时候,突发奇想,可以用动画写个快门效果,所以最后的作品,手机端摒弃了贰猹原设里的倒三角描述卡片,转为类平行四边形的边框。...侧栏的 SAO 卡片效果要改,直接画出好看的边框,首页的文章卡片要改,反正不能再搞不靠谱的三角形伪类拼接。还有以前写的 SAO 血条,啊,那个项目我是打算废弃了。...换成新版友链方案怎么样,左边是一排血条,点击再右边显示好看的角色属性卡片这样子。用 clip-path 的话,血条那个形状已经完全不成问题了的说。

    1.1K20

    Flutter 卡片选择器

    原文地址:https://medium.com/flutterdevs/explore-model-viewer-in-flutter-e5988edbfe66 material设计风格的卡片。...卡片的边角和阴影有些调整。卡片是用于表示某些关联数据,例如集合,地理区域,膳食,联系方式等。卡片包含有关单个对象的内容和动作。 在本文中,我们将探讨Flutter中 的**Card Selector。...它显示了堆叠的卡片,动画,从左到右或从右到左刷卡。内容将根据卡而改变。一个小部件,用于选择向左或向右滑动的堆叠小部件。它会显示在您的设备上。...另外,我们将添加mainCardWidth表示列表中第一个元素的宽度,mainCardHeight表示列表中第一个元素的高度,onChanged表示要在更改后的卡片上执行的回调。

    7.4K20
    领券