javascript 練習題

javascript 練習題，圖檔跟着滑鼠飛：

//圖檔跟着滑鼠飛,可以在任何的浏覽器中實作

//window.event和事件參數對象e的相容

//clientX和clientY單獨的使用的相容代碼

//scrollLeft和scrollTop的相容代碼

//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

//把代碼封裝在一個函數

//把代碼放在一個對象中

var evt={

//window.event和事件參數對象e的相容
getEvent:function (evt) {
  return window.event||evt;
},
//可視區域的橫坐标的相容代碼
getClientX:function (evt) {
  return this.getEvent(evt).clientX;
},
//可視區域的縱坐标的相容代碼
getClientY:function (evt) {
  return this.getEvent(evt).clientY;
},
//頁面向左卷曲出去的橫坐标
getScrollLeft:function () {
  return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//頁面向上卷曲出去的縱坐标
getScrollTop:function () {
  return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相對于頁面的橫坐标(pageX或者是clientX+scrollLeft)
getPageX:function (evt) {
  return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相對于頁面的縱坐标(pageY或者是clientY+scrollTop)
getPageY:function (evt) {
  return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
           

};

//最終的代碼

document.onmousemove=function (e) {

my$("im").style.left=evt.getPageX(e)+"px";
my$("im").style.top=evt.getPageY(e)+"px";           

鋼琴版導覽列：

css樣式：

• {

  margin: 0;
   padding: 0;
   list-style: none;           

  }

  .nav {

  width: 900px;
   height: 60px;
   background-color: black;
   margin: 0 auto;           

  .nav li {

  width: 100px;
   height: 60px;
   /*border: 1px solid yellow;*/
   float: left;
   position: relative;
   overflow: hidden;           

  .nav a {

  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 24px;
   color: blue;
   text-align: center;
   line-height: 60px;
   text-decoration: none;
   z-index: 2;           

  .nav span {

  position: absolute;
   width: 100%;
   height: 100%;
   background-color: yellow;
   top: 60px;           

  jq實作代碼： 需要引入jq檔案

$(function () {

//給li注冊滑鼠進入事件,讓li下面的span top：0  播放音樂
  $(".nav li").mouseenter(function () {
    $(this).children("span").stop().animate({top: 0});
    //播放音樂
    var idx = $(this).index();
    $(".nav audio").get(idx).load();
    $(".nav audio").get(idx).play();
  }).mouseleave(function () {
    $(this).children("span").stop().animate({top: 60});
  });
  
  //節流閥  ：按下的時候，觸發，如果沒彈起，不讓觸發下一次
  //1. 定義一個flag
  var flag = true;
  
  
  //按下1-9這幾個數字鍵，能觸發對應的mouseenter事件
  $(document).on("keydown", function (e) {
    if(flag) {
      flag = false;
      //擷取到按下的鍵
      var code = e.keyCode;
      if(code >= 49 && code <= 57){
        //觸發對應的li的mouseenter事件
        $(".nav li").eq(code - 49).mouseenter();
      }
    }
   
  });

  $(document).on("keyup", function (e) {
    flag = true;
    
    //擷取到按下的鍵
    var code = e.keyCode;
    if(code >= 49 && code <= 57){
      //觸發對應的li的mouseenter事件
      $(".nav li").eq(code - 49).mouseleave();
    }
  });
  
  //彈起的時候，觸發mouseleave事件
  
});