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

当AngularJS处于活动状态时，如何以彩色显示活动缩略图？

0 个答案: