• <dd id="by9vk"><pre id="by9vk"></pre></dd>
  • <dd id="by9vk"></dd>
    <progress id="by9vk"><pre id="by9vk"></pre></progress><tbody id="by9vk"></tbody>
    <tbody id="by9vk"></tbody>

    <rp id="by9vk"><ruby id="by9vk"></ruby></rp>

    好程序員-千鋒教育旗下高端IT職業教育品牌

    400-811-9990
    我的賬戶
    好程序員

    專注高端IT職業培訓

    親愛的猿猿,歡迎!

    已有賬號,請

    如尚未注冊?

    [HTML5] 好程序員web前端教程分享javascript 練習題

    [復制鏈接]
    172 0
    葉子老師 發表于 2019-11-14 17:23:14 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
    好程序員web前端培訓分享前端 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事件
          
        });
    好程序員web前端培訓http://www.jyf24.com/html5_class.shtml

    精彩內容,一鍵分享給更多人!
    收藏
    收藏0
    轉播
    轉播
    分享
    淘帖0
    支持
    支持0
    反對
    反對0
    回復

    使用道具 舉報

    您需要登錄后才可以回帖

    本版積分規則

    關注我們
    好程序員
    千鋒好程序員

    北京校區(總部):北京市海淀區寶盛北里西區28號中關村智誠科創大廈

    深圳西部硅谷校區:深圳市寶安區寶安大道5010號深圳西部硅谷B座A區605-619

    杭州龍馳智慧谷校區:浙江省杭州市下沙經濟技術開發區元成路199號龍馳智慧谷B座7層

    鄭州校區:鄭州市二七區航海中路60號海為科技園C區10層、12層

    Copyright 2007-2019 北京千鋒互聯科技有限公司 .All Right

    京ICP備12003911號-5 京公安網11010802011455號

    請您保持通訊暢通1對1咨詢馬上開啟

    Pictoa