在AngularJS中激活mouseover上的.gif，并使用ng repeat

Activate .gif on mouseover in AngularJS with ng-repeat

本文关键字：ng repeat gif AngularJS 激活 mouseover 上的      更新时间：2023-09-26

我使用jQuery看到了很多关于这个问题的答案。像这样：停止加载gif动画，鼠标悬停时启动激活并设置gif动画。但我正在寻找一种方法来做到棱角分明。我认为这应该与在jQuery中执行时的想法相同。我想做的正是在第一个环节中提问的人想做的事情，但角度：

  1. 页面加载=>所有gif的动画都已停止

  2. 鼠标悬停时=>开始为该gif 制作动画

  3. 在mouseout=>该gif 的动画再次停止

以下是我的HTML中的内容：

<img class="projectGif" src="{{project.gifUrl}}" ng-mouseover="animation(project)">

我传递到动画函数中的"project"对象是我在代码早期从ng repeat="project in projects"获得的对象。然后在我的JavaScript中：

$scope.animation = function(project) {
    //not sure what to do here
};

我在angular文档页面上四处查找类似于jQuery $(this).attr()的东西，发现了$attr和$set之类的东西，我想也许我可以用它们将img标记中的src设置为img的路径。就像$set('src', 'project.imgUrl')一样，但我在控制台中收到一个错误，上面写着$set is not defined。

所以我的主要问题是，我如何使用angular使我的网页以static.gif（或img等）开始，然后在悬停时，将static.gif更改为动画.gif？

在纯HTML 中

<img  ng-repeat="project in vm.projects"
      ng-src="{{project.gifUrl}}"
      ng-init="project.gifUrl=project.staticUrl"
      ng-mouseover="project.gifUrl=project.dynamicUrl"
      ng-mouseleave="project.gifUrl=project.staticUrl">

或者混合溶液：

HTML

<div ng-controller="myController as vm">
    <img ng-repeat="project in vm.projects"
         ng-src="{{project.gifUrl}}"
         ng-init="project.gifUrl=project.staticUrl"
         ng-mouseover="vm.setDynamic($index)"
         ng-mouseleave="vm.setStatic($index)">
</div>

JS-

var vm = this;
vm.setDynamic = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].dynamicUrl; 
};
vm.setStatic  = function(index) { 
    vm.projects[index].gifUrl = vm.projects[index].staticUrl; 
};

请注意，我正在使用ng-repeat指令的$index特殊属性。有关ng-repeat和$index的更多信息，请参阅AngularJS ngRepeat API Docs

使用悬停时设置gif动画的技术，创建一个指令，为其提供静态gif和动画gif的url，然后使其在鼠标悬停时在两个图像之间切换。

您也可以使用扩展角度指令中描述的技术

一旦你创建了指令，你的html可能看起来像

<img ng-src="{{project.staticUrl}}" custom-src-on-mouseover="{{project.gifUrl}}">

相关文章：