大家經(jīng)常逛淘寶、天貓、京東這類網(wǎng)站的時(shí)候往往會(huì)看到一些圖片展示的效果，例如：把鼠標(biāo)放在圖片上右側(cè)會(huì)出現(xiàn)一個(gè)放大的預(yù)覽區(qū)域，這就是所謂放大鏡效果。今天閑著沒(méi)事干，就打算復(fù)習(xí)一下JavaScript基礎(chǔ)，用一下基礎(chǔ)知識(shí)制作一個(gè)類似于淘寶的放大鏡效果。
先說(shuō)一下這個(gè)效果需要用到的一些基礎(chǔ)知識(shí)：
css相對(duì)定位：position：absolute；
鼠標(biāo)移入移出以及移動(dòng)事件：onmouseover、onmouseout、onmousemove，記住這些事件一般不會(huì)單個(gè)出現(xiàn)
獲取鼠標(biāo)點(diǎn)擊坐標(biāo)：X軸：clientX，Y軸：clientY
當(dāng)前元素相對(duì)于父元素的左位移：offsetLeft
當(dāng)前元素相對(duì)于父元素的上位移：offsetTop
當(dāng)前元素的實(shí)際高、寬度（不包括滾動(dòng)條）：offsetWidth、offsetHeight
球當(dāng)前元素的最小值，最大值：Math.min()、Math.max()；
話不多說(shuō)直接上代碼吧！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>放大鏡效果</title><style type="text/css">*{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;} </style></head><body><div id="demo"><div id="float-box"><div id="small-box"></div><img src="../images/macbook-small.jpg"></div><div id="big-box"><img src="../images/macbook-big.jpg"></div></div><script type="text/javascript">window.onload = function(){ //獲取到需要的元素var demo = document.getElementById('demo');var smallBbox = document.getElementById('small-box');var floatBox = document.getElementById('float-box');var bigBox = document.getElementById('big-box');var bigBoxImg = bigBox.getElementsByTagName('img')[0]; floatBox.onmouseover = function(){smallBbox.style.display = "block";bigBox.style.display = "block";}floatBox.onmouseout = function(){smallBbox.style.display = "none";bigBox.style.display = "none";}floatBox.onmousemove = function(e){var _event = e || event;console.log(_event.clientY);var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//除2是因?yàn)樽屖髽?biāo)點(diǎn)出現(xiàn)在放大遮罩的中心位置var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight/2; var demoWidth = demo.offsetWidth;var demoHeight = demo.offsetHeight; var smallBboxWidth = smallBbox.offsetWidth;var smallBboxHeight = smallBbox.offsetHeight;//鼠標(biāo)可以移動(dòng)的最大XY的距離var maxX = demoWidth - smallBboxWidth;var maxY = demoHeight - smallBboxHeight; l = Math.min(maxX,Math.max(0,l));t = Math.min(maxY,Math.max(0,t));smallBbox.style.left = l +"px";smallBbox.style.top = t +"px"; var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//求出小圖遮罩的坐標(biāo)占可移動(dòng)區(qū)域的比例var percentY = t / (floatBox.offsetHeight - smallBboxHeight); bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//大圖對(duì)的移動(dòng)方向和小圖遮罩的移動(dòng)方向相反bigBoxImg.style.top = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px"; }}</script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
