當前位置:首頁 » 網頁前端 » 前端放大鏡效果時有時無
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端放大鏡效果時有時無

發布時間: 2022-04-23 22:46:16

『壹』 放大鏡原理放大鏡離物體很近時,看到物體沒怎麼被放大

放大鏡是利用光的聚合來實現放大的,
每個放大鏡都有個焦點,物體放到焦點位置,放大的最大,離焦點位置越遠,放大效果越差,

『貳』 HTML5放大鏡效果

自己動點腦

『叄』 一個頁面引用倆次JS放大鏡的效果,為什麼只有一個可以正常實現

首先,把你寫的兩個把兩個window.onload代碼去掉;
然後按下面這樣寫:
window.onload = function() {
x = new fuckBox('fuckPun','fuck');
x2 = new zoomBox('zoomPan','zoom');
}

你還提了一個同樣的問題吧,也是這個,我幫你解決了,你還沒給我分呢!

有問題,請留言!

『肆』 用jQuery製作的放大鏡效果,為什麼放大出來的圖片在其他圖片下面,怎麼設置就顯示在上面了

嘗試將對應的css中的 z-index 設置成最大值,應該就顯示在最前面了,如設置成9999.

『伍』 HTML5中,如何為圖片製作放大鏡效果

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

這里我給出一個實現這個想法的示例。該示例實際上就是運用HTML5canvas中對畫布進行裁剪與保存畫布狀態的相關知識實現的。

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

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

<!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時放大鏡效果的消失和出現

isMagnified = false,

//init函數只要是在圖片載入時繪制出圖形

init = function() {

img.onload = function() {

//繪制原始圖片

context.drawImage(img, 0, 0);

//將圖片信息轉化為二進制信息或者URL信息存儲在dataUrl中方便後面調用

dataUrl = canvas.toDataURL();

}

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

//設置標記值

isMagnified = false;

},

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

magnify = function() {

//保存當前畫布的繪制狀態即畫布繪制原始圖片的狀態。方便我們在後面恢復到繪制原始圖片的狀態

context.save();

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

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

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

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

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

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

//保存畫布當前狀態即我們設置陰影屬性後的狀態方便後面使用

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();

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

var magnified = new Image();

magnified.src = dataUrl;

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

context.scale(1.5, 1.5);

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

//調用restore()函數將畫布狀態恢復到繪制把放大鏡把手時的狀態,即具有陰影屬性

context.restore();

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

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置畫布,將畫布恢復到繪制元素圖片的狀態,以方便繪制出放大效果後,再次點擊是繪制原始圖片。

context.restore();

//設置標記值,實現點擊後放大效果消失。

isMagnified = true;

};

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

init();

//監聽畫布的點擊事件,當點擊頁面的圖像時會根據標記的值來進行判斷是否對畫布進行方大處理

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

if (isMagnified) {

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

}

else {

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

}

});

}

</script>

<script src="jquery.js"></script>

</body>

</html>

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

『陸』 放大鏡起放大作用,那麼放大鏡看物體總是放大的嗎

放大鏡起放大作用,放大鏡看物體總是放大的。

放大鏡視角愈大,像也愈大,愈能分辨物的細節。移近物體可增大視角,但受到眼睛調焦能力的限制。使用放大鏡,令其緊靠眼睛,並把物放在它的焦點以內,成一正立虛像。放大鏡的作用是放大視角。歷史上,據說放大鏡的應用是由13世紀英國的一位主教格羅斯泰斯特提出的。

早在一千多年前,人們已把透明的水晶或透明的寶石磨成「透鏡」,這些透鏡可放大影像。也稱為凸透鏡。

(6)前端放大鏡效果時有時無擴展閱讀

放大鏡按外表分類可以分為攜帶型放大鏡和台式放大鏡,台式放大鏡就是可以固定的,下面有個底座,上面是一個放大鏡,放大鏡的形狀可以是長方形的也可以是正方形的,或者是圓形的,這樣的放大鏡主要用於長期固定看一個地方。

