1. 网页实现点击图片后图片消失显示文字
给你实现思路:
扑克翻页效果的原理在于利用眼睛观察物体的错觉,扑克翻页效果分解为两个步骤:
按扑克中轴线,以固定速率将img的width逐步变为0,这样扑克将消失;
动态替换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>