相信小夥伴們都逛過淘寶,天貓,京東等電商購物平台網站,裡面都有一個圖片放大鏡的效果案例。這樣的

下面就按照思路帶大家實現這個效果案例。
首先我們要知道案例的所有步驟,然後我們再用代碼把每個步驟一步一步實現。這樣就完成了整個案例。思路清晰了,代碼就好寫。下面我們就把思路一步一步理出來,便於小夥伴理解和觀看,首先圖片有兩張,一張左邊的預覽圖和右邊的大的高清圖,下面來說說思路。
- 初始的時候,藍色蒙版和右邊放大圖片區域是隱藏狀態。
- 滑鼠移入左邊圖片區域,藍色蒙版和放大區域圖片顯示。
- 滑鼠移出左邊圖片區域,藍色蒙版和放大區域圖片隱藏。
- 滑鼠在左邊圖片區域移動時,藍色蒙版跟著滑鼠移動。
- 右邊放大區域圖片跟著藍色蒙版的移動(也就是改變右邊圖片的position位置)。
下面開始頁面布局以及css樣式。
HTML結構:

CSS樣式:

js部分:

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/211468.html
微信掃一掃
支付寶掃一掃