效果如淘寶、京東這些電商購物時,查看圖片的放大效果。
思路:
先把右邊的大圖和左邊小圖里面的方塊隱藏
當(dāng)鼠標(biāo)移入左邊的smallPic,顯示其里面的小方塊和右邊的bigPic
當(dāng)鼠標(biāo)移動里面的小方塊,右邊的bigPic顯示圖片對應(yīng)的位置
小方塊移動的范圍在其父級smallPic的范圍內(nèi)
當(dāng)鼠標(biāo)smallPic后,bigPic和smallPic里面的小方塊隱藏
用到的方法主要由定位、溢出隱藏、事件對象
html布局://左邊小圖CSS樣式://移動方塊//右邊大圖//路徑自行設(shè)置
#smallPic{ width:200px; height:200px; position:relative; float:left; } #smallPic img{ width:200px; height:200px; } #smallPic div{ width:80px; height:80px; position:absolute; top:0; left:0; background:yellowgreen; opacity:0.5; cursor:move; display:none; } #bigPic{ width:800px; height:800px; float:left; position:relative; display:none; overflow:hidden; } #bigPic img{ position:absolute; top:0; left:0; }js代碼
window.onload=function(){ var smallPic=document.getElementById("smallPic"); var div=document.querySelector(".smallPic div"); var bigPic=document.getElementById("bigPic"); var bigPicImg=document.querySelector(".bigPic img"); //鼠標(biāo)移入smallPic顯示div和bigPic smallPic.onmouseover=function(){ div.style.display="block"; bigPic.style.display="block"; } //當(dāng)鼠標(biāo)在smallPic里面移動時 smallPic.onmousemove=function(ev){ //設(shè)置兩個變量,該變量的值得作用是在后面使鼠標(biāo)在小方塊中間及設(shè)置相關(guān)移動范圍 var x=ev.clientX-div.offsetWidth/2-small.offsetLeft; var y=ev.clientY-div.offsetHeight/2-small.offsetTop; //判斷小方塊的移動范圍,并限制其在其父級范圍內(nèi) //x軸 if(x<0){ x=0; }else if(x>smallPic.offsetWidth-div.offsetWidth){ x=smallPic.offsetWidth-div.offsetWidth; } //y軸 if(y<0){ y=0; }else if(y>smallPic.offsetHeight-div.offsetHeight){ y=smallPic.offsetHeight-div.offsetHeight; } //小方塊移動 div.style.left=x+"px"; div.style.top=y+"px"; //設(shè)置小方塊在其父級范圍內(nèi)移動的百分比 var scaleX=x/(smallPic.offsetWidth-div.offsetWidth); var scaleY=y/(smallPic.offsetHeight-div.offsetHeight); //根據(jù)小方塊移動的百分比來移動bigPic里面的圖片的位置 bigPicImg.style.left=scaleX*(bigPicImg.offsetWidth-bigPic.offsetwidth)+"px"; bigPicImg.style.top=scaleY*(bigPicImg.offsetHeight-bigPi.offsetHeight)+"px"; } //鼠標(biāo)移出smallPic隱藏div和bigPic smallPic.onmouseout=function(){ div.style.display="none"; bigPic.style.display="none"; } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112106.html
摘要:本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的,相信很多同學(xué)們對這個并不陌生。這個看似感覺很復(fù)雜的小功能,實(shí)際上原理卻是非常的簡單,下面我們學(xué)習(xí)一下淘寶放大鏡效果是如何實(shí)現(xiàn)的。 前言 這一段時間事情挺多的,一直沒有時間寫文章。這兩天稍微閑了一些,就趁這會閑工夫?qū)懸黄恼隆1敬挝恼碌闹饕獌?nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的,相信很多同學(xué)們對這個并不陌生。這個看似感覺很復(fù)雜...
摘要:接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時背景的寬高為。然后通過移動的,來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。 前言:相信很多同學(xué)在瀏覽購物網(wǎng)站的時候都會用到過放大鏡的功能,這個功能在日常的網(wǎng)站也會經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧; (1)首先了解一下放大鏡效果的html架構(gòu):如...
摘要:接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時背景的寬高為。然后通過移動的,來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。 前言:相信很多同學(xué)在瀏覽購物網(wǎng)站的時候都會用到過放大鏡的功能,這個功能在日常的網(wǎng)站也會經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧; (1)首先了解一下放大鏡效果的html架構(gòu):如...
摘要:接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖,它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片,同時背景的寬高為。然后通過移動的,來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn),還有使用實(shí)現(xiàn)的方法。 前言:相信很多同學(xué)在瀏覽購物網(wǎng)站的時候都會用到過放大鏡的功能,這個功能在日常的網(wǎng)站也會經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧; (1)首先了解一下放大鏡效果的html架構(gòu):如...
閱讀 1368·2021-09-13 10:25
閱讀 552·2019-08-30 15:53
閱讀 2265·2019-08-30 15:44
閱讀 2026·2019-08-29 17:20
閱讀 1593·2019-08-29 16:36
閱讀 1794·2019-08-29 14:10
閱讀 1785·2019-08-29 12:44
閱讀 1165·2019-08-23 14:13