Question

我试过并尝试找到这样的问题，所以我没有再问它。如果我这样做，我很抱歉。我正在建立一个大学网站，我有一个数据表。我被提示实现一些javascript功能，因为该项目是基于我们对php和mysql的学习。无论如何，我计划使用javascript来实现它，所以当我将鼠标悬停在一行数据上时，它的大小会增加（动画），但我很无聊，我太笨了，不知道该怎么做。

这是我的代码* PS我也喜欢它，当我离开它时，它缩小回原来的大小。谢谢你提前。

HTML

<?php
  require_once("connect.php");

  $query = "SELECT * FROM player";
  $stmt = $con->prepare($query);
  $stmt->execute();
  $results = $stmt->fetchAll();
  $stmt->closeCursor();
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Players</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  </head>
  <body>
      <header>
        <h1>Players</h1>
      </header>
      <div class="wrapper">
        <table border="0" cellspacing="30px" align="center">
          <tr>
            <th>Player ID</th>
            <th>Player Name</th>
            <th>Player Age</th>
            <th>Player Team</th>
          </tr>
          <?php foreach ($results as $r): ?>
          <tr id="row">
            <td><?php echo $r['ID']; ?></td>
            <td><?php echo $r['Player Name']; ?></td>
            <td><?php echo $r['Player Age']; ?></td>
            <td><?php echo $r['Player Team']; ?></td>
          </tr>
          <?php endforeach; ?>
        </table>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="resources/js/main.js"></script>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
}

#buttons {
  position: absolute;
  top: 600px;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.0);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
}

.btn:active {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#btn1 {
  background-color: red;
}

#btn2 {
  background-color: blue;
}

#btn3 {
  background-color: green;
}

body {
  background-image: url("../resources/img/football.jpg");
  height: 100%;
  background-size: cover;
}

h1 {
  margin: 0;
  padding: 0;
}

header h1 {
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
  color: #fff;
  -webkit-text-stroke: 1px black;
}

JS

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

var row = document.getElementById('row');

row.onmouseenter = function() {
  row.style.scale = "2";
}

row.onmouseleave = function() {
  row.style.scale = "1";
}

Answer 1

您可以使用css过渡轻松完成。

https://github.com/OfficeDev/Office-365-SDK-for-Java

＆＃13;

tr { transition: all .2s ease-in-out; }
tr:hover { transform: scale(1.1); }

＆＃13;

<table>
<tbody>
<tr><td>One</td><tr>
<tr><td>Two</td><tr>
<tr><td>Three</td><tr>
</tbody>
</table>

＆＃13;

Answer 2

要使用JavaScript执行此操作，首先必须使用行上的类，而不是ID。这是因为行是使用循环创建的。因此，相同的id将被定义为所有行......这并不好。在HTML文档中，id必须是唯一的。

然后，您必须使用.getElementsByClassName()选择那些行，这些行返回元素集合...不仅仅是一个元素。嗯......可能只有一个，但它会在阵列中。

为了将某些事件绑定到行，您必须迭代集合数组并向其添加事件侦听器。这是通过addEventListener()

完成的

最后，使用transform属性完成缩放。

这是你的代码只有两行...我＆＃34;模拟＆＃34;您的PHP结果来自数据库。

祝你好运解释一下......点击链接并阅读文档。这是学习东西的最佳方式。

＆＃13;

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

var row = document.getElementsByClassName('row');

for (var i = 0; i < row.length; i++) {

  row[i].addEventListener("mouseenter", function(){
    this.style.transform = "scale(1.2)";
  });

  row[i].addEventListener("mouseleave", function(){
    this.style.transform = "scale(1)";
  });
}

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
}

#buttons {
  position: absolute;
  top: 600px;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.0);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
}

.btn:active {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#btn1 {
  background-color: red;
}

#btn2 {
  background-color: blue;
}

#btn3 {
  background-color: green;
}

body {
  background-image: url("../resources/img/football.jpg");
  height: 100%;
  background-size: cover;
}

h1 {
  margin: 0;
  padding: 0;
}

header h1 {
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
  color: #fff;
  -webkit-text-stroke: 1px black;
}

＆＃13;

<header>
  <h1>Players</h1>
</header>
<div class="wrapper">
  <table border="0" cellspacing="30px" align="center">
    <tr>
      <th>Player ID</th>
      <th>Player Name</th>
      <th>Player Age</th>
      <th>Player Team</th>
    </tr>

    <tr class="row">
      <td>32</td>
      <td>Golem</td>
      <td>472</td>
      <td>Badass</td>
    </tr>
    
    <tr class="row">
      <td>79</td>
      <td>Kharmesh</td>
      <td>124</td>
      <td>Cold Bloods</td>
    </tr>

  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

动画a的大小

2 个答案: