第十一周第二天筆記之照片墻實(shí)例

1 照片墻實(shí)例

  • 需求:圖片可拖拽,當(dāng)拖拽的圖片與其他圖片重合時(shí),當(dāng)鼠標(biāo)抬起事件發(fā)生時(shí),與重合最多的進(jìn)行位置互換,如果沒(méi)有重合圖片就回到原來(lái)位置,當(dāng)點(diǎn)擊圖片拖拽時(shí),圖片的邊框?yàn)辄S色,在拖拽過(guò)程中,如重合最多的圖片的邊框也變成黃色,當(dāng)鼠標(biāo)抬起后,兩張圖片進(jìn)行位置互換,互換完成后邊框恢復(fù)原來(lái)顏色;
  • 思路:
    • 頁(yè)面布局,浮動(dòng)布局,添加margin間距;
    • 如果需要拖拽,圖片的布局必須是定位布局,所以需要將浮動(dòng)布局轉(zhuǎn)化為定位布局;
    • 遍歷圖片,添加拖拽功能,利用在拖拽中的接口來(lái)增加功能,進(jìn)行綁定執(zhí)行;
    • 在mousedown事件中設(shè)置的接口行為是myDragDown,給其綁定行為方法,當(dāng)鼠標(biāo)按下時(shí),將該圖片的層級(jí)提高,浮在所有圖片之上;
    • 在mousemove事件中設(shè)置的接口行為是myDragMove,給其綁定行為方法,當(dāng)鼠標(biāo)移動(dòng)時(shí),判斷跟哪個(gè)圖片進(jìn)行碰撞,如果碰撞了就放入ary數(shù)組中,然后對(duì)數(shù)組進(jìn)行一系列的操作;
    • 通過(guò)公式計(jì)算出斜邊的距離,賦值在圖片的自定義屬性上,距離越短,證明重合越多,所以需要對(duì)ary數(shù)組中的每一項(xiàng)身上的自定義屬性值進(jìn)行排序,然后取最小的,對(duì)其進(jìn)行操作;將其邊框變?yōu)辄S色;
    • 在mouseup事件中設(shè)置的接口行為時(shí)myDragUp,給其綁定行為方法,當(dāng)鼠標(biāo)抬起時(shí),讓兩個(gè)圖片進(jìn)行為值互換;然后互換完,將其邊框恢復(fù)原色;
  • 知識(shí)點(diǎn):
    • 定位布局:定位元素的盒子模型(包括margin)相對(duì)于定位父級(jí)元素的內(nèi)邊框邊緣進(jìn)行定位;
    • 定位元素的offsetLeft是元素的外邊框到定位父級(jí)內(nèi)邊框邊緣的距離;而添加定位的left值,是元素包含margin的整體相對(duì)于定位父級(jí)的內(nèi)邊框邊緣的距離;
    • 判斷兩個(gè)圖片是否碰撞重合:判斷四個(gè)邊的位置比較,返回值為布爾值;
  • 注意點(diǎn):
    • 圖片的定位都是相對(duì)于外容器wrap定位;
    • 浮動(dòng)布局轉(zhuǎn)化為定位布局時(shí),注意margin的影響;需要將圖片的margin值賦為0;
    • 浮動(dòng)布局轉(zhuǎn)化為定位布局時(shí),需要先獲取位置值,在設(shè)置定位,遍歷圖片時(shí),需要從最后一個(gè)開(kāi)始轉(zhuǎn)化,不然會(huì)出現(xiàn)覆蓋問(wèn)題;
    • short的值問(wèn)題,short必須設(shè)置為全局變量,這樣在不同的函數(shù)中才能獲取short值;
    • ary數(shù)組為空的時(shí)候,代表沒(méi)有重合的圖片,則讓其回到原來(lái)位置,但需要注意的是,sort在不斷被重新賦值,所以在按下事件中,一定要給short賦值為null;如果數(shù)組為空時(shí),也讓short為null;
    • 在交換的函數(shù)swapPos中,判斷short是否存在,如果存在就互換位置值,設(shè)置位置值;如果不存在,則讓圖片回到原來(lái)位置;
  • 代碼:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>照片墻實(shí)例</title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             .wrap{
                 width: 792px;
                 height: 462px;
                 margin: 30px auto;
                 background-color: lightskyblue;
                 padding: 10px;
                 position: relative;
             }
             .wrap img{
                 float: left;
                 width: 250px;
                 height: 140px;
                 margin: 5px;
                 border: 2px solid lightcoral;
             }
         </style>
     </head>
     <body>
     <div class="wrap" id="wrap">
         <img src="img/1.jpg" alt="">
         <img src="img/2.jpg" alt="">
         <img src="img/3.jpg" alt="">
         <img src="img/4.jpg" alt="">
         <img src="img/5.jpg" alt="">
         <img src="img/6.jpg" alt="">
         <img src="img/7.jpg" alt="">
         <img src="img/8.jpg" alt="">
         <img src="img/9.jpg" alt="">
     </div>
     <script src="JS/00utils.js"></script>
     <script src="JS/01Event.js"></script>
     <script src="JS/02Animate.js"></script>
     <script src="JS/04Drag.js"></script>
     <script>
         var oWrap=document.getElementById("wrap");
         var aImg=oWrap.getElementsByTagName("img");
         var zIndex=0;
         var short=null;
         for(var i=aImg.length-1; i>=0; i--){
             //拖拽必須為定位布局,即將浮動(dòng)布局轉(zhuǎn)化為定位布局
             var cur=aImg[i];
             cur.style.left=(cur.l=cur.offsetLeft)+"px";//將位置保存在自己的私有屬性上
             cur.style.top=(cur.t=cur.offsetTop)+"px";
             cur.style.position="absolute";//先獲取位置,后設(shè)置定位;
             cur.style.margin=0;
             new Drag({ele:cur}).on("myDragDown",increaseZIndex).on("myDragMove",Collision).on("myDragUp",swapPos);//鏈?zhǔn)讲僮?     }
         //按下時(shí),提高層級(jí)
         function increaseZIndex() {
             short=null;
             this.ele.style.borderColor="yellow";
             this.ele.style.zIndex=++zIndex;
         }
         //比較兩個(gè)圖片是否碰撞,返回布爾值
         function isCollision(img1,img2) {
             if((img1.offsetLeft+img1.offsetWidth<img2.offsetLeft) || (img1.offsetTop+img1.offsetHeight<img2.offsetTop) || (img1.offsetLeft>img2.offsetLeft+img2.offsetWidth) || (img1.offsetTop>img2.offsetTop+img2.offsetHeight)){
                 //四種情況只要有一種情況成立,就代表沒(méi)有碰到
                 return false;
             }else{
                 return true;
             }
         }
         //移動(dòng)過(guò)程中的判斷
         function Collision() {
             //此時(shí)this為實(shí)例對(duì)象,this.ele為當(dāng)前移動(dòng)的元素,與其他的所有圖片進(jìn)行比較
             var ary=[];
             for(var i=0; i<aImg.length; i++){
                 if(aImg[i]===this.ele) continue;//如果為移動(dòng)圖片本身就跳過(guò)此次循環(huán);
                 if(isCollision(this.ele,aImg[i])){
                     ary.push(aImg[i]);
                 }
             }
             if(ary.length){
                 for(var i=0; i<ary.length; i++){
                     //將計(jì)算的值放在每個(gè)圖片自定義屬性身上
                     ary[i].dis=Math.sqrt(Math.pow(this.ele.offsetLeft-ary[i].offsetLeft,2)+Math.pow(this.ele.offsetTop-ary[i].offsetTop,2));
                 }
                 //對(duì)計(jì)算的值進(jìn)行排序,取最短的
                 ary.sort(function (a, b) {
                     return a.dis-b.dis;
                 });
                 short=ary[0];
                 short.style.borderColor="yellow";
                 for(var i=1; i<ary.length; i++){
                     ary[i].style.borderColor="lightcoral";
                 }
             }else{//如果ary為空,則將short賦值為空;
                 if(short){short.style.borderColor="lightcoral";}
                 short=null;
             }
         }
         function swapPos() {
             //互換位置,即讓兩個(gè)圖片身上的自定義屬性值互換,然后各自設(shè)置各自身上的值;
             if(short){//當(dāng)short存在的時(shí)候讓位置互換,不存在即為null則讓其回原來(lái)位置;
                 var tmp={};
                 tmp.l=this.ele.l;
                 tmp.t=this.ele.t;
                 this.ele.l=short.l;
                 this.ele.t=short.t;
                 short.l=tmp.l;
                 short.t=tmp.t;
                 /*animate({
                     ele:this.ele,
                     target:{
                         left:this.ele.l,
                         top:this.ele.t,
                     },
                     duration: 500,
                     effect: 2
                 });*/
                 short.style.zIndex=++zIndex;
                 this.ele.style.zIndex=++zIndex;
                 animate({
                     ele:short,
                     target:{
                         left:short.l,
                         top:short.t,
                     },
                     duration: 500,
                     effect: 2,
                     callback:function () {
                         this.style.borderColor="lightcoral";
                     }
                 });
             }
             //當(dāng)short為null的時(shí)候,讓元素回到自己位置
             animate({
                 ele:this.ele,
                 target:{
                     left:this.ele.l,
                     top:this.ele.t,
                 },
                 duration: 500,
                 effect: 2,
                 callback:function () {
                     this.style.borderColor="lightcoral";
                 }
             })
         }
     </script>
     </body>
     </html>
    
  • 復(fù)習(xí)照片墻實(shí)例代碼
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>照片墻實(shí)例復(fù)習(xí)</title>
         <style>
             *{
                 margin: 0;
                 padding: 0;
             }
             h1{
                 width: 100%;
                 height: 80px;
                 line-height: 80px;
                 text-align: center;
             }
             .container{
                 width: 800px;
                 height: 470px;
                 background-color: lightskyblue;
                 padding: 10px;
                 margin: 0 auto;
                 box-sizing: border-box;
             }
             .container img{
                 float: left;
                 width: 250px;
                 height: 140px;
                 margin: 5px;
                 border: 2px solid lightcoral;
                 box-sizing: border-box;
             }
         </style>
     </head>
     <body>
     <h1>美女照片墻</h1>
     <div class="container">
         <img src="./img/1.jpg" alt="tu"/><img src="./img/2.jpg" alt="tu"/><img src="./img/3.jpg" alt="tu"/><img src="./img/4.jpg" alt="tu"/><img src="./img/5.jpg" alt="tu"/><img src="./img/6.jpg" alt="tu"/><img src="./img/7.jpg" alt="tu"/><img src="./img/8.jpg" alt="tu"/><img src="./img/9.jpg" alt="tu"/>
     </div>
     <script src="js/myutils.js"></script>
     <script src="js/myEvent.js"></script>
     <script src="js/finallyAnimate.js"></script>
     <script src="js/EventEmitter.js"></script>
     <script src="js/Drag.js"></script>
     <script>
         //獲取元素
         var oCon=utils.getByClass("container")[0];
         var aImg=utils.getChildren(oCon,"img");
         //如果使用拖拽必須為定位布局,所以需要將每個(gè)圖片變?yōu)槎ㄎ徊季?
         //圖片相對(duì)于外容器進(jìn)行定位;所以外容器添加相對(duì)定位
         toPosition();
         function toPosition() {
             utils.css(oCon,"position","relative");
             //從最后一個(gè)開(kāi)始設(shè)置定位,獲取其位置值
             for(var i=aImg.length-1; i>=0;i--){
                 //先獲取位置值,后設(shè)置絕對(duì)定位
                 aImg[i].initLeft=aImg[i].offsetLeft;
                 aImg[i].initTop=aImg[i].offsetTop;
                 utils.css(aImg[i],{
                     margin:0,
                     position: "absolute",
                     left:aImg[i].initLeft,
                     top:aImg[i].initTop
                 })
             }
         }
         //圖片添加拖拽功能
         imgDrag();
         function imgDrag() {
             for(var i=0; i<aImg.length; i++){
                 var drag=new Drag({
                     ele:aImg[i]
                 });
                 drag.on("mymousedown",myDragdown).on("mymousemove",myDragmove).on("mymouseup",myDragup);
     
             }
             //myDragdown函數(shù)
             function myDragdown() {
                 //提高圖片的層級(jí)
                 this.bgc=utils.css(this.ele,"borderColor");
                 utils.css(this.ele,{
                     borderColor:"yellow",
                     zIndex:3
                 });
                 this.otherImg=utils.siblings(this.ele);
             }
             //myDragmove函數(shù)
             function myDragmove() {
                 this.ary=[];
                 for(var i=0; i<this.otherImg.length; i++){
                     //比較兩個(gè)圖片之間的位置
                     var tt=utils.offset(this.ele).top+this.ele.offsetHeight<utils.offset(this.otherImg[i]).top;
                     var tb=utils.offset(this.ele).top>utils.offset(this.otherImg[i]).top+this.otherImg[i].offsetHeight;
                     var rl=utils.offset(this.ele).left+this.ele.offsetWidth<utils.offset(this.otherImg[i]).left;
                     var lr=utils.offset(this.ele).left>utils.offset(this.otherImg[i]).left+this.otherImg[i].offsetWidth;
                     utils.css(this.otherImg[i],{
                         borderColor:this.bgc,
                         zIndex:1
                     });
                     if(!(tt||tb||rl||lr)){
                         //計(jì)算出距離,綁定在元素的自定義屬性上
                         this.otherImg[i].short=imgShort(this.ele,this.otherImg[i]);
                         this.ary.push(this.otherImg[i]);
                     }
                 }
                 //數(shù)組進(jìn)行排序,排序目標(biāo)為圖片身上的short屬性
                 if(this.ary.length>0){
                     this.ary.sort(function (a,b) {
                         a=a.short;
                         b=b.short;
                         return a-b;//升序
                     });
                     //取最短的改變邊框顏色,其他的恢復(fù)原邊框顏色;
                     utils.css(this.ary[0],{
                         borderColor:"yellow",
                         zIndex:2
                     });
                 }
                 //比較數(shù)組中的元素哪個(gè)與移動(dòng)元素重合最多
                 //計(jì)算兩個(gè)圖片左上角點(diǎn)之間的距離,最短的,重合度越高
                 function imgShort(curImg,tarImg) {
                     var curImgLeft=utils.offset(curImg).left;
                     var curImgTop=utils.offset(curImg).top;
                     var tarImgLeft=utils.offset(tarImg).left;
                     var tarImgTop=utils.offset(tarImg).top;
                     return Math.pow(tarImgLeft-curImgLeft,2)+Math.pow(tarImgTop-curImgTop,2);
                 }
     
             }
             //myDragup
             function myDragup() {
                 //鼠標(biāo)抬起事件后,判斷ary的長(zhǎng)度
                 if(!this.ary){
                     utils.css(this.ele,"borderColor",this.bgc);
                     return;
                 }
                 if(this.ary.length>0){
                     //如果數(shù)組不為空,就讓移動(dòng)元素與距離最短的互換位置;
                     var l,t;
                     l=this.ele.initLeft;
                     t=this.ele.initTop;
                     this.ele.initLeft=this.ary[0].initLeft;
                     this.ele.initTop=this.ary[0].initTop;
                     this.ary[0].initLeft=l;
                     this.ary[0].initTop=t;
                 }
                 var othis=this;
                 for(var i=0; i<aImg.length; i++){
                     animate({
                         ele:aImg[i],
                         target:{
                             left:aImg[i].initLeft,
                             top:aImg[i].initTop
                         },
                         duration:300,
                         callback:function () {
                             utils.css(this,{
                                 borderColor:othis.bgc,
                                 zIndex:1
                             });
                             othis.ary=null;
                         }
                     })
                 }
             }
         }
     </script>
     </body>
     </html>
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,786評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,588評(píng)論 1 45
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,332評(píng)論 2 66
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開(kāi)發(fā)》時(shí),所整理的筆記。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,366評(píng)論 0 7
  • 很多學(xué)平面設(shè)計(jì)的人都會(huì)遇到一個(gè)問(wèn)題,那就是學(xué)平面設(shè)計(jì)需要學(xué)手繪嗎?手繪這個(gè)問(wèn)題是很多學(xué)員一直關(guān)注的問(wèn)題,那么學(xué)平面...
    黑色星期九閱讀 7,708評(píng)論 0 0