HTML5中，如何為圖片制作放大鏡效果？

制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對canvas進行局部裁剪最后對裁剪的部分進行放大，這樣就可以實現(xiàn)放大鏡的效果。

網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了衛(wèi)濱免費建站歡迎大家使用！

這里我給出一個實現(xiàn)這個想法的示例。該示例實際上就是運用HTML5?canvas中對畫布進行裁剪與保存畫布狀態(tài)的相關知識實現(xiàn)的。

上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？

下面我們來看下示例代碼：在這個示例中當你點擊圖片時圖片就會出現(xiàn)上圖效果，再一次點擊時就變成原始圖片了。

!DOCTYPE html

html

head

meta charset="utf-8"

title放大鏡/title

!—HTML代碼設計：一個簡單的canvas元素--

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的瀏覽器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//獲取canvas對象以及圖片對象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//設置一個標記，該標記的作用是控制我們點擊canvas時放大鏡效果的消失和出現(xiàn)

isMagnified = false,

//init函數(shù)只要是在圖片加載時繪制出圖形

init = function() {

img.onload = function() {

//繪制原始圖片

context.drawImage(img, 0, 0);

//將圖片信息轉(zhuǎn)化為二進制信息或者URL信息存儲在dataUrl中方便后面調(diào)用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//設置標記值

isMagnified = false;

},

//magnify函數(shù)的作用是繪制具有放大鏡效果的圖形

magnify = function() {

//保存當前畫布的繪制狀態(tài)即畫布繪制原始圖片的狀態(tài)。方便我們在后面恢復到繪制原始圖片的狀態(tài)

context.save();

//因為放大鏡的圓圈和把手是通過canvas繪制的這里設置了一些繪制把手和圓圈的樣式屬性。

context.lineWidth = 10;//?線條寬度

context.shadowColor = '#000';//?陰影的顏色黑色

context.shadowBlur = 15;//?模糊級別為15

context.shadowOffsetX = 5;//?形狀與陰影的水平距離5

context.shadowOffsetY = 5;//?形狀與陰影的垂直距離5

//保存畫布當前狀態(tài)即我們設置陰影屬性后的狀態(tài)方便后面使用

context.save();

//繪制出放大鏡把手的圖形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//對圖片進行裁剪，裁剪出的圖形是一個圓形。

context.beginPath();

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.clip();

//創(chuàng)建一個新的Image對象，這個Image對象的圖片資源是前面存儲在dataUrl中的圖片資源。所以這個Image對象和之前初始化的Image對象是完全一樣的。

var magnified = new Image();

magnified.src = dataUrl;

//對Image對象進行放大1.5倍，并進行繪制。注意此時的畫布狀態(tài)時裁剪為一個圓形的狀態(tài)，所以這里繪制的也僅僅是圖片中的一個圓形區(qū)域。這里為了繪制出圖片中娃娃的臉設置了繪制的圖片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//調(diào)用restore()函數(shù)將畫布狀態(tài)恢復到繪制把放大鏡把手時的狀態(tài)，即具有陰影屬性

context.restore();

//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來圖片的邊框。這樣剛剛裁剪出來的圓形圖形就會正好處于放大鏡的圓圈中。

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置畫布，將畫布恢復到繪制元素圖片的狀態(tài)，以方便繪制出放大效果后，再次點擊是繪制原始圖片。

context.restore()；

//設置標記值，實現(xiàn)點擊后放大效果消失。

isMagnified = true;

};

//加載初始化代碼，即當運行頁面時會在頁面繪制出一個原始圖像

init();

//監(jiān)聽畫布的點擊事件，當點擊頁面的圖像時會根據(jù)標記的值來進行判斷是否對畫布進行方大處理

$('canvas').click(function() {

if (isMagnified) {

init();//繪制原始圖像

}

else {

magnify();//繪制放大的圖像

}

});

}

/script

script src="jquery.js"/script

/body

/html

對于這些知識在一個叫秒秒學的教程網(wǎng)站上有相關的學習資料，有興趣的可以自己去看看，希望對你有幫助。

html5多點觸屏圖片放大、縮小、移動、旋轉(zhuǎn) 怎么實現(xiàn)？

touchmove這個方法

然后用e.touches[0],e.touches[1]... 來判斷不同的點,自己寫點小算法就搞定了

html5 鼠標放在下面的圖片時，會放大到中間就像圖片呢樣。求代碼

!DOCTYPE html

html

head

meta charset="utf-8" /

script type="text/javascript" src="jquery-1.7.2.min.js"/script

style type="text/css"

*{

margin: 0;

padding: 0;

}

.hbody{

margin-left: 25%;

}

.show{

margin-left: 160px;

width: 200px;

height: 200px;

border: 1px solid #EEEEEE;

}

.show img{

width: 200px;

height: 200px;

}

