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

点击图片显示文字js

发布时间:2022-01-12 14:12:57

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

给你实现思路:

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

  1. 按扑克中轴线,以固定速率将img的width逐步变为0,这样扑克将消失;

  2. 动态替换img为扑克反面,以同样速率将img的width由0变为原宽度,完成翻页。


关键代码:

<div id="divad1" class="poker" style="text-align: center;">

<a onclick="javascript:flipPoker()" href="#"><img src="front.jpg" id="picad1" height="200" border="0" style="width: 200px; display: inline-block;"></a></div>


给这个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. CSS中点击图片出现对应的文字

大体类似于这样试试
<frameset cols="20%,*">
<frame src="1.html" />
<frame src="2.html" />
</frameset>

1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var p=document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].onclick=test;
}
}
function test(){
var src=this.getAttribute("src");
var img=window.parent.frames[1].document.images[0];
img.setAttribute("src",src);
}
window.onload=init;
</script>
</head>

<body>
<p src="1.jpg">test1</p>
<p src="2.jpg">test2</p>
</body>
</html>

2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<img src="3.jpg" />
</body>
</html>

3. html 点击图片显示文本

鼠标移动到图片上,显示文字,简单的方法是利用“title”。
例如:
<img src="/index/4.png" alt="HTML5在线制作" title="HTML5在线制作">
鼠标移动到4.png图片上时候,显示出“HTML5在线制作”

4. 求JS代码:点击弹出div,选择图片后,使另一个div显示对应的字体类型

<scripttype="text/javascript">
$(document).ready(function(){
$("#font").click(function(e){
$("#tooltips0").toggle();
e.stopPropagation();
});
$(document).click(function(){
$("#tooltips0").hide();
});
//改这里就可以了哟
$(".font_selectGroupsli").click(function(){
$("#tooltips0").hide();
$("#fontshow").text(//(w+).png$/.exec($(this).find('img').attr('src'))[1]);
});
});
</script>

5. 鼠标在图片上,显示文字,移开文字隐藏的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>

6. 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>

7. 【JavaScript】如何实现点击链接文字出现图片效果

比较汗~ 先别学JAVA 先去看HTML的基础

8. 求写网页点击文字 显示一个框 的js代码 在本页显示 比如新出的框可以显示文字 图片等等

你这个意思是要建一个新的层,里面放图片和文字,为什麽本层不能放么,这个用不着特效吧,直接用框架即可

9. 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>

10. 鼠标点击图片后能够显示出文字的网页代码

只要单击图片,就会弹出一个对话框,在对话框中显示你要显示的文字

<html>
<head>
<script language="vbscript">
<!--
sub yt_onclick
msgbox"你好"
end sub
sub ty_onclick
msgbox"hello"
end sub
-->
</script>
</head>
<body>
<a href=# name=ty><img src="你要显示的图片"></a>
</body>
</html>

阅读全文

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

热点内容
小学诗歌图片手绘画四年级简单 浏览:435
齐头发半扎头发型图片大全 浏览:801
如何找到双层空间的图片 浏览:778
动漫小妞图片 浏览:760
植物简单画图片大全 浏览:728
侧脸女生流泪图片 浏览:50
怎么把好几页word图片弄成一页 浏览:451
动漫图片男生帅气冷酷简笔画 浏览:866
百姓问政文字图片 浏览:362
如何画植树手抄报图片大全 浏览:419
如何把图片中字弄清晰 浏览:468
杂志如何做图片 浏览:337
word图片拉大后打印出来有白边 浏览:631
时尚女孩服装搭配图片 浏览:445
男生头像图片背影黑白 浏览:501
幼儿园漫画图片简单教程 浏览:190
qq背影伤感图片带字头像女生头像 浏览:75
男青龙女白狐图片大全 浏览:908
老公与老婆的动漫图片 浏览:659
抖音怎么拍图片加文字 浏览:938