欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用JavaScript制作一個搞怪的兔子動畫效果

 更新時間:2023年01月09日 09:25:19   作者:zkj  
又是一年新春之際,祝福大家兔年快樂!給大家介紹一個有趣的動效(兼容?IE),頁面右下角有一只搞怪的兔子,鼠標在頁面中懸停時,兔子會跟著做出不同的動作和表情,感興趣的小伙伴可以了解一下

前言

Hello,掘友們好!又是一年新春之際,祝福大家兔年快樂!給大家介紹一個有趣的動效(兼容 IE),頁面右下角有一只搞怪的兔子,鼠標在頁面中懸停時,兔子會跟著做出不同的動作和表情。然后可以在頁面中任意位置(離兔子太近不能發(fā)射,會傷到兔子)點擊鼠標,將從兔子眼睛里發(fā)射炮彈,隨之擊中的是你的霉 運、壓 力、貧 窮、疾 病。

實現(xiàn)

定義一個隨機文本塊。

<p id="p1"></p>

定義兔子的構(gòu)造函數(shù)。

function HoverRabbit() {
  this.explodeImage = new Image();
  this.explodeImage.src = "img/explode.png";
  for (var i = 1; i <= 6; i++) {
    this.images[i] = new Image();
    this.images[i].src = "img/s" + i + ".png";
  }
  if (typeof(CanvasGradient) != 'undefined') {
    this.canvas = document.createElement("canvas");
    this.canvas.width = screen.width + 100;
    this.canvas.height = screen.height;
    this.canvas.style.position = 'absolute';
    this.canvas.style.left = '0px';
    this.canvas.style.top = '0px';
    this.canvas.style.display = 'none';
    document.body.appendChild(this.canvas);
    this.canvas.style.position = 'fixed';
  }
}

定義兔子原型的屬性和方法。

HoverRabbit.prototype = {
  images: [],
  explodeImage: null,
  eyePositions: [],
  current: 1,
  frame: 1,
  canvas: null,
  interval: null,
  start: function() {
    var me = this;
    this.eyePositions[1] = {
      eye1x: 123,
      eye1y: 47,
      eye2x: 104,
      eye2y: 53
    };
    this.eyePositions[2] = {
      eye1x: 120,
      eye1y: 50,
      eye2x: 101,
      eye2y: 54
    };
    this.eyePositions[3] = {
      eye1x: 119,
      eye1y: 54,
      eye2x: 97,
      eye2y: 56
    };
    this.eyePositions[4] = {
      eye1x: 112,
      eye1y: 61,
      eye2x: 90,
      eye2y: 61
    };
    this.eyePositions[5] = {
      eye1x: 105,
      eye1y: 64,
      eye2x: 85,
      eye2y: 61
    };
    this.eyePositions[6] = {
      eye1x: 98,
      eye1y: 68,
      eye2x: 79,
      eye2y: 56
    };
    document.onmousemove = function(e) {
      me.onmousemove(e);
    }
    if (this.canvas) {
      document.addEventListener("click", function(e) {
        me.ondblclick(e);
      });
    }
  },
  onmousemove: function(e) {
    var event = e || window.event;
    var deg = Math.abs(screen.height - event.screenY) / (Math.abs(screen.width - event.screenX) + 1);
    var n = 1;
    if (deg > 2) n = 6;
    else if (deg > 1.4) n = 5;
    else if (deg > 0.7) n = 4;
    else if (deg > 0.45) n = 3;
    else if (deg > 0.2) n = 2;
    this.deg = n;
    if (this.current != n) {
      document.body.style.backgroundImage = "url(" + this.images[n].src + ")";
      this.current = n;
    }
  },
  drawBomb: function(ctxt, n, x, y) {
    var sx = 64 * (n % 4);
    var sy = 64 * (Math.floor(n / 4));
    ctxt.drawImage(this.explodeImage, sx, sy, 64, 64, x - 32, y - 32, 64, 64);
  },
  ondblclick: function(e) {
    if (this.canvas.style.display != 'none') return;
    var me = this;
    if (e.clientX > window.innerWidth - 200 && e.clientY > window.innerHeight - 200) return;
    var ctxt = this.canvas.getContext("2d");
    this.frame = 1;
    this.interval = setInterval(function(e2) {
      ctxt.clearRect(0, 0, me.canvas.width, me.canvas.height);
      switch (me.frame) {
        case 1:
          ctxt.strokeStyle = 'rgba(247,166,71,1)';
          me.canvas.style.display = 'block';
        case 2:
          if (me.frame == 2) {
            ctxt.strokeStyle = 'rgba(247,166,71,0.5)';
            me.drawBomb(ctxt, 0, e.clientX, e.clientY);
          }
          case 3:
            if (me.frame == 3) {
              ctxt.strokeStyle = 'rgba(247,166,71,0.1)';
              me.drawBomb(ctxt, 1, e.clientX, e.clientY);
            }
            var eye1x = window.innerWidth - me.eyePositions[me.current].eye1x;
            var eye1y = window.innerHeight - me.eyePositions[me.current].eye1y;
            ctxt.lineWidth = 3;
            ctxt.beginPath();
            ctxt.moveTo(eye1x, eye1y);
            ctxt.lineTo(e.clientX, e.clientY);
            ctxt.stroke();
            var eye2x = window.innerWidth - me.eyePositions[me.current].eye2x;
            var eye2y = window.innerHeight - me.eyePositions[me.current].eye2y;
            ctxt.beginPath();
            ctxt.moveTo(eye2x, eye2y);
            ctxt.lineTo(e.clientX, e.clientY);
            p1.textContent = ['霉 運', '壓 力', '貧 窮', '疾 病'][Math.floor(Math.random() * 4)];
            p1.style.display = 'block';
            p1.style.transform = 'rotate(' + (-150 + me.deg * 30) + 'deg)';
            p1.style.left = e.clientX - 30 + 'px';
            p1.style.top = e.clientY - 30 + 'px';
            fade(p1);
            ctxt.stroke();
            break;
          case 4:
            me.drawBomb(ctxt, 2, e.clientX, e.clientY);
            break;
          case 14:
            me.canvas.style.display = 'none';
            window.clearInterval(me.interval);
            break;
          default:
            me.drawBomb(ctxt, me.frame - 2, e.clientX, e.clientY);
      }
      me.frame++;
    }, 50);
  }
};

