javascript - 获取原始背景图像 - JQuery

标签 javascript jquery html css animation

你好 我已经创建了简单的动画，但我需要在当前汽车离开时获取背景轮，还需要获取下一辆车的背景:
所以如果你点击车轮缩略图，车轮将被改变，但我需要当汽车开始离开时我需要恢复原来的车轮:

这是我的代码

$('.slectWheel img').click(function (e) {
    var currentWheel = $('.current .car__wheel').css('background-image');
    e.preventDefault();
    var getImgWheel = $(this).attr('src');
    $('.car .car__wheel').css('background-image','url(' + getImgWheel + ')');
    $('.current').addClass('whelrotateClick');
});

var $cars = $('.car');
$('.car-model').on('click', function () {
    var index = $(this).data('index');
    var $current = $cars.find('.current');
    var $next = $('[data-car-index="' + index + '"]').parent();

    $current.addClass('car--trans-out');
    setTimeout(function () {
        $('.car-image-container').removeClass('whelrotateClick');
        $current.removeClass('current').removeClass('car--trans-out');
        $next.addClass('current').addClass('car--trans-in');
        setTimeout(function () {
            $next.removeClass('car--trans-in');
        }, 1000)
    }, 1000);
})
.slectWheel{
    cursor:pointer;
    text-align:center;
}
.slectWheel img{
    display:inline-block;
}

.car-image{
}
.car{
    padding:40px 0;
}
.changeCarSelect{
    display:none;
    text-align:left;
}
.changeCarSelect span{
    display:inline-block;
    margin-right:4px;
    font-size:14px;
}
.selectContainer {
    width: 200px;
    padding: 10px 5px;
    display:inline-block;
    margin-bottom:30px;
    /*position:absolute;*/
    font-size: 14px;
    border:1px solid rgba(246, 246, 246, 0.89);
    outline:none;
    cursor:pointer;
}
.selectContainer option{
    padding:20px 2px;
}
.car div[class^='col']{
    padding:5px;
}
.car .car-model{
    width:100%;
    margin-bottom:30px;
    cursor:pointer;
}
.car .car-model h3{
    margin:0;
    padding:15px 10px;
    background-color
    color:#333;
    font-family:"Raleway", Arial, Tahoma;
    font-weight:700;
    font-size:18px;
    text-align:center;
}
.car .car-relative{
    position:relative;
    width:100%;
}
.car-image-container{
    position: absolute;
    left: 100%;
    overflow: hidden;
    /*border:1px solid;*/
}
.car-image-container img{
    margin:auto;
}
.current{
    position: relative;
    left: 0;
}
/*.current .current{
    left: 0;
}*/

