图片的显示和隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
#air,#nv{
border: 1px solid red;
width: 300px;
height: 300px;
float: left;
text-align: center;
}
</style>
<script>
// $(function(){
// $("#but").click(function(){
// $("#a1").toggle();
//
// });
// $("#but").click(function(){
// $("#a2").toggle();
// });
// });
// function init(){
// document.getElementById("but").onclick=function(){
// document.getElementById("a1").style.display="none";
// document.getElementById("a2").style.display="block";
// }
// document.getElementById("but").onclick=function(){
// document.getElementById("a1").style.display="block";
// document.getElementById("a2").style.display="none";
// }
// }

function init(){
// document.getElementById("but").onclick=function(){
var a=document.getElementById("a1");
var b=document.getElementById("a2");

if(a.style.display=="none"){
a.style.display="block";
b.style.display="none";
}else{
a.style.display="none";
b.style.display="block";
// }
}
}
</script>
</head>
<body <!---->
<div>
<input type="button" name="but" id="but" value="显示" onclick="init()"/>
<!--<input type="button" name="but1" id="but1" value="隐藏" /><br />-->

<div id="air">
<img src="img/飞机05.gif" style="display: block;" id="a1"/>
</div>
<div id="nv">
<img src="img/3.jpg" style="display: none;" id="a2"/>
</div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/xuaima/p/10474480.html

时间: 2024-10-22 06:35:30

图片的显示和隐藏的相关文章

多个图片的显示与隐藏

//footer的微信微博头条的二维码的显示与隐藏 var contact_logo=$(".contact-logo"); var contact_code=$(".code"); var contact_logo_length=contact_logo.length; contact_logo.each(function(i,item){ $(item).hover(function(){ for(var j=0;j<contact_logo_length

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

4.C#WinForm基础图片(显示和隐藏)

要求: 软件上有一张图片,默认是隐藏的.用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁,则显示图片. 知识点: 取当前年份,Date Time Now Year所需用到的函数 函数一: string string.Substring(int startIndex,int length)(+1重载)                从此实例检索字符串.子字符串从指定的字符位置开始且具有指定的长度          异常:              

点击按钮显示或隐藏图片

<!-- 一种简单的方法 jquery的show/hide也可以 或者jquery中的toggleClass()方法 --> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示或隐藏图片</title> <style> .show{ display: block; } .hide

利用JavaScript通过单选框radio控制div的显示和隐藏

通过鼠标单击单选框的动作,实现某个div或多个div的显示和隐藏.实例如下: JavaScript代码如下: 1 function divClick(){ 2 3 var show = ""; 4 show = $("input[name='AdPrintMode']:checked").val(); 5 switch (show){ 6 case '1': 7 document.getElementById("img1").style.disp

Android状态栏微技巧,动态控制状态栏显示和隐藏

记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解. 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先发起的.因为Android官方从来没有给出过沉浸式状态栏这样的命名,只有沉浸式模式(Immersive Mode)这种说法.而有些人在没有完全了解清楚沉浸模式到底是什么东西的情况下,就张冠李戴地认为一些系统提供的状态栏操作就是沉浸式的,并且还起了一个沉浸式状态栏的名字. 比如之前就有一个QQ群友问过我

js密码修改显示与隐藏效果

一.添加input框 <form class="login_form"> <input class="password inputpwd" id="oldpwd" name="oldpwd" type="password" placeholder="请输入旧密码" /> <div class="invisible" onclick=&qu

图片大小不改动,根据屏幕大小自动把图片居中显示

background属性 background-image: url('../img/1_1.jpg'); <!-- 背景图片路径 --> background-repeat: no-repeat; <!-- 背景图片是否重复显示 --> background-position: center; <!-- 若背景图片小于div,则居中显示 --> background-attachment: fixed; <!-- 背景图片固定,不随scroll拖动而变动 --&

jsp页面做文件上传时遇到要根据登陆名按钮显示或隐藏的情况

项目遇到的情况要根据登陆的角色不同显示或隐藏按钮,因为之前没有遇到过 所以有些不知道怎么下手,百度解决了 方法如下: document.getElementById("#anniu").hide() <button id="anniu">隐藏按钮</button>