如何在动态div内以大尺寸onmouseover显示图像？答案

【问题标题】：How to display image in large size onmouseover inside a dynamic div?如何在动态div内以大尺寸onmouseover显示图像？
【发布时间】：2018-12-08 05:21:27
【问题描述】：

我正在尝试在 angularJS 中制作一个简单的照片库。下面是代码

index.html

<!DOCTYPE html>
<html >
<head> 
    <title></title> 

    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>

</head>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp"></div>
    </div> 
</body>
</html>

test.js（控制器）

function testMe(imgSrc) {
    alert(imgSrc);
}

angular
    .module('testModule', [])
    .controller('testCtrl', function($scope) {
        var photoSource = [
            ["images/ph1.jpg", "images/ph2.jpg"],
            ["images/ph5.jpg", "images/ph6.jpg"]
        ];
        var body = "<table>";
        var row = 2;
        var col = 2;
        for (var i = 0; i < row; i++) {
            body += "<tr>";
            for (var j = 0; j < col; j++) {
                body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
            }
            body += "</tr>";
        }
        body += "</table>";
        console.log(body);
        $("#dp").html(body);
    });

问题是，当鼠标悬停在图像上时，我想在 div 标签的中心显示该图像。但这部分我无法实现。

【问题讨论】：

您可以使用 Angular 内置指令 ng-mouseover。您为其分配范围的功能，比如说 resizeImg() ，然后在您的控制器中调整图像的大小
这不是您的答案，但我建议您不要将 Jquery 和 Angular 混合在一起。您的代码不是使用 Angular 和 Jquery 的标准方式。
在同一个问题中看到angularjs和jquery标签时我哭了。

标签： javascript jquery html angularjs

【解决方案1】：

您不需要在控制器中操作 html，而是使用 angular 绑定，这样您的 javascript 就变成了

function testMe(imgSrc) {

        alert(imgSrc);
     } 

angular
.module('testModule', [])
.controller('testCtrl', function ($scope) {

    $scope.photoSource = [
                    [ "images/ph1.jpg","images/ph2.jpg"],
                    [ "images/ph5.jpg","images/ph6.jpg"]                    
               ]; 

    $scope.showFullImage = function(photoSrc) {
      // this function will call when you mouseover so add logic here and photosrc will be current mouseover image src
       }
});

现在在你的 html 中使用这个 photoSource 范围变量来生成表格

<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp">
<table>
 <tr ng-repeat="photos in photoSource">
  <td ng-repeat="photo in photos">
    <img ng-src="{{photo}}" ng-mouseover="showFullImage(photo)" />
  </td>
 </tr>
</table>
</div>
    </div> 
</body>

【讨论】：

【解决方案2】：

Two Way Data-Binding 是 AngularJS 的一个有用特性。您不需要在 JavaScript 中编写太多逻辑。

试试这个：

angular.module('testModule', []).controller('testCtrl', function ($scope) {
    $scope.photoSource = [
        [ "images/ph1.jpg","images/ph2.jpg"],
        [ "images/ph5.jpg","images/ph6.jpg"] 
    ];
    $scope.fullImage = function (imgSrc) {
        $scope.showImage = imgSrc;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">
        <div id="ds">
            <img ng-src="{{showImage}}"/>
        </div>
        <div id="dp" style="display: flex;">
            <div ng-repeat="photos in photoSource">
                <img class="item" ng-src="{{photo}}" ng-mouseover="fullImage(photo)" ng-repeat="photo in photos" style="max-width: 100%"/>
            </div>
        </div>
    </div>
</body>

【讨论】：

但我希望更大的图像出现在一个以鼠标悬停为中心的 div 中

【解决方案3】：

这是我用来解决这个问题的逻辑。我假设您希望悬停的项目显示在模式对话框或页面上的居中 div 中。

使用布尔值（例如 isVisible）隐藏所需的居中 CSS（左边距、右边距：自动）的 div，在控制器中设置为 false。
在此容器中保留一个空图像标记。您可以使用基于变量的 ng-src 更改图像 src。保持这个变量源指向一个占位符图像。我们稍后会在用户将鼠标悬停在图像上时更新它。
使用 ng-mouseover 调用函数并将图像源作为参数传递给函数
在该函数中，使用图片源设置占位符图片的来源
通过设置标志显示隐藏的div，isVisible为true
您还需要处理鼠标移出问题，因为一旦用户将鼠标悬停在图像之外，就需要隐藏容器。

使用 Angular JS 时要记住的几点：

不要使用 jQuery 进行 DOM 操作。您可以使用 ng-show/ng-hide 显示或隐藏内容，或使用 ng-class 指令添加/删除类。 ng-if 还可以在需要时实际呈现或删除内容。
不要将 HTML 动态插入页面。如果您绝对需要这样做，请使用自定义指令。

【讨论】：