各個屬性和方法說明:

  • images - 兔子不同的動作的圖片數(shù)組。
  • explodeImage - 炮彈圖片元素。
  • eyePositions - 兔子眼睛位置的數(shù)組。
  • current - 整型數(shù)字,當前動作的指針。
  • frame - 整型數(shù)字,發(fā)射炮彈動畫的幀數(shù)指針。
  • canvas - 畫布元素。
  • interval - 發(fā)射炮彈動畫時間間隔定時器的 interval ID。
  • start - 啟動頁面交互的方法,在這里定義了兔子眼睛位置的數(shù)組數(shù)據(jù),綁定頁面鼠標移動、點擊事件。
  • onmousemove - 定義頁面鼠標移動的實現(xiàn)方法。
  • ondblclick - 定義頁面鼠標點擊的實現(xiàn)方法。
  • drawBomb - 定義繪制和更新炮彈動畫的方法。

定義文字淡出的動畫。

function fade(e) {
  var s = e.style;
  s.opacity = 1;
  (function hide() {
    (s.opacity -= .01) < 0 ? s.display = "none" : requestAnimationFrame(hide);
  })();
}

創(chuàng)建兔子對象,調(diào)用啟動交互方法。

var s = new HoverRabbit();
s.start();

效果圖

到此這篇關(guān)于利用JavaScript制作一個搞怪的兔子動畫效果的文章就介紹到這了,更多相關(guān)JavaScript兔子動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用JS實現(xiàn)簡易計算器

    使用JS實現(xiàn)簡易計算器

    這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡易計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)

    Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)

    這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • 詳解template標簽用法(含vue中的用法總結(jié))

    詳解template標簽用法(含vue中的用法總結(jié))

    這篇文章主要介紹了template標簽用法(含vue中的用法總結(jié)),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2021-01-01
  • JavaScript調(diào)試技巧之console.log()詳解

    JavaScript調(diào)試技巧之console.log()詳解

    對于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺中打印相關(guān)信息,因此不會造成類似的顧慮
    2014-03-03
  • JS與CSS3實現(xiàn)圖片響應(yīng)鼠標移動放大效果示例

    JS與CSS3實現(xiàn)圖片響應(yīng)鼠標移動放大效果示例

    這篇文章主要介紹了JS與CSS3實現(xiàn)圖片響應(yīng)鼠標移動放大效果,結(jié)合實例形式分析了javascript與css3響應(yīng)鼠標事件動態(tài)修改頁面元素屬性實現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下
    2018-05-05
  • 在微信小程序中渲染HTML內(nèi)容的方法示例

    在微信小程序中渲染HTML內(nèi)容的方法示例

    這篇文章主要介紹了在微信小程序中渲染HTML內(nèi)容的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 原生javascript實現(xiàn)自動更新的時間日期

    原生javascript實現(xiàn)自動更新的時間日期

    這篇文章主要介紹了原生javascript實現(xiàn)自動更新的時間日期的相關(guān)資料,對實現(xiàn)代碼進行詳細分析,感興趣的朋友可以參考一下
    2016-02-02
  • 基于javascript數(shù)組實現(xiàn)圖片輪播

    基于javascript數(shù)組實現(xiàn)圖片輪播

    這篇文章主要為大家詳細介紹了基于javascript數(shù)組實現(xiàn)圖片輪播的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • JS實現(xiàn)購物車中商品總價計算

    JS實現(xiàn)購物車中商品總價計算

    這篇文章主要為大家詳細介紹了JS實現(xiàn)購物車中商品總價的計算 ,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • js和canvas繪制圓形金屬質(zhì)感特效

    js和canvas繪制圓形金屬質(zhì)感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素來進行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級排版特效
    2024-09-09

最新評論