Question

我认为我最好这样解释一下：

页面上有6张小图片，彼此相邻
用户点击其中一个
所有其他5个图像（用户点击的图像除外）的不透明度为0.7
将显示大版本的图像（已选择用户的图像）。（我有一个img标签，图像src将替换标签的src）

你能告诉我怎么办？我更喜欢使用JavaScript和Angular JS，但如果你需要它，如果你也使用JQuery也没问题。抱歉英语不好。谢谢 更新：有些用户问我尝试了什么...这是我的代码，我知道它不起作用......这就是为什么我要问你这个......

<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
   <!-- Adding meta information -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mohsen Nirouzad - http://AproZ.ir">
    <!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design -->
    <!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag -->
    <meta name="application-name" content="{{application_name}}">
    <meta name="description" content="{{description}}">
    <meta name="keywords" content="{{keywords}}">
    <meta name="publisher" content="{{googleplus_url}}">
    <meta charset="UTF-8">
    <title>{{page_title}}</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/w3rtl.min.css">
    <script src="assets/js/angular.min.js"></script>
</head>
   <body>
    <div data-ng-include="'variables/sidenav.html'"></div>
    <div style="margin-right:25%" class="w3-row-padding">
       <div class="w3-col s6">
           <div data-ng-include="'variables/logo1.html'"></div>
           <div class="w3-row-padding">
               <div class="w3-col">
                   <div class="w3-col s6">
                       <img src="{{img1}}" alt="{{img1_alt}}" title="{{img1_title}}"><br>
                       <img src="{{img2}}" alt="{{img2_alt}}" title="{{img2_title}}"><br>
                       <img src="{{img3}}" alt="{{img3_alt}}" title="{{img3_title}}">
                   </div>
                   <div class="w3-col s6">
                       <img src="{{img4}}" alt="{{img4_alt}}" title="{{img4_title}}"><br>
                       <img src="{{img5}}" alt="{{img5_alt}}" title="{{img5_title}}"><br>
                       <img src="{{img6}}" alt="{{img6_alt}}" title="{{img6_title}}">
                   </div>
               </div>
           </div>
           <div>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
              <a href="javascript:void(0)" hreflang="fa-IR">
                  <i class="fa fa-square-o"></i>
              </a>
           </div>
       </div>
       <div class="w3-col s6">

       </div>
       </div>
    <div data-ng-include="'variables/footer.html'"></div>
    <script>
        var application = angular.module('projects',[]);
        application.controller('projects_controller',function($scope){
        $scope.description='Some Description',
        $scope.keywords='key1,key2,key3',
        $scope.application_name='Sarabon',
        $scope.googleplus_url='#',
        $scope.page_title='پروژه ها'
    });
    </script>
</body>

</html>

Answer 1

一个解决方案是创建一个大的隐藏div，它占据整个屏幕并在其中创建一个img标签而不使用src属性。在“onClick”事件中（onClick用于js。我不知道角度处理点击的方式！），设置div可见（使用css“display property”）并将image的src设置为你想要的。全屏div的css可以是这样的：

.fullscreen{
  display:none;
  width:100%;
  height:100%;
  background-color: black;
  opacity: 0.8;
  position: absolute;
  left:0;
  top:0
  }

<div class = "fullscreen">
  <img src="#"/>
</div>

然后你只需要添加一些代码行来改变div的显示属性，并将img的src属性更改为你想要的。

Answer 2

使用ng-click设置范围变量，例如selectedImage，可以在ng-class和ng-src中用于大图片

// small image
<img ng-src="{{img1}}" 
     alt="{{img1_alt}}" 
     title="{{img1_title}}" 
     ng-click="selectImage(img1)"
     ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}"

>
// big image
<img ng-if="selectedImage" ng-src="selectedImage ">

在控制器中：

$scope.selectedImage = null;
$scope.selectImage=function(img){
   $scope.selectedImage = img;
}

单击缩略图并显示不透明度时显示大尺寸图像

2 个答案: