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

js点击图片显示隐藏文字

发布时间：2023-10-24 05:58:20

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，其中包含文本。这是蒙版层。

阅读全文

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

热点内容

飞段动漫图片发布：2024-11-26 09:39:22 浏览：633

陈情令蓝忘机魏无羡衣服图片发布：2024-11-26 09:24:01 浏览：10

如何让图片反向发布：2024-11-26 09:10:12 浏览：757

男生后背头像高清图片发布：2024-11-26 09:01:13 浏览：118

男生广告插画图片发布：2024-11-26 08:59:53 浏览：652

迪士尼烟花壁纸微信图片高清发布：2024-11-26 08:58:56 浏览：739

脚心怕痒的男生图片发布：2024-11-26 08:58:56 浏览：818

wps怎么做图片发布：2024-11-26 08:38:35 浏览：538

酷帅的女生图片动漫图片发布：2024-11-26 08:26:54 浏览：623

word文档里用横线分割图片发布：2024-11-26 08:21:56 浏览：308

简单的傣族舞蹈动作图片发布：2024-11-26 08:14:43 浏览：500

怎样让word中的图片按时间排序发布：2024-11-26 08:04:40 浏览：428

柯基红衣服图片发布：2024-11-26 08:03:56 浏览：477

转载博客美女动态图片发布：2024-11-26 08:01:51 浏览：344

word如何图片和文本框组合发布：2024-11-26 08:00:49 浏览：966

夸克图片文字转换发布：2024-11-26 08:00:47 浏览：517

电动小吃车图片及价格发布：2024-11-26 07:59:17 浏览：375

动漫少女图片墙纸发布：2024-11-26 07:59:15 浏览：206

短裤美丽女生图片发布：2024-11-26 07:57:48 浏览：329

2016年短发发型图片女发布：2024-11-26 07:54:46 浏览：393