几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
JS实战003:选项卡切换图片
来源：互联网
2023-03-16 23:56:24 112
有了前面制作滑动轮播图的经验，再来做个选项卡切换的非常容易了，跟我们在轮播图下面新增点选功能基本是一样的，当我把鼠标放到那个选项上就切换到哪张图，同时选项卡的背景色跟随鼠标移动而变化，下面是效果图。
工具/原料
- JavaScript
方法/步骤
同样的我们第一步先写出HTML基本代码，这里我们有四个选项和四张图，鼠标放到哪个选项上下面就显示对应的图出来，默认给第一个选项选中效果和第一张图显示效果，所以分别加了active和show属性。
第二步，布局显示，最外面的div是用来定义图片显霜廊示区域的，而ul而分别指向了选项列表和图片列表，为了让图片显示在同一位置，这里我盆晃盯们还是用到了绝对定位，并默认隐藏了其他几张。
这里需要注意的是我设置了box-sizing: border-box;属性，所以在计算容器宽高时要把边距所以我们也计算在内，不然会出错，这种方式比较适合百分比的时候用，这时页面载入的时候看到如下的效果：
第三步就是交互效果了，用JavaScript获取我们需要进行交互的元素，然后遍历我们的nav列表，当我们将鼠标放置到对应的选项时将其他几个选项的active样式去除，而picture则将其他几个的show样式去除，只留本身的样式。
这样我们就得到了上图的效果了，这个思路不止可以用在图片切换上，content中可以放入任何你想要显示的内容，下面是完整代码，有兴趣的可以试试。
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>选项卡/title>
style type="text/css">
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
li{
list-style: none;
}
#tab{
position: relative;
width: 600px;
height: 400px;
margin:50px auto;
border: 10px solid rgba(10, 10, 10,0.5);
}
.nav{
float: left;
width: 25%;
height: 50px;
background-color: #eee;
text-align: center;
line-height: 50px;
}
.active{
background-color: rgba(15,151,241,0.6);
}
.content{
position: absolute;
width:580px;
top:50px;
height: 330px;
}
.content .picture img{
position: absolute;
display: none;
width: 580px;
height: 330px;
}
.content .picture .show{
display: block;
}
/style>
/head>
body>
div id="tab">
ul class="list">
粒酱li class="nav active">图片一/li>
li class="nav">图片二/li>
li class="nav">图片三/li>
li class="nav">图片四/li>
/ul>
ul class="content">
li class="picture">
img class="show" src="../src/assets/images/1.png" alt="">
/li>
li class="picture">
img src="../src/assets/images/2.png" alt="">
/li>
li class="picture">
img src="../src/assets/images/3.png" alt="">
/li>
li class="picture">
img src="../src/assets/images/4.png" alt="">
/li>
/ul>
/div>
/body>
script>
var navs=document.getElementsByClassName("nav");
varpics=document.getElementsByClassName("picture");
index=0;
for(var i=0;inavs.length;i ){
(function(i){
navs[i].onmouseover=function(){
navs[index].classList.remove("active");
pics[index].children[0].classList.remove("show");
index=i;
navs[index].classList.add("active");
pics[index].children[0].classList.add("show");
}
})(i);
}
/script>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
上一篇：如何用js实现网页时钟效果 下一篇：怎么判断一个页面中li的个数
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 258 JAVASCRIPT
- 详细阅读