溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Wadda：基于 HTML5 Canvas 的圖片放大鏡

發(fā)布時(shí)間：2020-06-25 01:29:11 來源：網(wǎng)絡(luò) 閱讀：340 作者：山邊小溪 欄目：移動開發(fā)

簡介　　

　　Wadda 是下一代圖片放大技術(shù)，使用 HTML5 Canvas 實(shí)現(xiàn)圖片放大鏡功能。借助 HTML5 Canvas 標(biāo)簽，能夠自定義放大級別而不需要為每個(gè)級別定義圖片，還能夠設(shè)置羽化（Fading）效果。

 

Wadda：基于 HTML5 Canvas 的圖片放大鏡

 

使用方法

使用非常簡單，只需在img標(biāo)簽的title屬性中設(shè)置放大圖片的路徑，例如：

<img src=”foo.jpg” id=”thumb” title=”foo_hd.jpg” />

引入Wadda.js文件，并添加如下代碼：

var wad = new Wadda(’thumb’, {
        lensSize: 150,
        xOff: 0,
        yOff: 0,
        fadeLens: true,
        zoom: 2
    });

演示和下載

下面是在線演示頁面和下載鏈接：

演示：Demo 1  Demo 2
下載：Download Files

 

您可能還喜歡

 

  • 分享5個(gè)有趣的 JavaScript 代碼片段
  • RoboVoice.com：讓你的網(wǎng)頁會說話
  • 8個(gè)超棒的免費(fèi)高質(zhì)量圖標(biāo)搜索引擎
  • 分享45個(gè)海量免費(fèi)電子書下載網(wǎng)站
  • 推薦一個(gè)很棒的免費(fèi)自助建站工具

 

本文鏈接：Wadda：基于HTML5 Canvas的圖片放大鏡

編譯來源：夢想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁設(shè)計(jì)資源

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手