Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >制作背景幻灯片动画

制作背景幻灯片动画
EN

Stack Overflow用户
提问于 2017-12-06 13:06:20
回答 0查看 489关注 0票数 5

我做了一个按钮组,希望当用户选择上一个或下一个按钮的背景移动/滑动到选定的按钮时,我用纯css做了这个效果,只是用jquery来添加或删除active类。现在的问题是,当你点击All按钮,然后它工作正常,但如果你点击Used幻灯片不工作在正确的位置。

为了达到这个效果,我使用了transition::before,需要用纯css或最少的jquery来解决这个问题,而不是用很多javascriptjquery代码。

移动此背景的逻辑是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.RadioButton .btn:first-child::before {
 right: 0;
 transition: .3s all ease;
}

.RadioButton .btn:nth-child(2)::before {
 transition: .3s all ease;
}

.RadioButton .btn:last-child::before {
  left: 0;
  transition: .3s all ease;
}

.RadioButton .btn:nth-child(2)::before上的问题我不能使用right:0left:0,因为如果我使用每一个,滑动效果不能在正确的位置工作,有什么解决方案吗?

到目前为止,我尝试了以下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('.RadioButton').each(function(){
	$(this).find('.btn').each(function(){
		$(this).click(function(){
			$(this).parent().find('.btn').removeClass('btn-active');
			$(this).addClass('btn-active');
		});
	});
});
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
body {
direction: rtl;
}

