当AngularJS激活这个缩略图时，我们如何才能显示彩色活动缩略图？

Question

在这个项目中，我在网页顶部有4张图片，它们是我的缩略图。当我点击其中一张图片时，我希望它以彩色显示，并且这种颜色会保留在图片上，直到我们点击其他图片为止。在此期间，其他照片为黑白照片。我用AngularJS做了这个练习，我不知道在哪里可以把这种属性放在我的代码中，你能帮帮我吗？

我希望获得该项目的图片：

项目代码：

    <!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href="style.css" rel="stylesheet">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="thumbnail">
    <img ng-click="changeName1()" ng-src="{{firstname1}}"  >
    <img ng-click="changeName2()" ng-src="{{firstname2}}" >
    <img ng-click="changeName3()"ng-src="{{firstname3}}" >
    <img ng-click="changeName4()"ng-src="{{firstname4}}" >
    <h1>{{title}}</h1>
</div>
    <div class="backgroundpicture">
        <img ng-src="{{src}}">
    </div>
    <div class="foregroundpicture">
        <img ng-src="{{src2}}">
    </div>   
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname1 = "photoshop-logo.jpg";
    $scope.firstname2 = "autocad-logo.png";
    $scope.firstname3 = "counterstrike-logo.png";
    $scope.firstname4 = "leagueoflegends-logo.jpg";


    $scope.src = "photoshop-screenshot.png";
    $scope.src2 = "photoshop-profile.PNG";
    $scope.title = "Photoshop";
    $scope.firstnamedisplay =$scope.firstname1;

    $scope.changeName1 = function() {
        $scope.firstnamedisplay =$scope.firstname1;
        $scope.src = "photoshop-screenshot.png";
        $scope.src2 = "photoshop-profile.PNG";
        $scope.title = "Photoshop";

    }
    $scope.changeName2 = function() {
        $scope.firstnamedisplay =$scope.firstname2;
        $scope.src = "autocad-screenshot.png" ;
        $scope.src2 = "autocad-profile.png";
        $scope.title = "Autocad";

    }
    $scope.changeName3 = function() {
        $scope.firstnamedisplay =$scope.firstname3;
        $scope.src = "counterstrike-screenshot.jpg";
        $scope.src2 = "counterstrike-profile.png";
        $scope.title = "Counter-Strike";

    }
    $scope.changeName4 = function() {
        $scope.firstnamedisplay =$scope.firstname4;
        $scope.src = "leagueoflegends-screenshot.png";
        $scope.src2 = "leagueoflegends-profile.png";
        $scope.title = "League of legends";

    }

});
</script>

</body>
</html>

    body {
    margin: 5%;
}

.thumbnail>img{
    padding-left: 3%;
    padding-right: 3%;
}

.backgroundpicture >img {
    padding-top: 7%;
    z-index:1;
    width: 90%;

}

.foregroundpicture >img  {
    position:absolute;
    z-index: 2;
    width: 55%;
    left:40%;
    top:65%;
}

Answer 1

根据我的个人经验，您将需要使用CSS属性filter: grayscale(100%)来使缩略图显示为无颜色。有许多方法可以用相同的最终结果来实现它，但这里有一个js小提琴的链接，它演示了这个概念： https://jsfiddle.net/s3pLef9c/47/

要解释JS小提琴中发生的事情：基本上这个演示使用ng-click指令将.image-active类添加到基类为.image的元素。以下是这些类的样子：

.image{
  margin: 8px;
  display: inline-block;
  box-sizing: border-box;
  width: 20%;
  height: 100px;
  border: 8px solid #2c2c2f;
  background-color: #FEC10D; // change this to background-image or add an <img> tag inside the <div> tag and remove this line!
  filter: grayscale(100%);
}

.image-active{
  filter: grayscale(0%);
}

.image的基类使用filter: grayscale(100%)来初始设置图像没有颜色。当click事件发生时，.image-active类被添加到元素中，覆盖灰度过滤器到filter: grayscale(0%) and adding color. Then existing.image-active`类被删除。

根据你的问题，我不确定你是否希望默认情况下第一张图片处于活动状态，或者如果你想让它们全部为灰色启动，那么我在那里取得了自由，但我很乐意为你更新。

注意：此示例不使用图像，只应用背景颜色的<div>标记。但是，如果您只是删除颜色并添加背景图像，那么它应该适合您。

进一步解释：添加/删除CSS属性或类比基于应用程序状态交换图像源文件更容易，更快捷。当使用angular提供的ng-repeat和ng-class指令时，这变得更加容易，这里是文档的链接： https://docs.angularjs.org/api/ng/directive/ngClass

希望这可以帮助！

当AngularJS激活这个缩略图时，我们如何才能显示彩色活动缩略图？

问题描述投票：0回答：1

1个回答

最新问题

当AngularJS激活这个缩略图时，我们如何才能显示彩色活动缩略图？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1