導航:首頁 > 文字圖片 > 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圖片顯示文字相關的資料

熱點內容
動漫山地車圖片 瀏覽:835
魚簡單圖片簡筆畫大全圖片大全 瀏覽:152
小孩秋天衣服圖片 瀏覽:327
表盤壁紙高清圖片大全炫酷 瀏覽:29
高清可愛圖片無水印 瀏覽:913
陽光男生站立圖片 瀏覽:497
遇到一個有好感的人文字圖片 瀏覽:755
拖布池圖片和價格 瀏覽:409
男兒童可愛簡筆畫大全圖片 瀏覽:775
word中的文字和圖片如何並成一頁 瀏覽:692
思維導圖圖片簡單漂亮 瀏覽:647
如何將cr3圖片轉換為jpeg 瀏覽:224
超短發戴眼鏡女生圖片 瀏覽:520
word如何使圖片作為整個頁面 瀏覽:412
怎麼發微信朋友圈中的九宮格圖片 瀏覽:767
動漫短發頭像女生頭像圖片 瀏覽:891
車頂拍攝高清圖片 瀏覽:339
初中男生什麼頭銜好看圖片 瀏覽:769
ios14怎麼改圖標圖片 瀏覽:669
中式仿古大門圖片大全 瀏覽:808