允许href锚旋转旋转木马除了使用默认行为＆＃34;最小3D透视旋转木马与jQuery CSS3 3D Carousel＆＃34;

时间：2018-05-14 06:09:18

标签： javascript jquery html css html5

我将如何按照主题要求进行操作？

如上所述，我使用Minimal 3D Perspective Carousel with jQuery CSS3 3D Carousel。 请参考以下代码：

＆＃13;
＆＃13; 
/*
     * Flux 3D Carousel
     * Author: Dean Coulter
     * Licensed under the MIT license
     * 
     * Version 0.1
     */

    (function($) {
      $.fn.carousel3d = function(args) {

        var el = ({
          carousel_frame: $(this)
        });

        var size = el.carousel_frame.children().size();
        var panelSize = el.carousel_frame.width();
        var translateZ = Math.round((panelSize / 2) / Math.tan(Math.PI / size));

        el.carousel_frame.css({
          "transform": "rotateY(0deg) translateZ(-" + translateZ + "px)"
        })

        var rotateY = 0;
        var rotate_int = 0;
        var ry = 360 / size;
        var box = 0;

        function animate_slider() {
          rotateY = ry * rotate_int;
          $("#test").text(rotateY + ", " + rotate_int + ", ");

          for (i = 0; i < size; i++) {
            var z = (rotate_int * ry) + (i * ry);
            el.carousel_frame.children("figure:eq(" + i + ")").css({
              "transform": "rotateY(" + z + "deg ) translateZ(" + translateZ + "px)"
            });
          }

          rotateY = 0;
          box = 0; // reset rotateY, ready for re-use
        }

        animate_slider();

        $(".next").on("click", function() {
          rotate_int -= 1;
          animate_slider();
        });

        $(".prev").on("click", function() {
          rotate_int += 1;
          animate_slider();
        });

        el.carousel_frame.children().on("click", function() {
          new_int = -1 * $(this).index();
          if (new_int < rotate_int + (-1 * (size / 2))) {
            rotate_int = size + new_int;
          } else {
            rotate_int = new_int;
          }

          animate_slider();
        });

      }
    })(jQuery);
＆＃13; 
#perspective {
      margin: 0 auto;
      margin-top: 80px;
      width: 210px;
      height: 140px;
      position: relative;
      -webkit-perspective: 1100px;
      perspective: 1100px;
    }

    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -webkit-transform: rotateY(0deg) translateZ(-288px);
    }

    #carousel figure {
      display: block;
      position: absolute;
      background: #2ecc71;
      width: 186px;
      height: 116px;
      opacity: 0.6;
      margin: 12px;
      color: #fff;
      cursor: pointer;
      -webkit-transition: opacity 1s, -webkit-transform 1s;
      -moz-transition: opacity 1s, -moz-transform 1s;
      -o-transition: opacity 1s, -o-transform 1s;
      transition: opacity 1s, transform 1s;
    }
＆＃13; 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!DOCTYPE HTML>
    <!--[if lt IE 7]> <html class=" lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class=" lt-ie9 lt-ie8" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class=" lt-ie9" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html lang="en">
    <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>jQuery 3D Carousel Demo</title>
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="css/style.css">

      <!--[if lt IE 9]>
        	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        	<![endif]-->
      <script type="text/javascript">
        $(document).ready(function() {
          $('#carousel').carousel3d();
        });
      </script>
      <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    </head>

    <body>
      <div id="jquery-script-menu">
        <div class="jquery-script-center">
          <ul>
            <li><a href="http://www.jqueryscript.net/rotator/Minimal-3D-Perspective-Carousel-with-jQuery-CSS3-3D-Carousel.html">Download This Plugin</a></li>
            <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
          </ul>
          <div class="jquery-script-ads">
            <script type="text/javascript">
              <!--
              google_ad_client = "ca-pub-2783044520727903";
              /* jQuery_demo */
              google_ad_slot = "2780937993";
              google_ad_width = 728;
              google_ad_height = 90;
              //-->
            </script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
          </div>
          <div class="jquery-script-clear"></div>
        </div>
      </div>
      <h2 align="center" style="margin-bottom:25px;margin-top:15px;">jQuery 3D Carousel Demo</h2>
      <div id="container">
        <div id="perspective">
          <div id="carousel">
            <figure id="01" name="01">1</figure>
            <figure id="02" name="02">2</figure>
            <figure id="03" name="03">3</figure>
            <figure id="04" name="04">4</figure>
            <figure id="05" name="05">5</figure>
            <figure id="06" name="06">6</figure>
            <figure id="07" name="07">7</figure>
            <figure id="08" name="08">8</figure>
            <figure id="09" name="09">9</figure>
            <figure id="10" name="10">10</figure>
          </div>
        </div>

      </div>
      <footer align="center">
        <div class="links">
          <a href="#01">Slide 01</a>
          <a href="#02">Slide 02</a>
          <a href="#03">Slide 03</a>
          <a href="#04">Slide 04</a>
          <a href="#05">Slide 05</a>
          <a href="#06">Slide 06</a>
          <a href="#07">Slide 07</a>
          <a href="#08">Slide 08</a>
          <a href="#09">Slide 09</a>
          <a href="#10">Slide 10</a>
        </div>
      </footer>
      <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36251023-1']);
        _gaq.push(['_setDomainName', 'jqueryscript.net']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script');
          ga.type = 'text/javascript';
          ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(ga, s);
        })();
      </script>
    </body>

    </html>
