Question

我已经使用jQuery看到了很多关于这个问题的答案。像这样： Stop a gif animation onload, on mouseover start the activation和Animating a gif on hover。但我正在寻找一种方法来做角度。我认为它应该与在jQuery中执行它时的想法相同。我想做的就是在第一个链接中提出问题的人想要做的事情，但是在角度上：

在页面上加载=＆gt;所有GIF的动画都已停止
on mouseover =＆gt;动画开始于那个gif
关于mouseout =＆gt;动画再次停止为那个gif

以下是我在HTML中的内容：

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

我正在传递给动画函数的“项目”对象是我在代码中从ng-repeat =“项目中的项目”中获得的对象。然后在我的JavaScript中：

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

我在角度文档页面上查找类似于jQuery $(this).attr()的内容，并找到了诸如$ attr和$ set之类的内容，我想也许我可以使用它来设置我的img中的src标记到我的img的路径。与$set('src', 'project.imgUrl')一样，但我的控制台中出现$set is not defined错误。

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

Answer 1

纯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; 
};

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

Answer 2

使用Animating a gif on hover中的技术，创建一个directive，您可以为其提供静态gif和动画gif的网址，然后在鼠标悬停时在两个图像之间切换。

您还可以使用Extending Angular Directive

中描述的技术

创建指令后，您的html看起来像

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

使用ng-repeat在AngularJS中鼠标悬停时激活.gif

2 个答案: