參考資料

margin auto

overflow:hidden

20200422 著手日 ~?

20200423? 進度率 也就百分之十

20200428 完了

元素結構

<div id="mainDiv"><!-- 列表上面顯示的那個中型號得到大圖 --><div class="middle"><span class="floatSpan"></span><img src="images/m1.jpg" id="imgNode"/></div><!-- 放大鏡放大時候的那個div --><div class="big"></div><!-- 左箭頭 --><span id="left"></span><!-- 右箭頭 --><span id="right"></span><!-- 下面紅框的那個列表LIST --><!-- List 中的是最小號的衣服圖片 --><!-- 帶active的是當前選中的，是有紅框的 --><div id="list"><ul><li class="active"><img src="images/s1.jpg" /></li><li><img src="images/s2.jpg" /></li><li><img src="images/s3.jpg" /></li><li><img src="images/s4.jpg" /></li><li><img src="images/s5.jpg" /></li><li><img src="images/s6.jpg" /></li><li><img src="images/s7.jpg" /></li><li><img src="images/s8.jpg" /></li><li><img src="images/s9.jpg" /></li><li><img src="images/s10.jpg" /></li></ul></div></div>

?

元素樣式

<style type="text/css">/* 初始化全部元素 */*{margin: 0;padding: 0;}/* 最外層的div *//* 相對定位，且左右居中 *//* height，background-color這兩是為了看一眼確實左右居中，調試用的 */#mainDiv{width:312px;/* height: 10px; */margin: 50px auto;position: relative;/* background-color: chocolate; */}/* 展示 列表里面被選召的孩子 那個大框 *//* 絕對定位 貼在父級的div上 *//* overflow:hidden 溢出來 溢出框的部分 選擇 */.middle{width: 310px;height: 310px;border: 1px solid #cdcdcd;left: 0;top: 0;position: absolute;overflow:hidden;}/* 大框里面的圖片屬性 */#imgNode{width: 310px;height: 310px;}/* 蟲眼鏡 那個能移動的的小框 *//* TODO 為什么是span呢 */.floatSpan{width: 100px;height: 100px;position: absolute;background:#fede4f; border:1px solid #aaa;/* 好像沒用 *//* filter:alpha(opacity:50); *//* 透明度 */opacity:0.5;/* 浮在上層 */z-index:2;/* 鼠標編程十字移動型的 */cursor:move;display:none;}/* 外面那個蟲眼鏡放大div得到屬性 *//* 絕對定位是相當于父類div(#mainDiv)的相對定位 */.big{width: 310px;height: 310px;border: 1px solid #cdcdcd;overflow: hidden;position:absolute;left: 320px;top: 0;display: none;}.big img{position:absolute;left: 0px;top: 0px;}/* 下面list開發部 */#list{width: 288px;height: 46px;overflow: hidden;position:absolute;left: 10px;top: 320px;}#list ul{position: absolute;left: opx;}#list li{list-style: none;/* 浮動以后 小圖片可以橫過來了 */float: left;padding: 4px;overflow: hidden;width: 40px;height: 40px;}#list li img{border: 1px solid #cdcdcd;}#list li.active img{border: 1px solid red;}/* 左按鈕 */#left{width: 10px;height: 45px;/* 變塊級元素了 */display: block;background: url(images/left.gif) no-repeat;position:absolute;top: 322px;left: 0px;cursor: pointer;}/* 右按鈕 */#right{width: 10px;height: 45px;/* 變塊級元素了 */display: block;background: url(images/right.gif) no-repeat;position:absolute;top: 322px;left: 300px;cursor: pointer;}</style>

1、list里面的小圖片、選中哪個圈上框?

