Question

我在图像上方有图标，如下所示。

的index.php

<div class="container-fluid" >
    <h1 id="service" data-animate="fadeInLeft" data-delay="200">Our Services</h1>
    <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img" id="services_img">
        <p class="service_p" id="p" style="padding-bottom: 2px;"></p>
        <h1 class="service_head" id="desc"></h1>
        <section class="customer-logos slider" style="top: 35%;padding-left: 50px;" id="service_images">
            <div class="slide">
                <img class="image_service contrast" id="image_service_1" src="images/services_icons/drafting.png" alt="drafting" onclick="desc1()">
                <div class="head_service" style="color:white;margin-left: -10px;">Drafting Services</div>
            </div>

            <div class="slide"><img class="image_service" id="image_service_2" src="images/services_icons/Emerging market penetration.png" alt="Emerging market penetration" onclick="desc2()">
                <div class="head_service" style="color:white;margin-left: -15px;">Emerging market<br><span id="penetrate" style="margin-left: 15px;">penetration</span></div>
            </div>

            <div class="slide"><img class="image_service" id="image_service_3" src="images/services_icons/Engineering analytics.png" alt="Engineering analytics" onclick="desc3()">
                <div class="head_service" id="engg_analytics" style="color:white;margin-left: -15px;">Engineering Analytics</div>
            </div>

            <div class="slide"><img class="image_service" id="image_service_4" src="images/services_icons/Industrial IoT.png" alt="Industrial IoT" onclick="desc4()">
                <div class="head_service" style="color:white;margin-left: -5px;">Industrial IoT</div>
            </div>

            <div class="slide"><img class="image_service" id="image_service_5" src="images/services_icons/Life cycle.png" alt="Life cycle" onclick="desc5()">
                <div class="head_service" style="color:white;margin-left: -2px;">Life Cycle</div>
            </div>

text.css

  .bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
  opacity: .6;
}

text.js

  $('#image_service').click(function() {
    $('#image_service').animate({
    'marginTop' : "-=30px" //moves up
    });
});

我需要一个解决方案： 当我点击图标时，它应该移动到中心。我可以移动图标，但它并没有完全符合我的需要。

先谢谢你!!

Answer 1

需要在图标点击上实现简单的jquery代码。

CSS：

.iconOne { position:relative }
.iconOne.centered { top:-100px; }

JS：

$(".iconOne").click(function(e) {
   $(this).addClass("centered");
});

评论这是否是你想要的。

由于

图标以点击为中心

1 个答案: