正文
js单击图片消失的代码 js编程实现单击按钮显示相应图片的效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
用JS 有三张图片 当你鼠标点击其中一张时候 另外两张消失 求代码！
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
script
function check(){}
/script
/head
img src="石头.jpg" height="100px" width="100px"
img src="剪刀.jpg" height="100px" width="100px" style="margin-left:25px"
img src="布.jpg" height="100px" width="100px" style="margin-left:25px"br
button onClick="check(shi)" id="shi"img src="石头.jpg" height="100px" width="100px"/button
button onClick="check(jian)" id="jian"img src="剪刀.jpg" height="100px" width="100px"/button
button onClick="check(bu)" id="bu"img src="布.jpg" height="100px" width="100px"/button
body
/body
/html
相关问答
Q1: js写一段代码可以让鼠标移近一张图片的时候图片消失露出文字
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleCSS3a href='' target='_blank'u动画/u/a遮罩/title
style type=text/css
/*base*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: normal;
font-family:'Microsoft Yahei',Tahoma,Arial,Helvetica,Simsun,STHeiti;
word-break: normal;
}
ol, ul , li{
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
pre{
white-space:pre-wrap;
}
/* remember to define focus styles! */
:focus {
outline:0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:before, .clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
h1{font-size:16px}
h2, h3{font-size:14px}
h4, h5, h6{font-size:12px}
small{font-size:11px}
input, option, textarea{font-family:Arial;font-size:12px;}
.input-text{border:1px solid #888888;padding:2px 3px;}
/*html5 layout reset*/
article, aside, dialog, figure, footer, header,
hgroup, nav, section, figcaption, details, summary {display:block}
/*css3 transform transition*/
body {background:#999;}
h1 {margin:50px 50px 0 50px; height:50px; line-height:50px; font-size:28px; color:#000;}
ul {width:990px; margin:50px auto 0;}
li {width:320px; height:200px; margin-bottom:20px; border:3px solid #ccc; box-shadow:0 0 1px #000; display:inline-block; overflow:hidden;}
/*auto------------------------------------------------------------------------------------*/
.oneDemo, .twoDemo, .threeDemo {width:320px; height:200px; position:relative; margin:0 auto;}
.transform{height:200px; overflow:hidden;}
.content {position:absolute; top:0; left:0; overflow:hidden;}
.content h3, .content p {width:285px; margin:0 auto; text-align:center; overflow:hidden; color:#fff; text-shadow:1px 0 1px #000;}
.content h3 {height:30px; line-height:30px; font-size:16px;}
.content p {height:45px; line-height:22px; font-size:14px; }
.content a {box-shadow:1px 0 1px #000; text-shadow:1px 0 1px #000;}
/*oneDemo--------------------------------------------------------------------------------*/
.oneDemo .mask {position:absolute; top:0; left:0; display:block; width:360px; height:400px; opacity:1; background:rgba(230, 230, 230, 0.5);}
.oneDemo .mask-top {right:0; left:auto;
-moz-transform:rotate(58.5deg) translate(-424px, -65px); -webkit-transform:rotate(58.5deg) translate(-424px,-65px);
}
.oneDemo .mask-bottom {top:0; left:0;
-moz-transform:rotate(58.9deg) translate(253px,-45px); -webkit-transform:rotate(58.9deg) translate(253px,-45px);
}
.oneDemo .mask-top, .oneDemo .mask-bottom {opactiy:1;
-moz-transition:all 0.3s ease-in-out 0.6s; -webkit-transition:all 0.3s ease-in-out 0.6s;
}
.oneDemo:hover .mask-top {
-moz-transform:rotate(57.9deg) translate(-253px, -65px); -webkit-transform:rotate(57.9deg) translate(-253px,-65px);
}
.oneDemo:hover .mask-bottom {
-moz-transform:rotate(57.9deg) translate(85px, -31px); -webkit-transform:rotate(57.9deg) translate(85px,-31px);
}
.oneDemo:hover .mask-top, .oneDemo:hover .mask-bottom, .oneDemo:hover .content {
-moz-transition-delay:0.1s; -webkit-transition-delay:0.1s;
}
.oneDemo .content {height:0; width:320px; background:rgba(110, 120, 110, 0.8); color:#fff; font-size:14px;
-moz-transform:rotate(-40deg) translate(-100px, 100px); -webkit-transform:rotate(-40deg) translate(-100px, 100px);
-moz-transition:all 0.2s ease-in-out 0.3s; -webkit-transition:all 0.2s ease-in-out 0.3s;
}
.oneDemo:hover .content {width:280px; height:60px; margin-top:50px; padding:20px;
-moz-transform:rotate(0) translate(0); -webkit-transform:rotate(0) translate(0);
}
/*twoDemo----------------------------------------------------------------------------------*/
.twoDemo .content {height:200px; padding:0 20px; position:absolute; top:0; left:0; display:block; opacity:0; background:rgba(130, 130, 130, 0.5);
-moz-transform:translate(460px, -100px) rotate(180deg); -webkit-transform:translate(460px, -100px) rotate(180deg);
-moz-transition:all 0.2s ease-in-out 0.4s; -webkit-transition:all 0.2s ease-in-out 0.4s;
opacity:0;
}
.twoDemo:hover .content {opacity:1;
-moz-transform:translate(0) rotate(0); -webkit-transform:translate(0) rotate(0);
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
.twoDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translateY(-100px); -webkit-transform:translateY(-100px);
-moz-transition:all 0.2s ease-in-out 0s; -webkit-transtiton:all 0.2s ease-in-out 0s;
}
.twoDemo .content:hover h3 {
-moz-transform:translateY(0px); -webkit-transform:translateY(0px);
-moz-tarnsition-delay:0.5s; -webkit-transition-delay:0.5s;
}
.twoDemo .content p {text-align:center; margin-top:20px;
-moz-transform:translateX(300px) rotate(90deg); -webkit-transform:translateX(300px) rotate(90deg);
-moz-transition:all 0.4s ease-in-out 0s; -webkit-transition:all 0.4s ease-in-out 0s;
}
.twoDemo .content:hover p {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}
.twoDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center;
-moz-transform:translateX(-300px) rotate(-90deg); -webkit-transform:translateX(-300px) rotate(-90deg);
-moz-transition:all 0.5s ease-in-out 0s; -webkit-transition:all 0.5s ease-in-out 0s;
}
.twoDemo .content:hover a {-moz-transform:translateX(0) rotate(0); -webkit-transform:translateX(0) rotate(0);}
/*threeDemo----------------------------------------------------------*/
.threeDemo .transform {-moz-transition:all 1s ease-in 0.1s; -webkit-transition:all 1s ease-in 0.1s;}
.threeDemo:hover .transform {-moz-transform:rotate(720deg) scale(0); -webkit-transform:rotate(720deg) scale(0);}
.threeDemo .content {height:200px; padding:0 20px; top:-200px; opactiy:0;background-color:rgba(200, 200, 200, 0.5);
-moz-transition:all 0.3s ease-out 0.5s; -webkit-transition:all 0.3s ease-out 0.5s;
}
.threeDemo:hover .content {top:0; opactiy:1;
-moz-animation:0.9s linear 0s normal none 1 bounceY; -webkit-animation:0.9s linear 0s normal none 1 bounceY;
-moz-transition-delay:0s; -webkit-transition-delay:0s;
}
.threeDemo .content h3 {margin:30px auto 0; background:rgba(110, 120, 110, 0.8); box-shadow:1px 0 1px #000;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.6s ease-in-out 0.1s; -webkit-transition:all 0.6s ease-in-out 0.1s;
}
.threeDemo .content:hover h3 {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
.threeDemo .content p {margin-top:20px;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.4s ease-in-out 0.1s; -webkit-transition:all 0.4s ease-in-out 0.1s;
}
.threeDemo .content:hover p {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
.threeDemo .content a {display:block; width:80px; margin:20px 0 0 0; height:30px; font-size:14px; color:#fff; background:rgba(110, 120, 110, 0.8); text-decoration:none; line-height:30px; text-align:center;
-moz-transform:translateY(-200px); -webkit-transform:translateY(-200px);
-moz-transition:all 0.2s ease-in-out 0.1s; -webkit-transition:all 0.2s ease-in-out 0.1s;
}
.threeDemo .content:hover a {
-moz-transform:translateY(0); -webkit-transform:translateY(0);
-moz-transition-delay:0; -webkit-transition-delay:0;
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-200px);}
40% { -moz-transform: translateY(-180px);}
65% { -moz-transform: translateY(-102px);}
82% { -moz-transform: translateY(-75px);}
92% { -moz-transform: translateY(-32px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-200px);}
40% { -webkit-transform: translateY(-180px);}
65% { -webkit-transform: translateY(-102px);}
82% { -webkit-transform: translateY(-75px);}
92% { -webkit-transform: translateY(-32px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
/style
/head
body
h1CSS3 transform transition animation/h1
ul
li
div class="oneDemo"
img class="transform" src="/jscss/demoimg/201207/61.jpg" /
div class="mask mask-top"/div
div class="mask mask-bottom"/div
div class="content"
h3LANCER EVOLUTION/h3
pLancer Evo.X外观造型与概念车Concept X相似度高达90%以上，动力方面名机4G63从此下台一鞠躬，取而代之的是铝合金汽缸盖且新开发4B11引擎，在涡轮增压的加持下，直四2.0升发动机可输出超过300hp。/p
/div
/div
/li
li
div class="twoDemo"
img class="transform" src="/jscss/demoimg/201207/261.jpg" /
div class="content"
h3写给未来——我的Mr right/h3
p我不知道你会在什么时间 什么地点 什么场合shy;出现可是 我想你碰到我的时候可以一眼就把我认出来,就像我一直坚信我会在见到你的第一眼就认出你一样。/p
a href="#"Mr right/a
/div
/div
/li
li
div class="threeDemo"
img class="transform" src="/jscss/demoimg/201207/361.jpg" /
div class="content"
h3EURO2012/h3
p舍不得你离开，但是不得不离开。这不是无奈，这是竞技体育的残酷。英雄般的倒下让我更加难过，但是很欣慰，哎哟喂，太矛盾了。出色的比赛，我却不敢看上一遍，只怕。。。”/p
a href="#"EURO/a
/div
/div
/li
/ul
/body
/html
Q2: 5s后让图片消失，js如何实现
htmlheadtitlesetTimeout()方法应用演示 /title
script language="JavaScript"
!--
function changeStatusBar(){
window.status = "注意这里，5秒钟后该提示消失！！"; //status为window对象的一个属性
rcTimeout =setTimeout("window.status=''",5000);//代码字符表达式,毫秒数===即前者为空
rcTimeout1=setTimeout("document.images['img'].style.display='none'",5000);
alert(rcTimeout); //显示setTimeout()方法的返回值
alert(rcTimeout1);
}
// --
/script
bodycenter font face=宋体 size=3 color=blue
将延迟时间设置为5秒种。br
img src="1.jpg" border=2 width="210" height="270" name="img"
p请注意状态栏 br
form
input type="button" value="单击此处" onClick="changeStatusBar();"
/form /center
/body
/html
Q3: js怎么实现点击表格图片显示和消失
这个问题其实想要实现的效果不难，但关键在于你的数据是灵活变化的还是固定不变的？
（1）如果是固定的，我是指（表格大小，长宽，位置均不变，但图片内容是可以变化的），这个就很容易写，我写了一个简单的Demo
HTML:
!DOCTYPE html
html
head
title/title
meta http-equiv="Content-type" content="text/html; charset=utf-8" /
style type='text/css'
.sel tr td{
width: 80px;
background:#09f;
height: 20px;
text-align: center;
color:#fff;
cursor: pointer;
}
table tr td img{display: none;} /*这里我先把图片隐蔽了*/
/style
/head
body
table
tr
!-- 给图片添加一个ID --
tdimg src='../picture/01.jpg' id='img1' //td
tdimg src='../picture/02.jpg' id='img2' //td
tdimg src='../picture/03.jpg' id='img3' //td
/tr
/table
table class="sel"
tr
!--直接在td上添加事件，并传入指定的参数--
!-- 这个参数就是对应图片的ID --
td onclick="fToggle('img1')" 1/td
td onclick="fToggle('img2')" 2/td
td onclick="fToggle('img3')" 3/td
/tr
/table
/body
script type="text/javascript"
function fToggle(objId){
//触发事件后，根据传入的参数获取对应的图片的display值
var state = document.getElementById(objId).style.display;
//再进行设置显示或是隐藏就行了
if( state == 'block' ){
document.getElementById(objId).style.display = 'none';
}
else{
document.getElementById(objId).style.display = 'block';
}
}
/script
/html
（2）如果是变化的（指图片多少，表格大小均可以变化），那这里就相对复杂些，不过思路依然是可以沿用上面的思路去做的！这里我就不写了，比较麻烦
js单击图片消失的代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js编程实现单击按钮显示相应图片的效果、js单击图片消失的代码的信息别忘了在本站进行查找喔。
