Javascript 滑鼠移動上去 滑桿跟著效果代碼分享_javascript技巧

先來一張截圖。

滑鼠移動到對應的分類，下面的紅色小三角形就會自動跟隨，緩慢的跟隨。
不管有幾個都可以。
javascript code:

複製程式碼 程式碼如下:

function changeCoord(id, le>

function changeCoord(id, left) $(id).style.left = left;}

function $$(id) {
 return document.getElementById(id);

}

function $$$(id) {
 return document.getElementsByClassName(id)[0];

}

function indexOf(arry, obj) {
 for (var i = 0; i   if (obj == arry[i]) {
   if (obj == arry[i]) {
   return i;
  }

 };

}

window.onload = function() {
 //給頁上所有的滑桿註冊事件
 //products-box-center 父容器物件

  var obj = documentClass. ('products-box-center');
  for(var i=0;i   try{
   var base=obj[i].getElementsBctsName-products box-center-title')[0]; //取得每一項標題
   var elems=base.getElementsByClassName('products-items-title');
    for(var j0;j     var elem=elems[j];
     elem.onmousemove=function(){
      //獲得當前對象的父容器的父容器
      var baseElem=this. 。      //取得對應的滑桿物件
      var slider=$$('products-triangle-' baseIndex);

      
      //改變目前物件和其他物件的顏色
      this.style.color = "red";
      ('products-items-title');
      for(var k=0;k       style.color="#666";
      }

     };
    }   }
  };

}



html code:

複製程式碼

程式碼如下:

 

    

   focus-text">

最新商品

     

筆記本

     

數位影音

     

配件

     

辦公室印刷 h3>

     

    

    

      

       

      
• 
  
            
  
      IPS237L-BN 23吋IPS透鏡
            
  
  
          ￥1299.00
  
  
           

        
  🎜>    

   

上面的html是部分，可以用el表達循環下，多搞幾個。