<script type="text/javascript">// 1、list里面的小圖片、選中哪個圈上框// 選中最大的listlet imgSmallList = document.getElementById("list");// 根據list選中第一個孩子ul (imgSmallList.children)// 根據imgSmallList.children 選中ul 下面的 li// 不知道怎么選 就 打印出來 扒拉扒拉 找找 哪個是自己需要的元素let imgSmalls = imgSmallList.children[0].children;// console.log(imgSmallList);// console.log(imgSmalls[0].children);// 給middle那個div里的imglet imgNode = document.getElementById("imgNode");// 給每一個li都幫點選中的點擊事件// 不是點擊事件，是鼠標移過去事件for(let i = 0;i<imgSmalls.length;i++){// 箭頭函數的話 ， 里面那個this是 window 對象啊// imgSmalls[i].onmouseover = ()=>{// console.log(this);// };// 而普通的這種 function 的函數里面的this 是該綁定的對象自己本身imgSmalls[i].onmouseover = function(){// console.log(this);// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 設置該 activethis.className = "active";// 2、給middle那個地方的 換上相對應的 大圖// console.log(this.children[0].src);// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = this.children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = this.children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + this.children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;// 3、給big那個地方的 換上相對應的圖let strNewB = strTemp + 'b' + this.children[0].src.substr(lastIndex+1);// console.log(strNew);big.children[0].src = strNewB;};}// 左鍵點擊let leftBtn = document.getElementById("left");leftBtn.onclick = function(){// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 整個list向左方向移動五個for(let j=0;j<imgSmalls.length;j++){// imgSmalls[j].className = "";let src = imgSmalls[j].children[0].src;let lastIndex = src.lastIndexOf("s");let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");let indexNew = parseInt(index) + 6;if(indexNew > 10){indexNew -= 10;}imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";if(j== 0){imgSmalls[j].className = "active";// 2、給middle那個地方的 換上相對應的 大圖// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;}}}// 右鍵點擊let rightBtn = document.getElementById("right");rightBtn.onclick = ()=>{// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 整個list向左方向移動五個for(let j=0;j<imgSmalls.length;j++){// imgSmalls[j].className = "";let src = imgSmalls[j].children[0].src;let lastIndex = src.lastIndexOf("s");let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");let indexNew = parseInt(index) - 6;if(indexNew < 1){indexNew += 10;}imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";if(j== 0){imgSmalls[j].className = "active";// 2、給middle那個地方的 換上相對應的 大圖// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;}}}// 放大鏡效果（蟲眼鏡效果）// 鼠標移入到middle畫面的時候，middleId.onmouseover = ()=>{// 內部小黃框表示floatSpanId.style.display = "block";// 右側div表示big.style.display = "block";// 添加一個圖片元素}middleId.onmouseout = ()=>{// 內部小黃框非表示floatSpanId.style.display = "none";// 右側div非表示big.style.display = "none";}// middleId.onmousemove = function(e){ev = e || event;// console.log("middleId.onmousemove===" + ev.clientX);// floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // 實時的小黃框的坐標位置let moveX = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2);let moveY = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2);// 小黃框的最大邊界// middleId.offsetLeft，middleId.offsetTop 都是0// 因為 middleId 是絕對定位，且left，top為0~~！！？？// 所以是一樣的let moveXMax = (middleId.offsetLeft + middleId.offsetWidth) - floatSpanId.offsetWidth;let moveYMax = (middleId.offsetTop + middleId.offsetHeight) - floatSpanId.offsetHeight;// let moveXMax = middleId.offsetWidth - floatSpanId.offsetWidth;// let moveYMax = middleId.offsetHeight - floatSpanId.offsetHeight;// 三目運算// 小黃框可不出middleId邊框 - STARTmoveX = moveX < 0 ? 0 : moveX;moveX = moveX > moveXMax ? moveXMax : moveX;moveY = moveY < 0 ? 0 : moveY;moveY = moveY > moveYMax ? moveYMax : moveY;// 小黃框可不出middleId邊框 - ENDfloatSpanId.style.left = moveX + "px"; floatSpanId.style.top = moveY + "px"; // 計算big div 的坐標var maxImageHeight = big.children[0].offsetHeight - (big.offsetHeight-2)var maxImageWidth = big.children[0].offsetWidth - (big.offsetWidth-2)big.children[0].style.left = -(floatSpanId.offsetLeft/moveXMax)*maxImageWidth+'px';big.children[0].style.top = -(floatSpanId.offsetTop/moveYMax)*maxImageHeight+'px';}// 【曉踩一坑】小黃框的移動事件// 這個有個什么問題呢// 就感覺 只有鼠標在小黃框里面的時候// 才是動的// 但是在大框里面時候，拖拽小黃框的時候// 卻動不起來// 不知道是不是因為觸發了 小黃框的onmousedown 這個事件而受到了影響// floatSpanId.onmousemove = function(e){// ev = e || event;// // console.log("middleId.onmousemove===" + ev.clientX);// floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // }// 【曉踩二坑】小黃框的拽下事件// // 里面的黃色的小框的拖拽// 這個事件的綁定是不可以的// 因為 ev.clientX , ev.clientY 是不正確的// 他兩是你開始拖拽那個時間點的坐標點// 就是那個時間點的 坐標// 后來你再怎么拖拽移動的，這兩都不會發生改變// 所以 不正// floatSpanId.onmousedown = function(e){// ev = e || event;// console.log("floatSpanId.onmousedown===" + ev.clientX);// // floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // // // console.log(ev.clientX);// // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // }floatSpanId.onmouseup = function(e){}// middleId.onmousemove = function(e){// ev = e || event;// floatSpanId.style.left = ev.clientX + "px"; // // console.log(ev.clientX);// floatSpanId.style.top = ev.clientY + "px"; // }</script>

?

總結

以上是生活随笔為你收集整理的【demo】虫眼镜的制作 制作　完了　finish的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。