hover图片显现遮罩点击切换图片

代码如下：

html：

<div class="box"><ul class="imgs"><li><img src="./images/点击换图/1.jpeg" alt=""><!-- 透明遮罩 --><div class="mask"></div></li><li><img src="./images/点击换图/2.jpeg" alt=""><!-- 透明遮罩 --><div class="mask"></div></li><li><img src="./images/点击换图/3.jpeg" alt=""><!-- 透明遮罩 --><div class="mask"></div></li><li><img src="./images/点击换图/4.jpeg" alt=""><!-- 透明遮罩 --><div class="mask"></div></li></ul></div>

css：

<style>*{margin: 0;padding: 0;}/* 将body的宽高设置和浏览器一样 */body,html{width: 100%;height: 100%;}/* 将盒子的宽高设置和浏览器一样 */.box{position: relative;height:100%;background-image: url(./images/点击换图/1.jpeg) ;background-size: cover;}/* body{background-image: url(./images/dianji/1.jpeg);} */ul{position: absolute;left: 50%;bottom: 10px;transform: translateX(-50%);width: 510px;}img{width: 120px;}li{position: relative;cursor: pointer;float: left;margin-left: 10px;list-style: none;}/* 将第一个li的左外边距设置为0 */li:first-child{margin: 0;}/* 渐变效果 */.box .mask{position:absolute;left: 0;top: 0;opacity: 0;width: 120px;height: 80px;background-image: linear-gradient(transparent,rgba(0,0,0,0.8));}/* 鼠标经过时，小图片出现透明遮罩 */li:hover .mask{opacity: 1;} </style>

js：

<script>// 获取元素var box = document.querySelector('.box');var imgs = document.querySelector('.imgs').querySelectorAll('img');var mask = document.querySelector('ul').querySelectorAll('.mask');// 循环注册事件for(var i = 0; i < mask.length; i++){mask[i].setAttribute('index', i);mask[i].onclick = function(){// console.log(imgs[i].src);var index = this.getAttribute('index');box.style.backgroundImage = "url("+imgs[index].src+")";}}</script>

结果：

hover图片显现遮罩点击切换图片

hover图片显现遮罩点击切换图片相关推荐

java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
js实现图片滚动以及点击切换效果
js可以实现多张图片自动滚动的效果,且鼠标移上去则会停止移动,鼠标移开则会继续滚动,点击滚动中的某一张图片则会实现从另外一个地方显示(放大,且鼠标移上去会放大)的效果. 点击链接查看效果:http:/ ...
【影院选座功能模板】vue实现选座功能，点击切换图片，获取座位信息
前言最近突然看到这个功能了,就想着研究一下如何写, 然后在网上看了一些帖子,总结了一下, 这里套用了一个别人的数据结构,这个感觉毕竟好用. 然后写一个简单的模板放在这,以后可能会再这个基础上修改或者 ...
vue制作点击切换图片效果
思路创建一个数组,数组里面放入图片,利用props(父组件向子组件传值),v-for(循环),v-bind(绑定属性)将图片传入HTML定义的div中. Ⅰ.在头部导入vue文件(导入前提是vue文 ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
使用css3和h5实现幻灯片，点击切换图片效果
css3代码部分 <style>*{padding: 0;margin: 0;}.box{display: block;width: 300px;height: 70px;}ul{disp ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
jQuery学习：点击切换图片向左向右移动类似
重点部分在于页面到最右边最左边的判断 --到最左边左边的点击不能切换到最右边右边的点击失效右边的按钮进行判断 ---进行下一张图片的移动移动后也需要判断移动图片 $backward.cl ...
通过CSS切换图片效果，点击这个图片可以实现连接功能，这里的图片在一张大图片中，每个并要切换的图片没有切换，通过disposition定位的方式做
//要注意的是这里的hover属性是不能变得,其中图片偏移位置是以 background: url("images/icons.png") no-repeat scroll 0 ...

hover图片显现遮罩点击切换图片

hover图片显现遮罩点击切换图片相关推荐

最新文章

热门文章

hover图片显现遮罩 点击切换图片

hover图片显现遮罩 点击切换图片相关推荐

最新文章

热门文章

hover图片显现遮罩点击切换图片

hover图片显现遮罩点击切换图片相关推荐