h5圖片用js顯示,h5支持的圖片格式

本文目錄一覽：

• 1、我想把一個圖片代碼寫到js了裡面，然後調用這個js，就可以直接顯示圖片在網頁上，怎麼寫？
• 2、javascript點擊查看圖片，彈框顯示圖片，怎麼用js怎麼實現？
• 3、怎麼把獲取到的圖片顯示出來，js怎麼寫
• 4、如何用JS實現，單擊圖片，在新的頁顯示圖片
• 5、在html中怎麼用js實現滑鼠指向圖片時圖片放大的效果？（具體實現）
• 6、怎樣讓h5的圖片在下面顯示出來

我想把一個圖片代碼寫到js了裡面，然後調用這個js，就可以直接顯示圖片在網頁上，怎麼寫？

這個實現一般有兩用方式

1.用js定義一個字元串變數，把圖片的字元串寫進去，然後div.innerhtml把這個字元串加進去。

2.用類似jquery的js插件，也是先定義圖片字元串變數，然後div.append這個字元串就好了。

javascript點擊查看圖片，彈框顯示圖片，怎麼用js怎麼實現？

最好用插件，去layer官網有專門的點擊圖片，彈出瀏覽還支持多個圖片。

先去官網下載layer包，你的網頁引用layer的js文件。

地址：網頁鏈接 點擊相冊層

然後js代碼：

//調用示例

layer.ready(function(){ //為了layer.ext.js載入完畢再執行

var ps=$(“#psize”).val();

layer.photos({

photos: ‘#layer-photos-demo’

,shift: ps //0-6的選擇，指定彈出圖片動畫類型，默認隨機

});

});

html代碼：

div id=”layer-photos-demo” class=”layer-photos-demo”

img layer-pid=”圖片id，可以不寫” layer-src=”縮略圖片地址” src=”圖片地址” alt=”” style=”height: 140px;width: 120px;border:1px solid #bbb;”

/div

怎麼把獲取到的圖片顯示出來，js怎麼寫

很顯然從後端返回的是一個圖片路徑，那麼你要做的就是把這個路徑塞進img的src裡面，如：img src=”路徑”/

實現步驟：1.先在html裡面定義一個img標籤img src=””/

2.一般情況下圖片地址是一個變數，也就是說首先將後端返回的地址保存在一個變數中，如：var imgsrc = res.data.otherImg;(根據介面實際情況獲取，我這裡只是舉例)

2.通過js把地址塞進img裡面，如： $(‘img’).attr(‘src’, imgsrc);

這樣就能把圖片渲染出來了。

如何用JS實現，單擊圖片，在新的頁顯示圖片

img src=”” onclick=”window.open(this.src,’_blank’)”/

onclick 點擊圖片事件

window.open(”,”) 打開一個新網頁 第一個參數是網址 第二個是打開方式

window.open(this.src,’_blank’) 以該圖片的路徑為網址，以新頁的方式打開

在html中怎麼用js實現滑鼠指向圖片時圖片放大的效果？（具體實現）

分別寫一個onmouseover和onmouseout事件。然後在事件裡面加一個function，分別寫想要放大的尺寸和縮小或復原的尺寸。

具體代碼實現如下：

img id=”img” onmouseover=”bigger()” onmouseout=”smaller()” src=”你的圖片路徑” style=”width:100px;height:100px;” /

script type=”text/javascript”

var img = document.getElementById(‘img’);

function bigger(){

 img.style.width = ‘400px’;

 img.style.height = ‘400px’;

}

function smaller(){

 img.style.width = ‘100px’;

 img.style.height = ‘100px’;

}

/script

擴展資料：

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。

參考資料：

JavaScript官方API介面-GlobalEventHandlers.onmouseover

JavaScript官方API介面-GlobalEventHandlers.onmouseout

W3cSchool-JavaScript 事件參考手冊

怎樣讓h5的圖片在下面顯示出來

1、首先在test.html文件內，在p標籤，使用img標籤創建一個圖片，並設置圖片的id為myimg，主要用於下面通過該id獲得img對象，在test.html文件內，設置img標籤的css樣式，將display設置為none，從而實現圖片隱藏不顯示。

2、其次在test.html文件中，給button按鈕綁定onclick點擊事件，當按鈕被點擊時，執行disimg（）函數，在js標籤中，創建disimg（）函數，在函數內，通過id（myimg）獲得img對象，使用fadeIn（）方法讓圖片逐漸顯示出來，例如，設置圖片在5秒內逐漸顯示出來。

3、最後在瀏覽器打開test.html文件，點擊按鈕，查看實現的效果。