Question

我需要使用jquery在.slide类中更改背景图片网址。我的HTML代码如下。它看起来像https://pathao.com主页滑块。

＆＃13;

<div class="slide show" style="background: linear-gradient(60deg,#224455,rgba(255, 186, 22, 0.5)), url('http://localhost/commercial/gomo/img/section01-background.png'); min-height: 600px; background-position: left center; background-size: cover;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8">
        <h1 id="heading">Have your own motorcycle? Want to be your own boss?</h1>
        <div id="answers">
          <ul class="ul_answer">
            <li><i class="far fa-clock "></i>Work whenever you are free</li>
            <li><i class="fas fa-money-check-alt "></i>Make enough money</li>
            <li><i class="fas fas fa-handshake "></i>Share your ride</li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form">
          <h4 id="sign-up">Sing up with GOMO</h4>
          <form action="" method="post">
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Name</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_name">
            </div>
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Phone Number</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_mobile">
            </div>
            <div class="form-group">
              <label for="inputState">Vehicle Type</label>
              <select id="inputState" class="form-control input-lg" name="vehicle_type" required>
                <option selected value="Car">Car</option>
                <option value="Bick">Bick</option>
                <option value="Bicyclek">Bicycle</option>
              </select>
            </div>
            <div id="submit_button" class="btn-group btn-group-justified">
              <div class="btn-group btn-group-lg">
                <button id="home_submit" type="submit" class="btn btn-default">SEND</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我需要使用jquery在.slide类中更改背景图片网址。我的HTML代码如下。它看起来像https://pathao.com主页滑块。

Answer 1

使用onscroll功能在滚动时更改img（如您附加的网站链接）

在此window.pageYOffset > 60设置您想要的数量

window.onscroll = function() {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2')
    if ( window.pageYOffset > 60 ) {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba2.jpg";
    } else {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba1.jpg";
    }
}

.rightPhotos
{
    max-width: 50%;
    height:50%;

    overflow: auto;
}
.aPhoto
{

    max-height: 100%;


}



.images
{
    width: 100%;
    height: 500px;
}

      <div class="other">
         <div class="rightPhotos" onscroll="myFunction()">
           <div class="aPhoto">
               <img class ="images" id="img1" src="https://material.angular.io/assets/img/examples/shiba1.jpg"  alt="Woman with Sunglasses"/>
   </div>

  </div>

 </div>

Answer 2

如果你想要保持线性渐变，这将是一个技巧。此外，我认为你想要某种事件，这将发生。我错了吗？

 When pressing the About button, the following information should be shown:
    iAuthorize DLL version: [Major].[Minor].[Bug].[0] 
    Workflow Script version:    [Major].[Minor].[Bug]
    Std. Template version:  [XXXXX VX or XXXXXX VX]

The HP XXXX XXXXX version should be the name of the item called "XXXXX Version" on the XXXXX project list.

使用jquery更改背景图像URL

2 个答案: