js点击图片显示隐藏文字_js点击图片在文本框内显示文字

1. 网页实现点击图片后图片消失显示文字

给你实现思路：

扑克翻页效果的原理在于利用眼睛观察物体的错觉，扑克翻页效果分解为两个步骤：

按扑克中轴线，以固定速率将img的width逐步变为0，这样扑克将消失；
动态替换img为扑克反面，以同样速率将img的width由0变为原宽度，完成翻页。

关键代码：

给这个div内的img元素绑定函数flipPoker

function flipPoker( ){

var tar = $('#picad1');

var origin = tar.attr('src');

var back = "back.jpg" //扑克背面图片名称

//以中轴线渐变将图片隐藏,并瞬间替换img图片内容

tar.animate({width:'0px'},"fast",function(){tar.attr('src',origin);});

//立即渐变还原图片width

tar.animate({width:'200px'},"fast");

}

＝＝＝＝＝＝＝＝＝＝＝＝＝

上述代码用到了jQuery1.8.3 的animate函数

html代码里的样式"text-align:center"很关键，没有这个样式，图片将会自左向右渐变，加了样式之后就是按中轴线渐变了

如果还不行就参考这个页面的代码：

http://vwfc-dealer.cneln.net/eln3_asp/index.do

2. 鼠标在图片上，显示文字，移开文字隐藏的js代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>test</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>
<script>
$(function(){	
	$("#div1").hover(function(){
		$(this).find("span").show();
	},function(){
		$(this).find("span").hide();
	})
})

</script>
<style>
#div1{width:200px;height:200px;position:relative;border:1pxsolid#ddd;margin:0;}
#div1img{width:200px;height:200px;}
#div1span{position:absolute;top:0;left:0;width:100%;height:100%;display:none;background:rgba(0,0,0,.3);z-index:1;color:#FFF;}
</style>
</head>

<body>
	<divid="div1">
<imgsrc="http://img2.niushe.com/upload/201306/26/11-51-25-86-59983.jpg"/>
<span>这里是文字文字</span>
</div>
</body>
</html>

3. js点击图片在文本框内显示文字

亲，改一下js代码，改成这样就可以了

<scripttype="text/javascript">
tb=document.getElementById('textbox');
spans=document.getElementsByTagName("span");
for(vari=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].onclick=function()
{
alert(spans[this.index-1].innerHTML);
}
}
</script>

4. js点击图片后所点的图片变成一段文字

<div>
	<imgid="img1"src="1.jpg"onclick="Cmd(this,'span1');"/>
	<spanid="span1"style="display:none;"onclick="Cmd(this,'img1');">介绍文字</span>
</div>
<script>
	functionCmd(v,id){
		v.style.display="none";
		document.getElementById(id).style.display="";
	}
</script>

5. css如何实现鼠标移至图片上显示遮罩层及文字

1.首先看看HTML、一个img图像控件和一个带掩码样式的div，其中包含文本。这是蒙版层。

热点内容

男人帅气发型图片大全发布：2025-07-19 04:54:06 浏览：814

word图片怎么变大排列发布：2025-07-19 04:35:36 浏览：164

男生小眼睛的发型图片发布：2025-07-19 04:24:07 浏览：568

少女画画图片简单发布：2025-07-19 03:22:50 浏览：484

word里怎么把图片弄成弧度的发布：2025-07-19 02:25:13 浏览：728

女孩斗鸡眼真人图片发布：2025-07-19 02:23:39 浏览：102

搞笑萌系动漫图片发布：2025-07-19 01:41:16 浏览：446

给男生挠脚心漫图片发布：2025-07-19 01:15:50 浏览：228

女盖头发型图片发布：2025-07-19 01:10:23 浏览：545

我是吃货的文字图片发布：2025-07-19 01:00:14 浏览：390

白袜初中女生图片发布：2025-07-19 01:00:11 浏览：491

动漫骑士高清图片发布：2025-07-19 00:58:31 浏览：327

女主发型烫发图片发布：2025-07-19 00:57:24 浏览：337

表演区衣服制作图片海绵纸发布：2025-07-19 00:34:08 浏览：743

简单的建筑模型图片发布：2025-07-19 00:08:47 浏览：640

男生烫发长长后图片发布：2025-07-19 00:08:46 浏览：827

如何提取移动端页面图片发布：2025-07-18 23:48:45 浏览：849

悟空时代衣服图片发布：2025-07-18 23:43:46 浏览：98

男士牛仔裤图片价格发布：2025-07-18 23:43:42 浏览：668

杂志美女可爱图片发布：2025-07-18 23:37:56 浏览：452

导航:首页 > 文字图片 > js点击图片显示隐藏文字

js点击图片显示隐藏文字

与js点击图片显示隐藏文字相关的资料