Question

我有一个项目需要使用带有3D悬停效果的图片幻灯片，所以我使用Flexslider和3d悬停效果代码

var move = $(".slider");
$(document).on("mousemove",function(e) {  
  var ax = -($(window).innerWidth()/2- e.pageX)/300;
  var ay = ($(window).innerHeight()/2- e.pageY)/285;
  move.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");    

});

但结果是3D悬停效果正常工作但滑块中的任何链接按钮都不起作用（导航下一个并且上一个不起作用且分页圈不起作用）

这是我的完整代码

<body class="loading">

  <div id="container" class="cf">
  <div id="main" role="main">

      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
          </ul>
        </div>
        <div class="custom-navigation">
          <a href="#" class="flex-prev">Prev</a>
          <div class="custom-controls-container"></div>
          <a href="#" class="flex-next">Next</a>
        </div>
      </section>
    </div>

  </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){

      var move = $(".slider");
        $(document).on("mousemove",function(e) {  
          var ax = -($(window).innerWidth()/2- e.pageX)/40;
          var ay = ($(window).innerHeight()/2- e.pageY)/25;
          move.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");    

        });

      $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: $(".custom-controls-container"),
        customDirectionNav: $(".custom-navigation a"),
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>

接下来，prev和导航无效，是因为它们是附加标签吗？

Javascript mousedown与css悬停或链接无法正常工作

0 个答案: