【yoyo】移入切换

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><!-- 设置区域样式 --><style>/*设置展示区样式*/.main {width: 500px;height: 400px;border: 3px solid cyan;margin: auto;overflow: hidden;}/*设置按钮区域样式*/.tip {width: 100%;height: 30px;}/*设置按钮样式*/button {width: 30px;height: 30px; background-color: red;margin-left: 70px;color: white;}/*设置图片区域样式*/.img_div {width: 300px;height: 350px;background-color: yellow;margin: 20px auto;}/*设置图片样式*/img {width: 100%;height: 100%;background-color: pink;}</style>
</head>
<body><!-- 创建一个区域 --><div class="main"><!-- 创建一个点击区域 --><div class="tip"><!-- 创建4个按钮 --><button>1</button><button>2</button><button>3</button><button>4</button></div><!-- 创建一个放置图片的区域 --><div class="img_div"><!-- 创建4张图片 --><img src="1.jpg" alt=""><img src="2.jpg" alt=""><img src="3.jpg" alt=""><img src="4.jpg" alt=""></div></div>
</body>
<script>// 获取元素内容var btn = document.getElementsByTagName('button');var imgDiv = document.getElementsByTagName('img');// 因for循环执行完毕后，最终显示结果只能展示第四个图片，因此将全局变量i，设置为局部变量afor (var i = 0; i < btn.length; i++) {(function(a){// 添加执行动作，通过鼠标显示选择图片btn[i].onmouseover = function(){// 当鼠标移入时先隐藏所有照片，按钮颜色保持不变for (var j = 0; j < btn.length; j++) {imgDiv[j].style.display = 'none';btn[j].style.backgroundClor = 'red';}//改变被点击的按钮颜色，并将该按钮对应的图片展示出来this.style.backgroundClor = 'cyan';imgDiv[a].style.display  = 'block';}})(i);        }
</script>
</html>
效果展示：

【yoyo】移入切换相关推荐

在vue中鼠标移入切换背景图片移出时再次切换图片
在Vue中,当鼠标移入元素时,可以通过绑定@mouseover事件来触发相应的方法,该方法可以通过修改数据来改变元素的背景图片.同样地,当鼠标移出元素时,可以绑定@mouseout事件触发另一个方法, ...
Css hover时取子元素切换img 实现图片移入切换
<div class="patent-case"><div class="patent-title-imgo"><img src= ...
JQuery实现图片自动轮播左右切换鼠标移入
首先轮播的精髓就是在于图片的平滑滚动,下面图片应该能一下就看明白: 第一我们将可视区控制在我们想呈现的内容的大小第二接着是在可视区内放入内容(图片): 第三 JQ效果实现 , 中下方小圆点(按 ...
Python GUI篇——关不掉的小窗口
Python GUI篇--关不掉的小窗口很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. 很多已经做案例的人,却不知道如何去学习更加高 ...
python猜词游戏源代码_Python趣味小游戏编写教学
这篇文章教大家用Python编写一些有趣的小程序,用到的都是一些简单的基础的python语句,适合刚入门的小白,可以尝试跟着一起敲一下,感受一下编程中的乐趣. 数字炸弹相信大家在聚餐时都玩过猜数字 ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...
尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
五年磨一剑，QUI框架V3.2完美推出
如果你不清楚QUI框架是什么,那么请看这条资讯:<Web 前端框架 QUI v3.0 发布> 官方网站:http://www.quickui.net 最新免费版下载地址: http://q ...
（七）前端基础之背景图片，图片超链接存在的问题
一,background background-color和background-image可同时设置,背景颜色会作为背景图片的底色,背景图片默认在元素的左上角显示 background-positi ...

【yoyo】移入切换

【yoyo】移入切换相关推荐

最新文章

热门文章