＆＃13;
＆＃13;
＆＃13;

正如您在上面的帖子中所看到的，我尝试过使用页面锚点，以及编辑＆＃34; Flux 3D Carousel＆＃34;上面的javascript无济于事。

1 个答案:

答案 0 :(得分：1)

你可以像对旋转木马元素那样做。

以下是一个工作示例 

/*
 * Flux 3D Carousel
 * Author: Dean Coulter
 * Licensed under the MIT license
 * 
 * Version 0.1
 */

(function($) {
  $.fn.carousel3d = function(args) {

    var el = ({
      carousel_frame: $(this)
    });

    var size = el.carousel_frame.children().size();
    var panelSize = el.carousel_frame.width();
    var translateZ = Math.round((panelSize / 2) / Math.tan(Math.PI / size));

    el.carousel_frame.css({
      "transform": "rotateY(0deg) translateZ(-" + translateZ + "px)"
    })

    var rotateY = 0;
    var rotate_int = 0;
    var ry = 360 / size;
    var box = 0;

    function animate_slider() {
      rotateY = ry * rotate_int;
      $("#test").text(rotateY + ", " + rotate_int + ", ");

      for (i = 0; i < size; i++) {
        var z = (rotate_int * ry) + (i * ry);
        el.carousel_frame.children("figure:eq(" + i + ")").css({
          "transform": "rotateY(" + z + "deg ) translateZ(" + translateZ + "px)"
        });
      }

      rotateY = 0;
      box = 0; // reset rotateY, ready for re-use
    }

    animate_slider();

    $(".next").on("click", function() {
      rotate_int -= 1;
      animate_slider();
    });

    $(".prev").on("click", function() {
      rotate_int += 1;
      animate_slider();
    });

    el.carousel_frame.children().on("click", function() {
      new_int = -1 * $(this).index();
      if (new_int < rotate_int + (-1 * (size / 2))) {
        rotate_int = size + new_int;
      } else {
        rotate_int = new_int;
      }

      animate_slider();
    });

    $(".links a").on("click", function(e) {
      e.preventDefault();
      var num = parseInt($(this).attr("href").substr(1)) - 1;
      rotate_int = -1 * num;
      animate_slider();
    });

  }
})(jQuery);
#perspective {
  margin: 0 auto;
  margin-top: 80px;
  width: 210px;
  height: 140px;
  position: relative;
  -webkit-perspective: 1100px;
  perspective: 1100px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) translateZ(-288px);
}

#carousel figure {
  display: block;
  position: absolute;
  background: #2ecc71;
  width: 186px;
  height: 116px;
  opacity: 0.6;
  margin: 12px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  -o-transition: opacity 1s, -o-transform 1s;
  transition: opacity 1s, transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class=" lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class=" lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class=" lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>jQuery 3D Carousel Demo</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">

  <!--[if lt IE 9]>
        	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        	<![endif]-->
  <script type="text/javascript">
    $(document).ready(function() {
      $('#carousel').carousel3d();
    });
  </script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="jquery-script-menu">
    <div class="jquery-script-center">
      <ul>
        <li><a href="http://www.jqueryscript.net/rotator/Minimal-3D-Perspective-Carousel-with-jQuery-CSS3-3D-Carousel.html">Download This Plugin</a></li>
        <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
      </ul>
      <div class="jquery-script-ads">
        <script type="text/javascript">
          <!--
          google_ad_client = "ca-pub-2783044520727903";
          /* jQuery_demo */
          google_ad_slot = "2780937993";
          google_ad_width = 728;
          google_ad_height = 90;
          //-->
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
      </div>
      <div class="jquery-script-clear"></div>
    </div>
  </div>
  <h2 align="center" style="margin-bottom:25px;margin-top:15px;">jQuery 3D Carousel Demo</h2>
  <div id="container">
    <div id="perspective">
      <div id="carousel">
        <figure id="01" name="01">1</figure>
        <figure id="02" name="02">2</figure>
        <figure id="03" name="03">3</figure>
        <figure id="04" name="04">4</figure>
        <figure id="05" name="05">5</figure>
        <figure id="06" name="06">6</figure>
        <figure id="07" name="07">7</figure>
        <figure id="08" name="08">8</figure>
        <figure id="09" name="09">9</figure>
        <figure id="10" name="10">10</figure>
      </div>
    </div>

  </div>
  <footer align="center">
    <div class="links">
      <a href="#01">Slide 01</a>
      <a href="#02">Slide 02</a>
      <a href="#03">Slide 03</a>
      <a href="#04">Slide 04</a>
      <a href="#05">Slide 05</a>
      <a href="#06">Slide 06</a>
      <a href="#07">Slide 07</a>
      <a href="#08">Slide 08</a>
      <a href="#09">Slide 09</a>
      <a href="#10">Slide 10</a>
    </div>
  </footer>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();
  </script>
</body>

</html>

相关问题
最新问题