.RadioButton .btn {
    width: 33%;
    float: left;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    font-size: 11px;
    min-height: 30px!important;
    line-height: 30px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.btn-default {
    border: 1px solid gray;
    color: gray;
}

.btn-group>.btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group>.btn:nth-child(2) {
    border-radius: 0;
}

.btn-group>.btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.RadioButton .btn::before {
    content: "";
    height: 100%;
    width: 0%;
    background: gray;
    position: absolute;
    top: 0;
    transition: .3s all ease;
    z-index: -1;
}

.btn-active::before {
    width: 100%!important;
}

.RadioButton .btn:nth-child(2)::before {
 right: 0;
 transition: .3s all ease;
}

.RadioButton .btn:last-child::before {
  left: 0;
  transition: .3s all ease;
}

.btn-active:first-child::before {
 left: 0;
 transition: .3s all ease;
}

.btn-active:last-child::before {
  left: 0;
  transition: .3s all ease;
}

.btn.btn-default.btn-active {
    color: white;
}

.btn-group {
    clear: both;
    margin-top: 10px;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RadioButton btn-group" id="searchType">
	<a class="btn btn-default" data-val="0">Used</a>
	<a class="btn btn-default" data-val="1">New</a>
	<a class="btn btn-default btn-active" data-val="2">All</a>
</div>

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47675041

复制
相关文章
ps制作透明背景动画
1、打开ps导入图片,然后抠图,去掉背景(不会抠图的自己百度) 2、Ctrl+J 多次复制图层,多复制几层 3、点击窗口找到时间轴,一次创建帧动画 4、点击每一帧,设置时间,同时一次打开右侧图层的眼睛即可 5、做好后,存储为web格式,选择gif保存即可 最后欣赏下成品吧 未经允许不得转载:肥猫博客 » ps制作透明背景动画
超级小可爱
2023/02/20
2K0
Canvas 动画制作
在前面的两篇文章Canvas 基本绘制(下)、Canvas 基本绘制(上)中,介绍了Canvas的基本绘制。学过SVG的童鞋应该知道它是可以制作动画,那么Canvas是否能制作动画呢?答案是肯定的。所以今天我们就给大家来介绍一下Canvas制作动画。 Canvas动画制作原理 简单一句话概括:不断的绘制与清除。 Canvas实现动画步骤(不断循环) 1、更新绘制的对象(比如位置的移动) 2、清除画布 3、在画布上重新绘制对象 Canvas 动画相关命令 clearRect方法 context.clear
HTML5学堂
2018/03/12
2.1K0
Canvas 动画制作
[教程]字符动画制作
https://www.bilibili.com/video/av75231006
六月丶
2022/12/26
2.1K0
[教程]字符动画制作
SVG - 动画制作
SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动起来呢?今天要给大家分享的是SVG的动画制作,具体我们来看看下面的内容吧。 接触过HTML5的人,都知道,Canvas实现一个动画,需要不断的清除画布再重新绘制,如果没有接触过Canvas也不要紧,SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口,动画实现起来比较方便,具体看看下面的动画命令。 SVG 动画基本命
HTML5学堂
2018/03/12
3.2K0
SVG - 动画制作
R沟通|用xaringan包制作幻灯片
谢益辉写的xaringan包[1],可以创建幻灯片。个人认为ppt的很多功能,它都能实现,接下来将通过几次推送对这个包(中文名:写轮眼)进行详细讲解。
庄闪闪
2021/04/09
1.9K0
html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图片质量不是很好,当然,我们一般做的特效是.swf,这里是为了方便大家观看,所以做成了gif.
全栈程序员站长
2022/08/14
3.6K0
html遮罩层动画制作,flash简单制作遮罩动画效果[通俗易懂]
苹果安装动画制作
使用方法 使图层覆盖在应用图标上方,大小为app图标的bounds -(ICSectorProgressView *)sectorView { if (!_sectorView) { _sectorView = [[ICSectorProgressView alloc] initWithFrame:self.appImageView.bounds]; _sectorView.borderWidth = 20; // 默认为20 [_sectorVi
程序员不务正业
2018/06/14
1.1K0
Pymol使用-制作动画
>使用pymol制作可以用于展示的动画,这个取决于你要展示什么,这个教程会尽可能的遍历所有操作,先以命令行走一遍,然后以操作界面鼠标点击走一遍。
DrugScience
2021/02/04
3K0
Pymol使用-制作动画
用Matplotlib制作动画
动画是呈现各种现象的有趣方式。在描述像过去几年的股票价格、过去十年的气候变化、季节性和趋势等时间序列数据时,与静态图相比,动画更能说明问题。因为,从动画中,我们可以看到特定参数是如何随时间而变化的。
昱良
2019/11/24
2.3K0
pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义
Pycharm可以通过设置主题来设定背景颜色,但主题的背景颜色也仅仅局限特定的几种,通过如下的方式可以自定义背景颜色。
全栈程序员站长
2022/09/25
1.6K0
pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义
matplotlib动画制作(1)
本公众号致力于python数据分析和可视化,会不定期发布技术内容。如果觉得本文文章有用,点击上方"python数据可视化之美"关注我的公众号,原创文章将会第一时间推送,如有建议,可添加微信交流或评论区留言。
python数据可视化之路
2023/09/06
4950
matplotlib动画制作(1)
android开机动画 制作工具,android开机动画制作
谁都想拥有一个华丽漂亮的开机动画,这让人心情舒畅,android是怎么来实现的?怎么制作一个自己的开机动画?这里揭开android开机动画的神秘面纱。
全栈程序员站长
2022/08/27
2.1K0
用计算机制作动画的方法,电脑怎么制作flash动画?电脑制作flash动画的方法
Flash动画可以将音乐,声效,动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果。一些初学者想要用电脑制作flash动画,但是不知道怎么操作?其实Flash做动画有很多种方法,但最主要的是调关键帧,为此,大家一起看下电脑制作flash动画的方法。
全栈程序员站长
2022/09/05
2K0
用计算机制作动画的方法,电脑怎么制作flash动画?电脑制作flash动画的方法
android+制作开机动画,Android 开机动画制作详解
Android 开机动画作为一个经常被 DIY 固件的玩家熟悉的内容,我这里简单做个总结。
全栈程序员站长
2022/08/27
3.9K0
android+制作开机动画,Android 开机动画制作详解
用计算机制作flash动画教案,Flash动画制作教案
以下是出国留学网小编整理的高中信息技术《Flash动画制作》教案,供大家浏览参考。更多相关内容请关注出国留学网教案栏目。
全栈程序员站长
2022/08/11
1K0
css毛玻璃背景的制作
原理和photoshop修图的步骤类似, 用css中的blur滤镜实现高斯模糊, 对文字部分添加伪元素,对伪元素填充部分背景图片, 并添加模糊效果
zhaoolee
2018/08/02
1.4K0
css毛玻璃背景的制作
hexo博客自制背景动画(代码雨)
现在的效果可能有点不太好看,因为是看了很多代码雨的 js 代码,明白了大概如何实现之后依葫芦画瓢做出来的,待未来优化。
赤蓝紫
2023/01/02
5920
hexo博客自制背景动画(代码雨)
Silverlight制作逐帧动画
打算用sl来制作一个游戏,我曾经有flash开发游戏的经验.现在想用sl来做.打算记录下我开发游戏探索的过程. 打开http://www.emu-zone.org/www3/host/emugif/
用户1172164
2018/01/16
1K0
Silverlight制作逐帧动画
点击加载更多

相似问题

如何制作幻灯片动画?

20

如何制作背景动画?

10

使用jQuery、数组和计时器制作背景幻灯片动画

20

CSS背景幻灯片动画

24

用wpf制作幻灯片动画

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文