1. 首頁 > 生活 > >

js 點擊圖片放大 js 放大圖片

小知識js 放大圖片



文章插圖
js 點擊圖片放大 js 放大圖片

文章插圖
相信小伙伴們都逛過淘寶 ， 天貓 ， 京東等電商購物平臺網站 ， 里面都有一個圖片放大鏡的效果案例 。這樣的
下面就按照思路帶大家實現這個效果案例 。
首先我們要知道案例的所有步驟 ， 然后我們再用代碼把每個步驟一步一步實現 。這樣就完成了整個案例 。思路清晰了 ， 代碼就好寫 。下面我們就把思路一步一步理出來 ， 便于小伙伴理解和觀看 ， 首先圖片有兩張 ， 一張左邊的預覽圖和右邊的大的高清圖 ， 下面來說說思路 。
初始的時候 ， 藍色蒙版和右邊放大圖片區域是隱藏狀態 。鼠標移入左邊圖片區域 ， 藍色蒙版和放大區域圖片顯示 。鼠標移出左邊圖片區域 ， 藍色蒙版和放大區域圖片隱藏 。鼠標在左邊圖片區域移動時 ， 藍色蒙版跟著鼠標移動 。右邊放大區域圖片跟著藍色蒙版的移動（也就是改變右邊圖片的position位置） 。
下面開始頁面布局以及css樣式 。
HTML結構：
CSS樣式：
【js 點擊圖片放大 js 放大圖片】js部分：