JavaScript实现显示和隐藏图片
JavaScript之显示和隐藏图片,供大家参考,具体内容如下
点击按钮可以显示和隐藏图片(默认显示),附上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn">隐藏</button> <br> <img src="img/image01.jfif" id="newGirlFriend"> <script type="text/javascript"> // 1.获取事件源 var obtn = document.getElementById("btn"); var newImg = document.getElementsByTagName("img")[0]; // var isShow = true; //方法2 // 2.绑定事件 obtn.onclick = function (){ // if (isShow) { //方法2 if (obtn.innerHTML === '隐藏') { // 3.事件驱动程序 newImg.style.display = 'none'; obtn.innerHTML = "显示"; // // isShow = false; //方法2 }else { newImg.style.display = 'block'; obtn.innerHTML = "隐藏"; // isShow = true; //方法2 } } </script> </body> </html>
有两种实现方法,实现情况如下:
这是默认显示界面,点击隐藏后,会这样:
简单的显示和隐藏图片功能就实现啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <
-
js调用图片隐藏&显示实现代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <SCRIPT> var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj=null; var curOpa
-
JavaScript实现定时隐藏与显示图片的方法
本文实例讲述了JavaScript实现定时隐藏与显示图片的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现定时隐藏与显示图片,设定图片在几秒后会自动显示,也会自动隐藏,秒数这个自己去定义吧,在JavaScript代码片段内. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
-
JavaScript实现显示和隐藏图片
JavaScript之显示和隐藏图片,供大家参考,具体内容如下 点击按钮可以显示和隐藏图片(默认显示),附上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示和隐藏图片</title> </head> <body> <button id="btn"
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar
-
jQuery框架实现元素显示及隐藏三种动画方式
目录 一.默认方式显示和隐藏 二.滑动方式显示和隐藏 三.淡入淡出方式显示和隐藏 四.案例:广告的自动显示和隐藏 本文分享自华为云社区<jQuery框架实现元素显示及隐藏动画[附案例分析]>,原文作者:灰小猿. 首先来看一个简单的动画效果图: 我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作,所以上面显示和隐藏的也只是一个div,而并不是一个图片.下面我就来和小伙伴们讲一个如何对元素的属性进行操作,使其显示或者隐藏! 在jQuery框架中对元素对象进行显
-
使用javascript控制cookie显示和隐藏背景图
每当重大节日期间,各大主流网站首页会披上节日的盛装,设计者一般会使用大幅背景图片来获得更好的视觉冲击效果,当然,也要考虑到有些用户不习惯这大背景图,那么在背景图上放置"关闭"按钮是有必要的,用户只要点击"关闭背景"按钮,大幅背景图将会消失. 我们使用javascript来控制背景图片的显示和隐藏,当点击关闭按钮时,控制CSS使页面不加载背景图,同时记录COOKIE相关参数,并设置cookie的有效期,那么在cookie有效期内刷新页面,是不会再加载背景图的,如果co
-
javascript控制层显示或隐藏的方法
本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu
-
javascript随机显示背景图片的方法
本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi
-
Javascript显示和隐藏ul列表的方法
本文实例讲述了Javascript显示和隐藏ul列表的方法.分享给大家供大家参考.具体如下: <ul id="rightNav"> <li> <h2 class="rightNavItem"><a href="#">Show & Hide</a></h2> <ul> <li><a href="">Links et
-
JavaScript实现下拉菜单的显示和隐藏
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获
-
javascript实现信息的显示和隐藏如注册页面
我们在写注册页面的时候,必填信息是可见的,可选信息是隐藏的,如果用户希望填写,可以单击"详细信息". 复制代码 代码如下: <!-- 下面代码通过javascript实现信息的显示和隐藏 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <scrip
随机推荐
- 注册表-批处理-VBS之间的功能对应
- Python实现统计英文单词个数及字符串分割代码
- 详解hashCode()和equals()的本质区别和联系
- python实现分析apache和nginx日志文件并输出访客ip列表的方法
- 使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
- 基于jQuery下拉选择框插件支持单选多选功能代码
- Asp.net cookie的处理流程深入分析
- Django1.7+python 2.78+pycharm配置mysql数据库
- UTF-8编码第1/2页
- C#数据库操作小结
- C#实现文件上传及文件下载功能实例代码
- HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
- 分页存储过程(二)在sqlserver中返回更加准确的分页结果
- 解析javascript 浏览器关闭事件
- setTimeout自动触发一个js的方法
- C++编程中指针的声明与基本使用讲解
- PHP中strtr与str_replace函数运行性能简单测试示例
- python每天定时运行某程序代码
- 微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
- Python中私有属性的定义方式