纯css选项卡tab特效代码(css实现选项卡)
admin 发布:2022-12-19 15:35 107
本篇文章给大家谈谈纯css选项卡tab特效代码,以及css实现选项卡对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
小程序 纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验。如下图:
在开发者工具中预览效果
我们可以用两种方法实现这样动画,css3的过渡或者用js去控制。省事的当然是用css3来写啦,我们先来看看css3的具体实现。
css3实现:
先看最基本的.wxml布局:
从图中可以看到,当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢?就是红圈部分,用translateX位移来移动,而transitions实现一个过渡效果。
curtab就是当前点击tab的index,点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足,就是tab的宽度是固定的,但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现:
有些喜欢折腾的同学说想要js来实现呢?当然也是可以的,用js来实现的思路也是一样,用控制line元素的translateX值。那么怎么知道应为位移多少呢?就是动态的去获取该位移的值,然后赋给translateX。
说到动态的去获取元素额left值,可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。(这里不细说api的用户,不清楚的同学请自行查看文档哈哈哈)
那是不是可以:
来看看具体的实现:
emmm最后说一下,前端时间看到过一个很骚的操作,同样是用纯css实现这种跟随动画,先看看效果图:
.css
如何实现tabs选项卡效果
前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了。
html 代码:
!DOCTYPE HTML
html lang="en-US"
head
meta charset="UTF-8"
titlejs-tabs/title
link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/
style type="text/css"
a{color:#a0b3d6;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:300px;}
.tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6;float:left;}
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:white;border-bottom:1px solid white;_position:relative;}
.tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;}
/style
/head
body
div class="tabs" id="tabs"
h2 class="tabs-nav clearfix"
a href="javascript:;"首页/a
a href="javascript:;"技术/a
a href="javascript:;"生活/a
a href="javascript:;"作品/a
/h2
p class="tabs-content"首页首页首页首页首页首页首页首页首页首页/p
p class="tabs-content"技术技术技术技术技术技术技术技术技术技术/p
p class="tabs-content"生活生活生活生活生活生活生活生活生活生活/p
p class="tabs-content"作品作品作品作品作品作品作品作品作品作品/p
/div
br/br/
div class="tabs" id="tabs2"
h2 class="tabs-nav clearfix"
a href="javascript:;"11111/a
a href="javascript:;"22222/a
a href="javascript:;"33333/a
/h2
p class="tabs-content"11111111111111111111111111111111111/p
p class="tabs-content "222222222222222222222222222222222222/p
p class="tabs-content "333333333333333333333333333333333333333/p
/div
/body
/html
script type="text/javascript" src="tabs.js"/script
script type="text/javascript"
window.onload = function(){
tabs('tabs','click',true,1000);
tabs('tabs2','mouseover');
}
/script
tabs.js 代码:
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id);
var tabsBtn = tabsWrap.getElementsByTagName('h2').getElementsByTagName('a');
var tabsContent = getClass('tabs-content',tabsWrap);
var timer = null;
var current = 0;
show(0);
for(var i = 0,len = tabsBtn.length; i len; i++){
tabsBtn[i].index = i;
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index);
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index);
}
}
}
if(autoplay){
autoPlay();
tabsWrap.onmouseover = function(){
clearInterval(timer);
}
tabsWrap.onmouseout = function(){
autoPlay();
}
}
function autoPlay(){
timer = setInterval(function(){
show(current);
current++;
if(current = tabsBtn.length){
current = 0;
}
},time);
}
function show(n){
current = n;
for(var i = 0,len = tabsBtn.length; i len; i++){
tabsBtn[i].className = '';
tabsContent[i].style.display = 'none';
}
tabsBtn[current].className = 'select' + (current + 1);
tabsContent[current].style.display = 'block';
}
function getClass(classname,obj){
var results = [];
var elems = obj.getElementsByTagName('*');
for(var i = 0; i elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
div css的tab选项卡效果
span id="ContentArea"html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title网页特效/title
/head
style type="text/css"
#dNavBar{
background-color:#ffffff;
}
#dNavBar li{
list-style-type:none;
float:left;
width:84px;
height:28px;
line-height:28px;
font-size:12px;
color:#FFFFFF;
border:3px solid #ffffff;
background-color:#86C2FF;
text-align:center;
display:block;
cursor:pointer;
}
#subMenu{
background-color:#0000FF;
width:500px;
border-left:3px solid #ffffff;
border-right:3px solid #ffffff;
height:29px;
line-height:29px;
color:#FFFFFF;
font-size:12px;
padding-left:10px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
/style
script language="javascript"
function ShowMenu()
{
var barCTT=document.getElementById("dNavBar")
var liArr=barCTT.getElementsByTagName("li")
var links=new Array()
links[0]="a href='#'当前位置:首页"
links[1]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a"
links[2]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"
links[3]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a | a href='#'项目四/a | a href='#'项目五/a"
links[4]="a href='#'项目一/a | a href='#'项目二/a"
links[5]="a href='#'项目一/a | a href='#'项目二/a | a href='#'项目三/a"
links[6]="a href='#'项目一/a | a href='#'项目二/a"
links[7]="a href='#'项目一/a | a href='#'项目二/a"
links[8]="a href=''项目一/a | a href='#'项目二/a"
links[9]="a href='#'项目一/a | a href='#'项目二/a"
links[10]="a href='#'项目一/a| a href='#'项目二/a"
links[11]="a href='#'项目一/a | a href='#'项目二/a"
links[12]="a href='#'项目一/a | a href='#'项目二/a"
for (i=0;iliArr.length;i++)
{
liArr[i].onclick=function()
{
selectThis(this,liArr,links)
}
}
}
function selectThis(indexObj,allLi,infoArr)
{
var index=0;
for (i=0;iallLi.length;i++)
{
allLi[i].style.border="3px solid #ffffff";
allLi[i].style.backgroundColor="#86C2FF";
allLi[i].style.height="28px";
if (indexObj==allLi[i])
{
index=i;
}
}
indexObj.style.borderBottom="0px solid #666688";
indexObj.style.backgroundColor="#0000FF";
indexObj.style.height="31px";
document.getElementById("subMenu").innerHTML=infoArr[index];
}
/script
body onLoad="ShowMenu()"
div id="dNavBar" style="float:none; width:560px;"li首页/lili娱乐快报/lili音乐天地/lili极品FLASH/li
/div
div id="subMenu"站务公告/div
/body
/html
/span
用纯CSS如何制作流行的TAB菜单?
Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大,不管哪种方法,必须要使用javascript调用。
ul class="tabs"
li
input type="radio" name="tabs" id="tab1" checked /
label for="tab1"选项卡 1/label
div id="tab-content1" class="tab-content"
p选项卡内容 1/p
/div
/li
li
input type="radio" name="tabs" id="tab2" /
label for="tab2"选项卡 2/label
div id="tab-content2" class="tab-content"
p选项卡内容 2/p
/div
/li
/ul
纯css选项卡tab特效代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于css实现选项卡、纯css选项卡tab特效代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-14网站怎么设计,网站怎么设计怎么实现的
- 05-06透明css代码(css3透明)[20240506更新]
- 05-06css特效代码大全1(css字体特效代码)[20240506更新]
- 05-06表白css特效代码(html520表白代码)[20240506更新]
- 05-06js页面左右滑动特效代码(js滚动特效)[20240506更新]
- 05-05实现导航界面代码(导航用户界面)[20240505更新]
- 05-05bootstrap图片特效代码(bootstrap图标怎么用)[20240505更新]
- 05-05jquery柱状图代码(js柱状图如何实现)[20240505更新]
- 05-05游程编码代码(游程编码的实现)[20240505更新]
- 05-05tab滑动门代码(css滑动门代码)[20240505更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接