原生js三种选项卡效果（滑动）

第二种：鼠标移入切换效果实现

<!DOCTYPE html>

<html>

<head>

<title>选项卡-鼠标移入触发效果</title>

margin: 0;

padding: 0;

list-style: none;

}

body{

background: #58596B;

display: flex;

justify-content: center;

}

#box{

margin-top: 10%;

}

.box ul{

width:600px;

height: 60px;

background: #33344A;

}

.box ul li{

float: left;

transition: 0.3s;

}

.box ul li a{

display: block;

width: 100px;

height: 60px;

line-height: 60px;

/*border: 1px solid red;*/

text-decoration: none;

text-align: center;

color: #717181;

font-size: 15px;

}

.boxtwo {

clear: left;

}

.boxtwo ul{

width: 600px;

height: 300px;

background: white;

}

.boxtwo ul li{

position: absolute;

transition: 0.3s;

padding: 30px;

font-family: "微软雅黑";

font-size: 15px;

width: 600px;

height: 10px;

}

.show{

opacity: 3;

}

.hide{

opacity: 0;

}

.bj{

background: #e74c3c;

}

</style>

window.onload=function(){

var OneLi=document.getElementsByClassName(‘box‘)[0].getElementsByTagName(‘li‘);

var TwoLi=document.getElementsByClassName(‘boxtwo‘)[0].getElementsByTagName(‘li‘);

var a=document.getElementsByClassName(‘box‘)[0].getElementsByTagName(‘a‘)

OneLi[0].className=‘bj‘

a[0].style.color=‘white‘

for(var i=0;i<OneLi.length;i++){

OneLi[i].index=i

OneLi[i].onmouseover=function(){

var num=parseInt(this.index)

for(var j=0;j<OneLi.length;j++){

OneLi[j].className=‘‘

TwoLi[j].className=‘hide‘

a[j].style.color=‘‘

}

OneLi[num].className=‘bj‘

TwoLi[num].className=‘show‘

a[num].style.color=‘white‘

}

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>

<li class="hide">元芳薛之谦事件你怎么看？</li>

<li class="hide">娱乐圈的那点事，潜规则？</li>

<li class="hide">淘宝双十一你们是不是又要剁手了？</li>

</ul>

</div>

</body>

</html>

WEB前端学习交流群20 103791667

时间： 2024-09-29 03:41:37

原生js三种选项卡效果（滑动）的相关文章

原生js三种选项卡效果（轮播）

第三种:定时轮播切换(我这边定时是2s) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡-自动播放效果</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ background: #58

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生js实现的放大镜效果

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style&

三种动画效果旋转 RotateAnimation 缩放 ScaleAnimation 渐变 AlphaAnimation 动画效果集合 AnimationSet 1 // 初始化欢迎页面的动画 2 3 private void initViews(){ 4 5 RelativeLayout rlRoot = (RelativeLayout) findViewById(R.id.rl_root); 6 7 RotateAnimation rotate = new RotateAnimation(

原生js面向对象编程-选项卡(自动轮播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向对象编程-选项卡(自动轮播)</title> <style> #div1 div{ width:400px; height:300px; border:1px solid #ccc; overflow: hidden; display

jquery带三种切换效果的焦点图插件-luara.js插件

1.简介 luara.js 焦点图插件,用于设置焦点幻灯片的插件,实例中列出了三种最常用的效果,渐隐.上滑.左滑,可以设置切换的时间间隔. 2.插件调用代码段 <script> $(function(){  $(".example1").luara({ width:"500", height:"334", interval:5000, selected:"seleted"

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

CSS3及JS简单实现选项卡效果（适配手机端和pc端）

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.