jQuery滑动选项特效
jQuery滑动选项特效
<style type="text/css">
.demo { padding: 2em 0; background: #fff; }
a:hover, a:focus { outline: none; text-decoration: none; }
.tab .nav-tabs { border-bottom: none; position: relative; }
.tab .nav-tabs li { margin-right: 60px; z-index: 1; }
.tab .nav-tabs li:after { content: ""; width: 100%; border: 1px solid #ccc6c6; position: absolute; top: 50%; right: -60%; z-index: -1; }
.tab .nav-tabs li:last-child:after { border: none; }
.tab .nav-tabs li a { display: block; padding: 15px 20px; background: #fff; font-size: 15px; font-weight: 600; color: #956cae; text-transform: uppercase; border-radius: 0; margin-right: 0; border: 2px solid #956cae; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease 0s; }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff; border: 2px solid #956cae; }
.tab .nav-tabs li a:after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s; }
.tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { height: 100%; background: #956cae; }
.tab .tab-content { padding: 20px 10px; margin-top: 0; font-size: 14px; color: #999; line-height: 26px; }
.tab .tab-content h3 { font-size: 24px; margin-top: 0; }
@media only screen and (max-width: 767px) {
.tab .nav-tabs li { margin: 0 25px 0 0; }
}
@media only screen and (max-width: 479px) {
.tab .nav-tabs li { width: 100%; text-align: center; margin: 0 0 10px 0; }
.tab .nav-tabs li:after { width: 0; height: 100%; top: auto; bottom: -60%; right: 50%; }
}
</style>
这是一款基于jQuery+Bootstrap实现的滑动选项卡代码，简洁扁平风格个性选项卡切换特效，鼠标悬停时还有动画效果。
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
16 May 2016
In diesem Artikel wird hauptsächlich der von jQuery implementierte Multi-Sliding-Door- und Multi-Tab-Effektcode vorgestellt, der die Funktionen des Tab-Switching und der Sliding-Door-Funktion umfasst. Dazu gehören die Reaktion auf Mausereignisse und die Implementierungsfähigkeiten im Zusammenhang mit dem dynamischen Transformationsvorgang von Seitenelementen Attribute. Freunde in Not können sich auf Folgendes beziehen
16 May 2016
In diesem Artikel wird jRange vorgestellt, ein Bereichsauswahl-Plug-In, bei dem es sich um ein einfaches Plug-In handelt, das auf jQuery basiert. Auf dieser Seite gibt es bereits einen ähnlichen Artikel: jQuery CSS verwendet einen Schieberegler, um eine Preisspanne auszuwählen. Der nicht so gute Teil ist die Verwendung der riesigen Plug-in-Bibliothek von jqueryui. Werfen wir einen Blick auf die Verwendung des Plug-Ins jRange.
16 May 2016
In diesem Artikel werden hauptsächlich die besonderen Auswirkungen des Schreibens der Tab-Scroll-Navigation in JQuery vorgestellt. Interessierte Freunde können sich darauf beziehen.
16 May 2016
这篇文章主要介绍了基于jQuery实现的仿百度首页滑动选项卡效果代码,涉及jQuery响应鼠标事件实现页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
16 May 2016
Der unten stehende Herausgeber bringt Ihnen einen Artikel über die Implementierung des Option-Linkage-Karusselleffekts in jQuery [mit Beispielen]. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz.
16 May 2016
Dies ist ein Plug-in zur Auswahl des Kaufdatums mit Schiebeleiste, das auf jQuery basiert. Sein Erscheinungsbild imitiert die Benutzeroberfläche zur Auswahl des Kaufdatums des Servers von Alibaba Cloud. Dieses jQuery-Plugin eignet sich sehr gut für die Verwendung auf einigen virtuellen Produktkaufseiten. Es kann Ihren Benutzern helfen, das Kaufdatum des Produkts schnell auszuwählen
16 May 2016
In diesem Artikel wird hauptsächlich eine einfache Demonstration der Implementierung von TAB-Tab-Wechseleffekten durch jQuery vorgestellt.
Wie verwende ich JavaScript, um einen Finger-Sliding-Switching-Effekt des Tab-Inhalts zu erzielen?
16 Oct 2023
Wie kann ich mit JavaScript den Finger-Sliding-Switching-Effekt des Tab-Inhalts erzielen? Auf der mobilen Seite ist das Bewegen des Fingers zum Wechseln des Tab-Inhalts eine gängige Interaktionsmethode. Durch JavaScript können wir diesen Effekt leicht erzielen und den Benutzern ein benutzerfreundlicheres und reibungsloseres Erlebnis bieten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Effekt des Fingergleitens beim Wechseln von Tab-Inhalten erzielen, und es werden spezifische Codebeispiele als Referenz bereitgestellt. Zunächst benötigen wir eine grundlegende HTML-Struktur, um die Registerkarten zu erstellen
Hot Tools
jQuery+Html5实现唯美表白动画代码
jQuery+Html5实现唯美表白动画代码，动画效果很棒，程序员表白必备！
情侣浪漫表白js特效代码
情侣浪漫表白js特效代码，这样的特效，可以用在婚纱摄影的网站上，也可以放在个人网站中，也还一个不错的特效，php中文网推荐下载！
简单js恋爱表白神器
简单原生js恋爱表白神器
碉堡的html5粒子动画表白特效
碉堡的html5粒子动画表白特效代码，动画特效文字可以在代码里面进行更改，大家可以做个页面，大家可以自定义文字的输入是应该是非常受欢迎的，此HTML5特效非常美的。
jQuery响应式后台登录界面模板
jQuery响应式后台登录界面模板html源码，登录页面通过jquery来验证表单，判断用户名和密码是否符合要求，通常登录页面在企业网站或者商城网站都是必须要用到的页面，响应式的后台页面，当浏览器放大或者缩小，背景会根据浏览器来调整图片的大小！php中文网推荐下载！