.car .car-image .car__wheel{
    width:99px;
    height:100px;
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}
.car .car-image .car__wheel.left{
    background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
    top: 87px;
    left: 350px;
}
.car .car-image .car__wheel.right{
    background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
    top: 87px;
    right: 319px;
}
.car--trans-in .car__wheel{
   animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
   animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
   animation: trans-in 1s ease-out;
   animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image{
     animation: trans-out 1s ease-in;
     animation-fill-mode: forwards;
    -moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car__wheel{
   animation: roll-in 1s ease-out;
   -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car__wheel{
   animation: roll-out 1s ease-out;
    -moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.car--trans-in .car-image img {
    -moz-animation: bounce-in 1s ease-out;
    -o-animation: bounce-in 1s ease-out;
    -webkit-animation: bounce-in 1s ease-out;
    animation: bounce-in 1s ease-out;
    -moz-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car--trans-out .car-image img {
    animation: bounce-out 1s ease-in;
    -moz-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -o-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

@keyframes trans-in {
    0% {transform: translateX(150%);}
    80% {transform: translateX(0%);}
    100% {transform: translateX(0%);}
}
@keyframes trans-out {
    0% {transform: translateX(0%);}
    10% {transform: translateX(0%);}
    80% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes roll-in {
    0% {transform: rotate(0deg);}
    80% {transform: rotate(-720deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes roll-out {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes bounce-in {
    0% {transform: rotate(0deg);}
    5.67% {transform: rotate(0deg);}
    33% {transform: rotate(-0.5deg);}
    77.52% {transform: rotate(-0.5deg);}
    100% {transform: rotate(0deg);}
}
@keyframes bounce-out {
    0% {transform: rotate(0deg);}
    47.15% {transform: rotate(1deg);}
    100% {transform: rotate(1deg);}
}
/*==============
    Responsive Media Query
==============*/
/* ========================
    Note3, Note2, SIII, S5, Lumia950, Nexus5, Nokia N9 : 360px * 640px
    Iphone6: 375px * 667px
    lg optimus l70, Nexus4: 384px * 640px
    Nexus6, Nexus5X, Nexus6P: 412px * 732px
    Iphone6Plus: 414px * 736px
======================== */
@media only screen and (min-width: 310px) and (max-width:320px) {
    .car .car-image .car__wheel{
        width:46px;
        height:46px;
    }
    .car .car-image .car__wheel.left {
        top: 41px;
        left: 47px;
    }
    .car .car-image .car__wheel.right {
        top:39px;
        right:33px;
    }
}
@media only screen and (min-width: 330px) and (max-width:360px) {
    .car .car-image .car__wheel{
        width:55px;
        height:55px;
    }
    .car .car-image .car__wheel.left {
        top: 44px;
        left: 52px;
    }
    .car .car-image .car__wheel.right {
        top: 44px;
        right: 37px;
    }
}
@media only screen and (min-width: 361px) and (max-width:375px) {
    .car .car-image .car__wheel{
        width:52px;
        height:52px;
    }
    .car .car-image .car__wheel.left {
        top: 48px;
        left: 57px;
    }
    .car .car-image .car__wheel.right {
        top: 48px;
        right: 41px;
    }
}
@media only screen and (min-width: 380px) and (max-width:384px) {
    body{
        background-color:red;
    }
    .car .car-image .car__wheel{
        width:53px;
        height:53px;
    }
    .car .car-image .car__wheel.left {
        top: 50px;
        left: 58px;
    }
    .car .car-image .car__wheel.right {
        top: 50px;
       right: 41px;
    }
}
@media only screen and (min-width: 390px) and (max-width:414px) {
    
    .car .car-image .car__wheel{
        width:60px;
        height:60px;
    }
    .car .car-image .car__wheel.left {
        top: 52px;
        left: 62px;
    }
    .car .car-image .car__wheel.right {
        top: 52px;
        right: 43px;
    }
}
@media only screen and (min-width: 580px) and (max-width:600px) {
    .car .car-image .car__wheel{
        width:92px;
        height:92px;
    }
    .car .car-image .car__wheel.left {
        top: 77px;
        left: 88px;
    }
    .car .car-image .car__wheel.right {
        top: 77px;
        right: 60px;
    }
}
@media only screen and (min-width: 630px) and (max-width:640px) {
    .car .car-image .car__wheel{
        width:92px;
        height:92px;
    }
    .car .car-image .car__wheel.left {
        top: 84px;
        left: 98px;
    }
    .car .car-image .car__wheel.right {
        top: 84px;
        right: 66px;
    }
}
@media (max-width: 768px){
    .changeCarSelect{
        display:block;
    }
    .car-button{
        display:none;
    }
}
@media (min-width: 768px) and (max-width: 992px){
    .car .car-image .car__wheel.left {
        left:140px;

    }
    .car .car-image .car__wheel.right {
        right: 108px;
    }
}

@media (min-width: 992px) and (max-width: 1200px){
  .car .car-image .car__wheel{

    }
    .car .car-image .car__wheel.left {
        left:250px;
    }
    .car .car-image .car__wheel.right {
        right: 216px;
    }
}
.whelrotateClick .car__wheel{
    animation-name:animation;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
@keyframes animation {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="car">
        <div class="container">
            <div class="changeCarSelect">
                <span>Change Car</span>
                <select class="selectContainer">
                    <option class="selectCar" data-index="1">
                        Car modal
                    </option>
                    <option class="selectCar" data-index="2">
                        Car modal
                    </option>
                    <option class="selectCar" data-index="3">
                        Car modal
                    </option>
                </select>

            </div>
            <div class="car-button">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="row">
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="1">
                                    <h3>car modal</h3>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="2">
                                    <h3>car modal</h3>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-3 col-xs-6">
                                <div class="car-model" data-index="3">
                                    <h3>car modal</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="car-relative">
                        <div class="car-image-container current">
                            <div class="car-image" data-car-index="1">
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
                                <div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
                                <div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/148992740561243.png')"></div>
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="2">
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
                                <div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
                                <div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/14899275127831.png')"></div>
                            </div>
                        </div>
                        <div class="car-image-container">
                            <div class="car-image" data-car-index="3">
                                <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
                                <div class="car__wheel left" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
                                <div class="car__wheel right" style="background-image:url('http://store6.up-00.com/2017-03/149030743068171.png')"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="slectWheel">
                <img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
                <img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
                <img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
            </div>
        </div>
    </div>

请全屏运行代码片段

最佳答案

我想我已经按照你的要求修复了它......
现在，当汽车离开时，它会带着进入时的轮子离开。
(我想必须支付新轮子的费用!!!大声笑)

我绝对没有碰你的 HTML 或 CSS。

这是在 CodePen 中运行的脚本:

// Get wheels for all cars onload.
// It is an array of object (in case of two wheel model on the same car)
var carWheelArr=[];
$(".car-image").each(function(i){
  var leftWheel = $(this).find(".car__wheel").eq(0).css("background-image");
  var rightWheel = $(this).find(".car__wheel").eq(1).css("background-image");
  carWheelArr[i] = {};
  carWheelArr[i].left=leftWheel;
  carWheelArr[i].right=rightWheel;
});
//console.log(JSON.stringify(carWheelArr));

// Change wheels handler.
$('.slectWheel img').click(function (e) {
  console.log("Select wheel");
  var currentWheel = $('.current .car__wheel').css('background-image');
  e.preventDefault();
  var getImgWheel = $(this).attr('src');
  $(".current").find('.car__wheel').css('background-image','url(' + getImgWheel + ')');
  $('.current').addClass('whelrotateClick');
});

// Change car handler
var $cars = $('.car');
$('.car-model').on('click', function () {

  // Get current car.
  var currentCar=$(document).find(".current");
  // Get its car index (minus one to comply zero based array)
  var currentCarIndex=parseInt($(document).find(".current").children().first().attr("data-car-index"))-1;
  console.log("car#: "+currentCarIndex +" is leaving...");

  // Reset wheels.
  //console.log(carWheelArr[currentCarIndex].left);
  currentCar.find(".left").css({"background-image":carWheelArr[currentCarIndex].left})
  currentCar.find(".right").css({"background-image":carWheelArr[currentCarIndex].right})

  var index = $(this).data('index');
  var $current = $cars.find('.current');
  var $next = $('[data-car-index="' + index + '"]').parent();

  $current.addClass('car--trans-out');
  setTimeout(function () {
    $('.car-image-container').removeClass('whelrotateClick');
    $current.removeClass('current').removeClass('car--trans-out');
    $next.addClass('current').addClass('car--trans-in');
    setTimeout(function () {
      $next.removeClass('car--trans-in');
    }, 1000)
  }, 1000);
});

关于javascript - 获取原始背景图像 - JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42988112/

上一篇：Javascript - 拖拽和克隆 Javascript

下一篇：javascript - 这段 JavaScript 行实际上做了什么？

相关文章：

javascript - Handsontable:jquery 合并标题，水平滚动时的错误

javascript - 公开课来后如何去掉附加的h2标签？我正在努力，但没有工作

javascript - 为什么本地时间与 moment.js 中的 UTC 时间没有区别？

javascript - 如何使用javascript更改子元素的字体大小

javascript - 在调整大小时更改导航栏标题颜色

javascript - jquery 和 css 在同一浏览器窗口中呈现不同，具体取决于是通过 django 加载还是静态加载

javascript - 我想做一个简单的视频分享网站。我应该从哪里开始？

javascript - Cypress ，从 API 响应中读取数据

javascript - 如何根据 JavaScript 中的事件对象获取文件名？

jquery - AJAX 偶尔会失败，并且显然请求从未发送？

©2024 IT工具网  联系我们