導航:首頁 > 文字圖片 > js點擊圖片顯示隱藏文字
js點擊圖片顯示隱藏文字
發布時間：2023-10-24 05:58:201. 網頁實現點擊圖片後圖片消失顯示文字
給你實現思路：
撲克翻頁效果的原理在於利用眼睛觀察物體的錯覺，撲克翻頁效果分解為兩個步驟：
按撲克中軸線，以固定速率將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. 滑鼠在圖片上，顯示文字，移開文字隱藏的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點擊圖片顯示隱藏文字相關的資料
- 製作帶文字的圖片
- word圖片兩張排一頁
- 怎麼編輯動態圖片加文字
- word每頁同一位置插圖片
- 帶圖片的word表格復制到表格中
- word插入的圖片去背景
- word中的圖片不在單元格里
- word如何批量改變圖片格式
- 圖片插到word顯示部分圖片怎麼辦
- 圖片文字修改器在線
- 圖片文字怎麼去編輯
- 手機怎麼發表圖片文字
- word圖片導出順序錯亂
- 石榴花鍾狀和筒狀圖片文字區別
- 編輯圖片文字的大小
- 如何將word模板轉化為圖片
- 情深文字圖片
- 文字圖片關於吃的
- word圖片里的文字怎麼去掉邊框
- word嵌入式圖片樣式
- word排版四張圖片列印
- word怎樣整體把插入的圖片放大
- 春季降溫記得添衣文字圖片
- 懷念文字圖片傷感
- word給圖片插入網格線
- word如何提取圖片中的文字win10
- 手機拍照怎麼配文字圖片
- word圖片自己橫過來
- 圖片與文字排版
- 萊托小丑圖片配文字
- 搜集文字和圖片的職位簡稱
- 綠色帶文字的微信圖片
- 圖片聚集成文字模板
- word中圖片一鍵加水印
- word文檔圖片怎麼覆蓋整個頁面
- word圖片反面調整
- word怎麼插入圖片都為縱向
- 朋友圈圖片下面加文字
- word列印時圖片格式是空白
- word怎麼把圖片成黑白的
- word圖片顯示紅叉
- 黑洞圖片和文字