Js简单处理图片的显示和隐藏

最新推荐文章于 2021-07-04 16:34:40 发布
最新推荐文章于 2021-07-04 16:34:40 发布
阅读量3.3k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44551879/article/details/86553472
版权

开发工具与关键技术：DW HTML+JS
作者：杨泽平
撰写时间：2019，1,18

下面是我写的例子，首先我想做的是把一照片做到可以随意让它显示和隐藏，我先是想到用hover伪类做的；后来我改用JS来做，在代码里面我是把用hove伪类跟JS做的两种效果写在一起，这样好作比较；代码详情请看截图
在这里插入图片描述
我们都知道hover伪类做出来的效果是鼠标移入图片就会显示，鼠标移出图片就会消失，效果请看截图：
在这里插入图片描述
hover伪类确实可以做出显示和隐藏的效果，但是我想要的是照片显示的同时我可以用鼠标去操作其他的，而当我不需要图片的时候又可以随手隐藏它。
那么我改用用JS来写，我先是给外层li标签添加onclick点击事件，然后再给里面图片的div添加了onmouseover事件，JS截图

最低0.47元/天 解锁文章
哆啦。猫
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现点击隐藏图片
deliefu3790的博客
05-15 1784
方法一： 把图片的display设为none，触发点击事件时，display变为block <style> img { width: 400px;height: 300px; display: none; } </style> <body> <input id = "b...
图片隐藏在js怎么弄出来_JavaScript实现定时隐藏与显示图片的方法
weixin_39861734的博客
12-31 373
本文实例讲述了JavaScript实现定时隐藏与显示图片的方法。分享给大家供大家参考。具体如下：这里使用JavaScript实现定时隐藏与显示图片，设定图片在几秒后会自动显示，也会自动隐藏，秒数这个自己去定义吧，在JavaScript代码片段内。运行效果如下图所示：具体代码如下：/p>"http://www.w3.org/TR/html4/loose.dtd">定时隐藏图片var se...
原生JS实现隐藏显示图片 JS实现点击切换图片效果
12-12
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>换图片</title> </head> <body> <butt
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）
10-29
其实我想实现的只是大图预览，不需要太复杂。后来，在原来有的javascript资料里找到这个:)“JavaScript网页设计300例.chm”，从里面找到了类似的下拉菜单的例子修改了一下，以实现这个功能。
js点击按钮显示图片，再点击关闭图片最佳完美解决方案（点击按钮隐藏图片 再次点击显示图片，可循环）
weixin_41160560的博客
04-24 5121
result += "<img id='comfirmPic1Local' style='display:none' >" result += "<button id='lookPic' onclick='findPic1Local("+comfirmPic1Local+","+lookPic+")'>查看回单</button>" function...
javascript实现京东登录显示隐藏密码
10-15
总的来说，通过JavaScript实现京东登录显示隐藏密码的功能，主要是利用DOM操作和事件监听，结合CSS美化，为用户提供了一种方便的方式来查看和确认他们的输入。这种做法提高了用户体验，特别是对于那些需要确保每个...
鼠标经过显示图片离开隐藏JS代码
12-25
在这个例子中，我们创建了一个`<div>`元素，当鼠标悬停在该元素上时，会触发`onmouseover`事件，调用`showImage`函数，显示隐藏的图片（通过移除CSS类`hidden`来实现）。当鼠标离开`<div>`元素，`onmouseout`事件被...
鼠标移动到图片名上,显示图片的简单实例
09-05
标题中的“鼠标移动到图片名上，显示图片的简单实例”描述了一个JavaScript实现的交互功能，当用户将鼠标悬停在图片名称上时，实际的图片会显示出来，而当鼠标离开时，图片则不再显示。这个功能常用于提供预览效果...
基于zepto.js简单实现上传图片
10-22
在本文中，我们将深入探讨如何使用Zepto.js这个轻量级的JavaScript库来实现一个简单的图片上传功能。Zepto.js是专门为移动设备设计的一个类似jQuery的库，它提供了丰富的DOM操作和事件处理功能，适用于移动端的Web...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
10-23
最近接了个项目，项目需求是这样的，当点击图片查看图片，再次点击大图被隐藏，在移动端用的比较多，因为移动端屏幕小，需要查看大图。具体代码实现过程本文给大家介绍，需要的朋友可以参考下
js点击按钮显示图片，再点击关闭图片最佳完美解决方案
wangchaoqi1985的博客
07-04 706
js点击按钮显示图片，再点击关闭图片最佳完美解决方案
JavaScript之显示和隐藏图片
m0_50481455的博客
04-21 2562
JavaScript之显示和隐藏图片 点击按钮可以显示和隐藏图片（默认显示），附上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn">隐藏</button> <b
在JS中实现鼠标挪移上去时图片放大显示 移开时关闭
NYHongHong的博客
10-07 608
准备一个html文档 并且设置两张图片 <img id="pic" src="img/img/1.jpg" onmouseover="showImg()" onmouseout="hideImg()" /> <div id="big_pic"> <img src="img/img/1.jpg"/> </div> 然后是JS中的代码 function showImg(){ ...
js--鼠标移入移出小图片，显示隐藏大图片
weixin_30892987的博客
07-23 496
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>UntitledPage</title> <scripttype="text/javascript"> //JScript文件 //******* ...
使用JavaScript实现鼠标移进按钮显示移出隐藏功能
weixin_44538411的博客
01-19 6847
开发工具与关键技术：DW、JavaScript实现功能 作者：陈隆 撰写时间：2019年01月17日 下面使用简单的js实现移进显示移出隐藏常用的功能，先创建一个HTML文件，然后把需要的代码写到HTML页面里， 先写一个button按钮作为鼠标移动的目标，接着把要显示和隐藏的表格写出来（这里内容不定，可以根据需求来写），（具体代码看截图） 写好HTML之后接下来就是写CSS样式了，一样是先创...
js实现鼠标悬浮元素出现/隐藏效果
code_5的博客
12-05 7570
参考慕课网视频：https://www.imooc.com/video/2879 实现效果比较简单，实现方法也不难，但有些细节需要注意。 最终效果如图： 鼠标移到“分享”上方时，粉红色div缓慢出现： 鼠标移开时，自动缓慢隐藏   实现思路： 首先是给div定义一个left，且值为负数，使之隐藏。通过js鼠标事件，使用定时器，改变left的值。   实现代码： &lt;!D...
HTML+CSS+JS+JQ+Bootstrap的工业焊接工程服务响应式网页.7z
最新发布
06-28
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架搭建、CSS的视觉美化、JavaScript的交互逻辑、jQuery的高效操作以及Bootstrap的响应式设计，全方位揭秘了现代网页开发的精髓。 HTML，作为网页的基础，它构建了信息的框架；CSS则赋予网页生动的外观，让设计创意跃然屏上；JavaScript的加入，使网站拥有了灵动的交互体验；jQuery，作为JavaScript的强力辅助，简化了DOM操作与事件处理，让编码更为高效；而Bootstrap的融入，则确保了网站在不同设备上的完美呈现，响应式设计让访问无界限。 通过这份源码，你将： 学习如何高效组织HTML结构，提升页面加载速度与SEO友好度； 掌握CSS高级技巧，如Flexbox与Grid布局，打造适应各种屏幕的视觉盛宴； 理解JavaScript核心概念，动手实现动画、表单验证等动态效果； 利用jQuery插件快速增强用户体验，实现滑动效果、Ajax请求等； 深入Bootstrap框架，掌握移动优先的开发策略，响应式设计信手拈来。 无论是前端开发新手渴望系统学习，还是资深开发者寻求灵感与实用技巧，这份资源都是不可多得的宝藏。立即深入了解，开启你的全栈前端探索之旅，让每一个网页都成为技术与艺术的完美融合！
js编写一个简单的轮播图，带箭头和圆点
05-29
以下是一个简单的轮播图的HTML和JavaScript代码，带有箭头和圆点： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> #carousel { position: relative; overflow: hidden; height: 400px; width: 800px; margin: 0 auto; } #carousel img { position: absolute; top: 0; left: 0; height: 400px; width: 800px; opacity: 0; transition: opacity 1s; } #carousel img.active { opacity: 1; } #carousel .arrow { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 3em; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 0.5em; border-radius: 5px; z-index: 1; } #carousel .arrow.prev { left: 0; } #carousel .arrow.next { right: 0; } #carousel .dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 1em; } #carousel .dot { height: 0.5em; width: 0.5em; margin: 0 0.2em; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.5s; } #carousel .dot.active { background-color: #fff; } </style> </head> <body> <div id="carousel"> <img src="img1.jpg" class="active"> <img src="img2.jpg"> <img src="img3.jpg"> <div class="arrow prev">‹</div> <div class="arrow next">›</div> <div class="dots"> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> <script> const carousel = document.getElementById('carousel'); const images = carousel.querySelectorAll('img'); const arrows = carousel.querySelectorAll('.arrow'); const dots = carousel.querySelectorAll('.dot'); let index = 0; function changeImage() { images.forEach(img => img.classList.remove('active')); images[index].classList.add('active'); dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); } function nextImage() { index = (index + 1) % images.length; changeImage(); } function prevImage() { index = (index + images.length - 1) % images.length; changeImage(); } function dotClicked(e) { index = Array.prototype.indexOf.call(dots, e.target); changeImage(); } arrows.forEach(arrow => arrow.addEventListener('click', e => { if (e.target.classList.contains('prev')) { prevImage(); } else { nextImage(); } })); dots.forEach(dot => dot.addEventListener('click', dotClicked)); </script> </body> </html> ``` 在这个代码中，我们使用了HTML的`<img>`标签来显示图片，CSS来布局和样式化轮播图，以及JavaScript来实现轮播图的逻辑。我们在HTML中定义了轮播图的容器`<div id="carousel">`，其中包含了图片、箭头和圆点等元素。我们为容器设置了宽度和高度，并使用`overflow: hidden`属性来隐藏超出容器范围的元素。我们在CSS中使用绝对定位和`opacity`属性来实现轮播图的切换效果，使用`transition`属性来实现渐变动画。我们使用JavaScript来实现图片切换、箭头和圆点点击等交互逻辑。我们在JavaScript中定义了`changeImage()`函数来切换图片和圆点的状态，定义了`nextImage()`和`prevImage()`函数来切换下一张和上一张图片，定义了`dotClicked()`函数来处理圆点的点击事件。我们使用`addEventListener()`方法来为箭头和圆点添加点击事件监听器，使用`classList`属性来添加或移除CSS类来改变元素的状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值