導航:首頁 > 文字圖片 > jquery圖片顯示文字

jquery圖片顯示文字

發布時間:2023-03-17 20:40:27

① jquery怎麼實現把一段帶圖片的文本里的圖片替換成其他文字

圖片的html信息是給定的還是從內容中截取的?給定的話簡單點,截取的話估計還要增則表達式過濾,很麻煩的。
樓上的方法很不錯。
1.js取到html信息圖片節點--IMG
2.然後 remove 整個IMG節點
3.添加新的節點 比如p
4..html內容

② 網頁實現點擊圖片後圖片消失顯示文字

給你實現思路:

撲克翻頁效果的原理在於利用眼睛觀察物體的錯覺,撲克翻頁效果分解為兩個步驟:

  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

③ 一段滑鼠經過文字顯示圖片的jquery代碼

我看了代碼,css和js都有點小問題,我簡單改了一下

css問題。

.pcdownp.show{display:block;}

上面那段代碼比原來的p.show優先順序高,所以沒效果。

js是下面這么改,這么改js,上面的css可以不用,js直接就控制隱藏和顯示。

$(function(){
$('.pcdownli').mouseover(function(){
$(this).siblings().find('p').hide();
$(this).find('p').show();
});
});

先把所有的p隱藏,然後顯示當前的。就行了。測試有效

閱讀全文

與jquery圖片顯示文字相關的資料

熱點內容
人民手抄報圖片大全簡單漂亮 瀏覽:848
word2張圖片疊在一起 瀏覽:72
修發際線女生圖片 瀏覽:403
圖片內容掃描成文字 瀏覽:353
撤回可愛圖片 瀏覽:25
頹廢孤獨圖片男生 瀏覽:527
令對方看了心疼的文字控圖片 瀏覽:489
微信如何永久刪除圖片 瀏覽:536
衣服名稱圖片 瀏覽:247
華為手機如何將圖片轉成文件 瀏覽:244
word純圖片排版布局 瀏覽:467
女生拿劍圖片古風動漫 瀏覽:281
非誠勿擾文字動態圖片 瀏覽:340
如何分辨黑眼圈圖片 瀏覽:230
動漫女孩子笑著哭泣的圖片 瀏覽:481
最小的汽車圖片價格 瀏覽:186
畫圖片簡單 瀏覽:267
微信圖片喝酒文字圖片 瀏覽:386
162男生圖片 瀏覽:52
短發側顏動漫女孩圖片 瀏覽:920