台式放大鏡可以的鏡臂很長,有彎曲的地方,可以根據需求隨意改變位置。

攜帶型放大鏡就像上面一樣,前面一個圓形的放大鏡後面一個手柄,攜帶型放大鏡的種類也有很多的,有的放大鏡的是正方形的,也有可以合並的放大鏡,這樣的放大鏡主要是便於系攜帶,便於觀察。攜帶型放大鏡還有帶光源的和不帶光源的,有光源的放大鏡觀看時候有很多好處,光線保持很穩定。

『柒』 在html中 放大鏡 效果 的 滑塊不動怎麼 解決

PC端添加以下meta內容即可:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
....
</head>

2. Mobile端添加以下meta內容即可:

<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
.....
</head>

說明:
target-densitydpi=device-dpi,指定屏幕像素密度DPI,device-dpi 為設備原本的DPI值,不會有任何縮放。
width=device-width,指定屏幕寬度,device-width設備屏幕的寬度。

『捌』 flash8放大鏡效果,經過時為什麼大小都出現,小字沒消失

這個,你沒設置透明度,說起來有點復雜,做起來很簡單,自己設置下透明度,補間動畫

『玖』 為什麼我做flash放大鏡的時候放大鏡不跟著滑鼠動的啊代碼正確的跟著教程做的,就是放大鏡不跟著滑鼠動

注意我已經修改

時間軸有兩層,第一層背景image,這是影片剪輯影片剪輯的代碼,影片剪輯也有兩層,第一層圖onClipEvent (enterFrame)
{ //滑鼠跟隨,就是你的放大鏡影片剪輯的坐標,跟著你滑鼠坐標移動;
//這樣代碼可以起到緩沖作用,如果直接這樣:this_x=_root_xmouse;this_y=_root_ymouxe;
這樣就沒有緩沖效果;
//哎呀,現在都用AS3了,你還用AS2,嘿嘿
movex = (_root._xmouse - this._x) / speed;
overx = overx + movex;
this._x = this._x + Math.round(overx + movex);
movey = (_root._ymouse - this._y) / speed;
overy = overy + movey;

this._y = this._y + Math.round(overy + movey);
//以下代碼作用是你的放大鏡隨著你的滑鼠移到哪裡,哪裡就出現放大效果;
//當然,也和上面一樣不是一下子就放大,也是有點緩沖
image._xscale = image._xscale + (scalex - image._xscale) / speed;
image._yscale = image._yscale + (scaley - image._yscale) / speed;
//以下代碼:當前顯示容器就是你的影片剪輯中image的X坐標=(舞台image的X坐標-放大鏡X坐標)*(當前顯示容器image的寬度/舞台image的寬度);剩下一行,就不用解釋了
//這樣做的目的是:出現放大效果時,你的放大的地方,就是該放大的地方,因為如果沒有這代碼,image放大時,它的相對坐標會移動,即放大了不該放大的地方。
image._x = (_parent.image._x - this._x) * (image._width / _parent.image._width);
image._y = (_parent.image._y - this._y) * (image._height / _parent.image._height);
}
//最後:如果你想學FLash腳步語言,那就學AS3,因為AS3相對AS2很強大。

呵呵
假如兩個image坐標都為0,0;假如放大的倍數為2.5
假如你這時放大鏡的坐標為100,100,你應該放大的地方當然也是100,100
當放大時,你的代碼image._width / _parent.image._width=2.5
影片剪輯里image的寬度和高度都放大500/200=2.5倍,
即放大後你應該放大的坐標變為100*2.5,100*2.5;但是你的放大鏡此時的坐標還是100,100
所以,你必須讓影片剪輯里image的坐標移動(-250,-250),也就是
(_parent.image._x - this._x) * (image._width / _parent.image._width)=-250
(_parent.image._y - this._y) * (image._height / _parent.image._height)=-250

嘿嘿i,這下分可以給我了吧