這篇文章給大家分享的是有關(guān)原生js如何實現(xiàn)淘寶放大鏡效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括如東網(wǎng)站建設(shè)、
如東網(wǎng)站制作、如東網(wǎng)頁制作以及如東網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，
如東網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到如東省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！js有什么特點
1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運(yùn)行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。
先說一下這個效果需要用到的一些基礎(chǔ)知識：
css相對定位：position：absolute；
鼠標(biāo)移入移出以及移動事件：onmouseover、onmouseout、onmousemove，記住這些事件一般不會單個出現(xiàn)
獲取鼠標(biāo)點擊坐標(biāo)：X軸：clientX，Y軸：clientY
當(dāng)前元素相對于父元素的左位移：offsetLeft
當(dāng)前元素相對于父元素的上位移：offsetTop
當(dāng)前元素的實際高、寬度（不包括滾動條）：offsetWidth、offsetHeight
球當(dāng)前元素的最小值，大值：Math.min()、Math.max()；
話不多說直接上代碼吧！
放大鏡效果
*{
padding: 0;
margin: 0;
}
#demo{
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#float-box{
position: relative;
z-index: 1;
}
#small-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#big-box{
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
#big-box img{
position: absolute;
z-index: 5;
}
重慶分公司
重慶分公司