在图像列表HTML / CSS / JQuery中调整所选图像的大小

时间：2019-03-20 08:55:41

标签： jquery html css

我有一个包含图像的列表，可以通过单击或箭头来选择。所选图像需要调整大小，并带有绿色边框。 这是我的代码：

    $("#book-list li").click(function(e) {
  var target = e.target;
  var src = target.src;
  console.log(src);
  
  //record which thumb was clicked
  $("#book-list li").removeClass("active"); //remove class
  $(this).addClass("active"); //apply class to selected thumb
});

//move next
$("#left-arrow").click(function() {
  if ($("#book-list li.active").next("#book-list li").length > 0) {
    $("#book-list li.active").next().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:first > img").trigger("click"); //go to first
  }
  return false;
});

//move previous 
$("#right-arrow").click(function() {
  if ($("#book-list li.active").prev("#book-list li").length > 0) {

    $("#book-list li.active").prev().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:last > img").trigger("click"); //go to end
  }
  return false;
});

//click the first thumb to begin
$("#book-list li:first > img").trigger("click");
.active {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}


.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="next" id="right-arrow">&larr;</a>
<a href="#" class="prev" id="left-arrow">&rarr;</a>

因此，现在只是边框变大了，而不是实际的图像。同样，当单击另一张图像时，旧的图像也必须恢复到正常大小。如果手动而不是通过箭头单击图像，则需要发生相同的事件。

2 个答案:

答案 0 :(得分：1)

我添加了一些thumb来放大- 10px，并将其黄色边框更改为绿色。 calc函数中的5px per side用于减去图像（.active .thumb { width: 100%; height: 100%; border: none; } ）周围的边框宽度。

enter image description here

我不清楚您是否只想 外部绿色边框，还是想要内部和外部边框（均为绿色）。

细边框 

.active .thumb {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-color: green;
}

enter image description here

粗边框 

$("#book-list li").click(function(e) {
  var target = e.target;
  var src = target.src;
  console.log(src);
  
  //record which thumb was clicked
  $("#book-list li").removeClass("active"); //remove class
  $(this).addClass("active"); //apply class to selected thumb
});

//move next
$("#left-arrow").click(function() {
  if ($("#book-list li.active").next("#book-list li").length > 0) {
    $("#book-list li.active").next().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:first > img").trigger("click"); //go to first
  }
  return false;
});

//move previous 
$("#right-arrow").click(function() {
  if ($("#book-list li.active").prev("#book-list li").length > 0) {

    $("#book-list li.active").prev().children( 'img' ).trigger("click");
  } else {
    $("#book-list li:last > img").trigger("click"); //go to end
  }
  return false;
});

//click the first thumb to begin
$("#book-list li:first > img").trigger("click");

演示（粗边框） 

.active {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}

.active .thumb {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-color: green;
}

.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="next" id="right-arrow">&larr;</a>
<a href="#" class="prev" id="left-arrow">&rarr;</a>
<ListView HasUnevenRows="True" x:Name="collectionView" HeightRequest="1000"
                  Margin="20">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout HeightRequest="50" Margin="10" WidthRequest="200">
                            <Label Text="{Binding Name}" FontSize="15" TextColor="Black"/>
                            <Label Text="{Binding Description}" FontSize="15" TextColor="Black"/>
                            <ListView HasUnevenRows="True" ItemsSource="{Binding appointments}" HeightRequest="1000" Margin="20,0,0,0">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <StackLayout HeightRequest="100" Margin="10" WidthRequest="200">
                                                <Label Text="{Binding Name}" FontSize="15" TextColor="Black"/>
                                                <Label Text="{Binding Subject}" FontSize="15" TextColor="Black"/>
                                            </StackLayout>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>  



 protected override void OnAppearing()
        {
            try
            {
                base.OnAppearing();
                var appointemntsList = new List<Appointment>()
                {
                    new Appointment() { Name="Mohamed",Subject="Sub"},
                    new Appointment() { Name="Mohamed",Subject="Sub"},
                    new Appointment() { Name="Mohamed",Subject="Sub"},
                    new Appointment() { Name="Mohamed",Subject="Sub"},
                };
                var Monkeys = new List<Appointment>()
                {
                    new Appointment() { Name="Ahmed", Description="Desc",appointments=appointemntsList},
                    new Appointment() { Name="Ahmed", Description="Desc",appointments=appointemntsList},
                    new Appointment() { Name="Ahmed", Description="Desc",appointments=appointemntsList},
                    new Appointment() { Name="Ahmed", Description="Desc",appointments=appointemntsList},

                };
                collectionView.ItemsSource = Monkeys;
            }
            catch (Exception)
            {
            }
        }

答案 1 :(得分：0)

问题是因为.active类放在父li上，所以您需要调整CSS，以根据新的边框和尺寸应用于子img。 li上的课程：

li.active .thumb {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}

还请注意，您可以将通用逻辑提取到其自己的函数中，然后直接调用它而不是触发事件。您还会在箭头ID中以错误的方式绕过“左”和“右”。试试这个：

$("#book-list li").click(function(e) {
  setActiveLi($(this));
});

function setActiveLi($el) {
  $("#book-list li").removeClass("active");
  $el.addClass("active");
}

$(".arrow").click(function(e) {
  e.preventDefault();
  var $target = $("#book-list li.active")[$(this).data('dir')]("li");
  if ($target.length === 0)
    $target = $("#book-list li")[$(this).data('dir') == 'next' ? 'first' : 'last']();
  setActiveLi($target);
});

$("#book-list li:first").addClass('active');
.book-list {
  display: inline;
}

.book {
  float: left;
  list-style: none;
  margin: 2px;
}

.thumb {
  border: 5px solid yellow;
  width: 30px;
  height: 30px;
}
li.active .thumb {
  border: 5px solid green;
  width: 50px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<br>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/100x100&text=G" />
  </li>
</ul>
<br>
<a href="#" class="arrow next" data-dir="prev">&larr;</a>
<a href="#" class="arrow prev" data-dir="next">&rarr;</a>

相关问题
最新问题