Question

我希望在将鼠标悬停在图片上时按住CTRL键使我的图片更大，当我再次按下CTRL时，它应该会返回。

所以我做了它会改变所有图片，然后添加一个eventlistener。 Chrome扩展的图片越来越大，但它没有响应CTRL键响应，也没有恢复原来的形式。

    window.onload = function () {

   var srcList = $('img').map(function () {
    return this.src
  }).get() */
  var ctrlKey = String.fromCharCode(keyPress)
  // const ctrlKey = String.fromCharCode(event.buttonPress)
  var images = document.getElementsByTagName('img')
  // console.log(images)
  // var srcList = []
  // for (var i = 0; i < images.length; i++) {
  //  srcList.push(images[i].src)
  // }
  for (var i = 0; i < images.length; i++) {
    var img = images[i]
    img.addEventListener('mouseover', function (event) {
      // console.log(event)
      // if (!event.ctrlKey) { return }
      var el = event.target
      el.style.width = el.offsetWidth * 1.5 + 'px'
      el.style.height = el.offsetHeight * 1.5 + 'px'

      el.style.position = 'fixed'
      el.style.transition = '2s'
      // el.style.left = event.x + el.offsetWidth * 0.5 + 'px' 
      // el.style.top = event.y + el.offsetHeight * 0.5 + 'px'
      el.style.left = window.innerWidth / 2 - 0.5 * el.style.width.replace('px', '') + 'px'
      el.style.top = 0
      console.log(event)
    }, true)

    img.addEventListener('keydown', function (event) {
      const ctrlKey = String.fromCharCode(event.which)
      if (!event.ctrlKey) { return }

      console.log(event)
      var el = event.target
      el.style.width = el.offsetWidth / 3 * 2 + 'px'
      el.style.height = el.offsetHeight / 3 * 2 + 'px'

      el.style.position = 'relative'
      el.style.left = 0
      el.style.top = 0
    }, true)
  }
}

// Image.addEventListener(onmouseover, src('img')[, large]);

// var img = document.getElementById('image-hover')

Answer 1

我一直在尝试更改它，但显示了未预期的解析错误：意外令牌

window.onload = function () {
  // valid koik pildid
  // foreach pildidi ja igale pildile lisa eventlistener
  /* var srcList = $('img').map(function () {
    return this.src
  }).get() */
  // var ctrlKey = String.fromCharCode(keyPress)
  // const ctrlKey = String.fromCharCode(event.buttonPress)
  var images = document.getElementsByTagName('img')
  // console.log(images)
  // var srcList = []
  // for (var i = 0; i < images.length; i++) {
  //  srcList.push(images[i].src)
  // }
  for (var i = 0; i < images.length; i++) {
    var img = images[i]
    img.addEventListener('mouseover', function (event) {
      // console.log(event)
      if (!event.ctrlKey) { return }
      // const letter = String.fromCharCode(event.which)
      var el = event.target
      el.style.width = el.offsetWidth * 1.5 + 'px'
      el.style.height = el.offsetHeight * 1.5 + 'px'

      el.style.position = 'fixed'
      el.style.transition = '2s'
      // el.style.left = event.x + el.offsetWidth * 0.5 + 'px' // hiire koordinaadid
      // el.style.top = event.y + el.offsetHeight * 0.5 + 'px'
      el.style.left = window.innerWidth / 2 - 0.5 * el.style.width.replace('px', '') + 'px'
      el.style.top = 0
      console.log(event)
    }, true)

    //document.addEventListener('keyDown', function (event) {
    this.document.addEventListener("keyDown", checkKeyPress, false)
    function checkKeyPress(key){
        if(key.keyCode == "17"){
      //const CrtlKey = String.fromCharCode(17)
      // const ctrlKey = String.fromCharCode(event.keyDown)
      // if (!event.ctrlKey) { return }
      // alert('CrtlKey')

      // console.log(event)
        var el = event.target
        if (event.ctrlKey) {
        //alert("ctr key was pressed during the click");

        el.style.width = el.offsetWidth / 3 * 2 + 'px'
        el.style.height = el.offsetHeight / 3 * 2 + 'px'
        el.style.position = 'relative'
        el.style.left = 0
        el.style.top = 0
        }
      }, true)
    }
  }
}
// Image.addEventListener(onmouseover, src('img')[, large]);

// var img = document.getElementById('image-hover')

鼠标悬停图片更大

1 个答案: