Question

我正在尝试使用jQuery获取owl carousel中的变换值。我尝试了很多代码，但我没有得到正确的解决方案。有人可以帮帮我吗？

以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Owl Carousel - Images Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
    <meta name="author" content="Bartosz Wojciechowski">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
    <link href="http://newtimes.ru/assets/css/bootstrapTheme.css" rel="stylesheet">
    <link href="http://newtimes.ru/assets/css/custom.css" rel="stylesheet">
    <!-- Owl Carousel Assets -->
    <link href="http://newtimes.ru/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="http://newtimes.ru/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- Prettify -->
    <link href="http://newtimes.ru/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <!-- Le fav and touch icons -->
  </head>
  <body>
    <div id="demo">
        <div class="container">
          <div class="row">
            <div class="span12">
              <div id="owl-demo" class="owl-carousel">
                <div class="item" data-rel="#dropdownmenu-1">1</div>
                <div class="item" data-rel="#dropdownmenu-2">2</div>
                <div class="item" data-rel="#dropdownmenu-3">3</div>
                <div class="item" data-rel="#dropdownmenu-4">4</div>
                <div class="item" data-rel="#dropdownmenu-1">5</div>
                <div class="item" data-rel="#dropdownmenu-3">6</div>
                <div class="item" data-rel="#dropdownmenu-2">7</div>
                <div class="item" data-rel="#dropdownmenu-4">8</div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script src="http://newtimes.ru/assets/js/jquery-1.9.1.min.js"></script> 
    <script src="http://newtimes.ru/owl-carousel/owl.carousel.js"></script>
    <!-- Demo -->
    <style>
    #owl-demo .item{
        margin: 3px;
    }
    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }
    </style>
</div>
    <script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
        autoPlay: 3000,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
      });
    });

    setTimeout(function(){
        $('#owl-demo .owl-wrapper').css({
            'transform': 'translate3d(0px, 0px, 0px)'
        });
    });

    $('#owl-demo .item').click(function(e) {
          var heightval= $(this).outerHeight();
           var posX = $(this).position().left,
           posY = $(this).position().top + heightval;
           $('.dropdown-menu').css({
                'display':'none',
            }); 
            var transformtarget= $('#owl-demo .owl-wrapper');
            var transformval=  getTransform(transformtarget);
            alert(transformval);
    });

    function getTransform(el) {
    var results = $(el).css('transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)
    if(!results) return [0, 0, 0];
    if(results[1] == '3d') return results.slice(2,5);
    results.push(0);
    return results.slice(5, 8);
}
    </script>
  </body>
</html>

感谢。

如何使用jQuery获取owl轮播中的变换值？

0 个答案: