欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Js獲取圖片原始寬高的實現(xiàn)代碼

 更新時間：2016年05月17日 16:00:29   投稿：jingxian  
下面小編就為大家?guī)硪黄狫s獲取圖片原始寬高的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧

如果我們頁面看到的圖片都是縮略圖，那就需要做個圖片點擊放大效果，那么怎樣獲取圖片的原始寬高呢？方法如下：

//獲取圖片原始寬度
function getNaturalWidthAndHeight(img) {
var image = new Image();
image.src = img.src;
return [image.width,image.height];
}

//點擊縮略圖彈出層，顯示原始圖片。

//獲取class為tz_main_box下的所有p標簽下的圖片img
$(".tz_main_box p>img").each(function (k, v) {
$(this).unbind("click"); //解除綁定，防止彈出多次圖片層。
$(this).click(function () {
var img = v; //圖片對象
var imgArea = getNaturalWidthAndHeight(img);
var layerWidth = imgArea[0]+ 5;
if (layerWidth > 1080) {
layerWidth = 1080; 
}
var layerHeight = imgArea[1] + 5;
if (layerHeight > 600) {
layerHeight = 600;
}

//layer彈出層插件
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: [''+layerWidth+'px', '' + layerHeight + 'px'],
skin: 'layui-layer-nobg', //沒有背景色
shadeClose: true,
closeBtn: 1, //顯示關閉按鈕
content: "<center><img src='" + $(this).attr("src") + "'></center>"
});
});
});

以上這篇Js獲取圖片原始寬高的實現(xiàn)代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • JS正則表達式之非捕獲分組用法實例分析

    JS正則表達式之非捕獲分組用法實例分析

    這篇文章主要介紹了JS正則表達式之非捕獲分組用法,結合實例形式詳細分析了正則表達式中非捕獲分組的概念、功能、使用方法與相關注意事項,需要的朋友可以參考下
    2016-12-12
  • JavaScript實現(xiàn)PC端四格密碼輸入框功能

    JavaScript實現(xiàn)PC端四格密碼輸入框功能

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)PC端四格密碼輸入框功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-02-02
  • 編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]

    編寫跨瀏覽器的javascript代碼必備[js多瀏覽器兼容寫法]

    下面比較了幾種瀏覽器之間的差異，在寫javascript代碼時 要時刻注意這些差異
    2008-10-10
  • JavaScript中for與forEach分別如何跳出循環(huán)

    JavaScript中for與forEach分別如何跳出循環(huán)

    forEach的優(yōu)勢一個是它的回調函數(shù)形成了一個作用域,它的curItem和i不會像for循環(huán)一樣污染全局變量,這篇文章主要給大家介紹了關于JavaScript中for與forEach分別如何跳出循環(huán)的相關資料,需要的朋友可以參考下
    2024-01-01
  • 如何在JavaScript中運行.NET?Core代碼詳情

    如何在JavaScript中運行.NET?Core代碼詳情

    這篇文章主要介紹了在JavaScript中運行.NET?Core代碼詳情，DotNetJS可以將C#項目編譯為與任何環(huán)境兼容的單文件JavaScript庫，變可以在JavaScript中運行.NET?Core代碼，相關操作分享詳情，需要的小伙伴可以參考一下
    2022-04-04
  • JavaScript 讀取圖片實例代碼

    JavaScript 讀取圖片實例代碼

    本章主要介紹通過JavaScript讀取圖片的例子，本例子不包含服務器端后臺代碼，只包含前臺頁面代碼，所以直接用Html文件就可以，代碼如下，因為包含詳細的注意，所以不再詳細說明了，如果有看不明白的，可以給我留言，我給大家具體答復。
    2009-11-11
  • js回調函數(shù)仿360開機

    js回調函數(shù)仿360開機

    這篇文章主要為大家詳細介紹了js回調函數(shù)仿360開機，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • JS去除iframe滾動條的方法

    JS去除iframe滾動條的方法

    這篇文章主要介紹了JS去除iframe滾動條的方法,涉及javascript操作iframe中屬性的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • 5秒后跳轉效果(setInterval/SetTimeOut)

    5秒后跳轉效果(setInterval/SetTimeOut)

    實現(xiàn)5秒后自動跳轉效果有兩種方式setInterval與SetTimeOut，具體實現(xiàn)如下，感興趣的朋友可以參考下
    2013-05-05
  • json對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法

    json對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨son對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論