.tab{

border: 1px solid #eee;

width: 535px;

height:100px ;

}

.tab img{

border: 1px solid #eee;

width: 100px;

height: 100px;

cursor: pointer;

}

/style

/head

body

div class="hbody"

div class="show"

img /

/div

div class="tab"

img src="1.jpg" /

img src="2.jpg" /

img src="3.jpg" /

img src="4.jpg" /

img src="5.jpg" /

/div

/div

/body

script

$(function(){

var Src = $('.tab').find('img').eq(0).attr('src');

$('.show').find('img').attr('src',Src)

})

$('.tab').find('img').mouseover(function(){

var inx = $(this).index();

var Imgsrc = $('.tab').find('img').eq(inx).attr('src');

$('.show').find('img').attr('src',Imgsrc)

})

/script

/html

引一個jquery文件，圖片地址替換一下就可以了

HTML5鼠標放上去圖片變大怎么寫

看完下面的代碼你就明白了，稍作刪改就是你要的效果

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titlejQuery心型圖片墻鼠標懸浮變大/title

style type="text/css"

*{padding:0; margin:0;}

ul,li{list-style:none;}

body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}

.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}

.heartPic ul{float:left;width:749px;}

.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}

.heartPic ul li.on{z-index:99;}

.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}

.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}

.heartPic .showDiv{display:block;}

/style

/head

body

div class="heartPic"

ul

li/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" /

p class="pTxt"可愛的女娃娃/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" /

p class="pTxt"呆萌的小熊/p

/div

/li

li/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" /

p class="pTxt"卡哇伊的小熊/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" /

p class="pTxt"女巫騎著掃帚/p

/div

/li

li/li

/ul

ul

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" /

p class="pTxt"女娃娃/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" /

p class="pTxt"星星可愛/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" /

p class="pTxt"呆萌女/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" /

p class="pTxt"狗狗/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" /

p class="pTxt"綠樹/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" /

p class="pTxt"粉愛粉愛的/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" /

p class="pTxt"蠟筆小新/p

/div

/li

/ul

ul

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" /

p class="pTxt"震不碎的心/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" /

p class="pTxt"很有意境/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" /

p class="pTxt"櫻木花道最愛啊/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" /

p class="pTxt"倆骷髏/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" /

p class="pTxt"萌妹子/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" /

p class="pTxt"可愛的小狗/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" /

p class="pTxt"夫婦倆白頭偕老/p

/div

/li

/ul

ul

li/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" /

p class="pTxt"刷子/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" /

p class="pTxt"偶的頭像/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" /

p class="pTxt"樹葉子/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" /

p class="pTxt"星星/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" /

p class="pTxt"淺色哦/p

/div

/li

li/li

/ul

ul

li/li

li/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" /

p class="pTxt"太陽帥哥/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" /

p class="pTxt"大笑臉/p

/div

/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" /

p class="pTxt"企鵝/p

/div

/li

li/li

li/li

/ul

ul

li/li

li/li

li/li

li

div class="in"

img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" /

p class="pTxt"小兔子/p

/div

/li

li/li

li/li

li/li

/ul

/div

script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/script

script type="text/javascript"

$(function(){

$(".heartPic li").hover(function(){

$(this).addClass("on");

$(this).find("img").animate({"width":"200px","height":"200px"});

$(this).find("div").animate({"width":"200px","height":"200px"});

$(this).find(".pTxt").animate({"width":"200px","height":"20px"});

$(this).find("p").addClass("showDiv");

},function(){

$(this).animate({height:"100px"},100).removeClass("on");

$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});

$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});

$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});

});

})

/script

div style="text-align:center;clear:both"

/div

/body

/html

HTML5實現(xiàn)圖片拖動，旋轉(zhuǎn)，放大，拉伸等特效后保存效果

可以設置cookie（可以加載一個cookie.min.js，使用起來非常方便）。就是當?shù)谝淮芜M入頁面的時候，先去讀取該cookie，如果存在，說明之前已經(jīng)做了更改，把cookie值稍作處理就可以完成初始化了（記得當初始化完成后刪除該cookie），如果cookie不存在說明還沒有做過更改。

我用html5 做了個手機網(wǎng)站 如何讓圖片本身100%放大

html5頁面加入這段

meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/

maximum-scale=2 表示頁面最大放大2倍，這樣你只要雙擊圖片就可以實現(xiàn)放大了，如果是要js來實現(xiàn)的話 那就得寫拖動插件了。 原理：先改變圖片那個div的寬度為2倍然后定義那個div為絕對定位，這個div可以拖動（需要js來監(jiān)聽處理對應的函數(shù)）

所以簡單的做還是就用瀏覽器自帶的放大功能吧

當前標題：html5放大圖片,html背景圖片放大
本文路徑：http://www.rwnh.cn/article44/dscoihe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、、用戶體驗、自適應網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)