jQuery是一種可以幫助我們快速調整網頁元素大小的JavaScript庫。其中之一的應用就是可以調整放大鏡大小,通過以下代碼實現:
$('#zoomIn').click(function(){ var currentZoom = $("#zoomBox").width(); $("#zoomBox").width(currentZoom * 1.2); }); $('#zoomOut').click(function(){ var currentZoom = $("#zoomBox").width(); $("#zoomBox").width(currentZoom / 1.2); });
首先,我們給兩個按鈕綁定click事件,分別定義了id為zoomIn和zoomOut。然后在每個click事件中,我們定義了一個currentZoom變量來獲取元素的當前寬度,然后使用jQuery的width()方法來設置新的寬度,我們使用1.2和1.2的倒數來放大或縮小元素。在這段代碼中,我們使用了#zoomBox選擇器,因此我們要確保我們的放大鏡容器的ID是“zoomBox”。
如果您想要調整其他元素的大小,只需要更改選擇器并使用相應的更改大小比率即可。如此簡單!