代码之家 › 专栏 › 技术社区 › Mark Allison

如何使用Javascript在鼠标上方放大图像?

html javascript

Mark Allison · 技术社区 · 7 年前

我做错了什么?

document.getElementById("photo").onmouseover = function() {
  mouseOver()
};
document.getElementById("photo").onmouseout = function() {
  mouseOut()
};

function getPhoto(handle) {
  var img = new Image();
  var div = document.getElementById("photo");
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  img.src = "https://res.cloudinary.com/harmhxmnk/image/upload/" + handle;
  img.height = 32;
  img.onload = function() {
    div.appendChild(img);
  };
}

function mouseOver() {
  var img = document.getElementById("photo");
  img.height = 100;
}

function mouseOut() {
  // TODO
}

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}

<div class="photo" id="photo"></div>

4 回复 | 直到 7 年前

kev 7 年前

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
  transform: scale(1);
  transition: transform .5s;
}

.photo:hover {
  transform: scale(1.2);
}

<div class="photo" id="photo"><img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" /></div>

epascarello 7 年前

function mouseOver() {
  var img = document.querySelector("#photo img");
  img.height = 100;
}

Max90 7 年前

我认为仅仅使用css来实现这一点会更容易、更干净

#photo:hover{
    height: 100:
}

Andy 7 年前

使用flexbox使用CSS非常简单( demo

.col {
  display: flex;
}

.col img {
  margin: 5px 5px; /* more margin makes the image smaller */
  flex-grow: 1;
}

.col img:hover {
  margin: 0 0; /* less margin on hover makes the image bigger */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">       
        <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
    <div class="col">
      <img src="https://placekitten.com/g/200/200">
    </div>
  </div>  
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前