• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        HTML5自定義元素播放焦點圖動畫的實現

          發布時間:2019-09-25 16:00:44   作者:前沿技術   我要評論
        這篇文章主要介紹了HTML5自定義元素播放焦點圖動畫的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        這是一款基于HTML5的焦點圖動畫,它和其他焦點圖不同的地方在于,它播放的不僅僅是圖片,而是可以自定義控制的網頁元素。它不僅在圖片間切換有過渡動畫效果,而且在切換時圖片中的元素也將出現動畫效果,比如圖中的文字移動、打散、重新組合等。這款HTML5動畫圖片播放器算得上是高端大氣上檔次。

        HTML代碼

        <div class="parallax-bg" id="slider-wrap">
            <div class="slider parallax-bg" id="slider">
                   <div class="slider-sections sandbox"> 
                <section class="first">
                             <img alt="Kendo UI" src="images/home-banner-1.png"/>
                             <div class="text">
                                  <h2>SmartSite Ver 2.2<br />智能網站管理系統 </h2>
                                  <p class="copy">采用前后臺完全分離技術,通過標簽(支持標簽循環嵌套、判斷標簽、自定義標簽、文件循環嵌套等)加模板技術.全站生成純靜態頁。</p>
                                  <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                             </div>
                        </section>
                <section>
                             <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />
                             <div class="text" style="padding-top: 10px;">
                                  <h2>企業網站管理系統</h2>
                                  <p class="copy">單頁面、單頁面索引、新聞、產品展示、下載、友情鏈接、網上商城,在線支付、配送、支付方式管理、廣告等模塊。</p>
                                  <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                             </div>
                        </section>
                <section>
                             <img src="images/home_banner_web-q2.png" alt="Kendo UI" />
                             <div class="text">
                                  <h2>智能移動網站管理系統</h2>
                                  <p class="copy">基于jquery.Mobile、HTML5技術框架,前后臺完全分離,采用標簽加模板技術,全站生成純靜態頁。</p>
                                  <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                             </div>
                        </section>
                   </div>
              </div>
              <a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a>
        

        CSS代碼:

        這里列出的是這個焦點圖相關的核心CSS代碼。

        .slider section {display: none;}
        .slider section.first {display: block;}
        
        .slider-sections, .slider-sections section {width: 861px; height: 335px;}
        
        .slider-sections {margin: 0 auto; position: relative;}
        .slider-sections section {position: absolute; top: 0; left: 0px; }
        
        .header-content h2 
        {
            font:400 32px/1.2 "microsoft yahei", Tahoma, arial, sans-serif;
            color: #fff;
            margin: 0 0 26px;
        }
        .header-content p 
        {
            margin: 0 0 30px;
        }
        
        .header-content .centered-content
        {
            padding-top: 30px;
            padding-bottom: 10px;
        }
        
        .button {
            float: left;
            width: auto !important;
            list-style: none;
        }
            .button a,
            .button button,
            .button input { /* Standard black button */
              font-size: 15px;
              /*font-family: 'lucida sans',arial,helvetica,sans-serif;*/
              line-height: 18px;
                color: #fff !important;
        
              text-decoration: none;
        
              padding: 5px 14px 6px 13px;
                display: block;
                width: auto;
                position: relative;
                z-index: 2;
        
                border: none;
                -moz-border-radius: 3px;
                border-radius: 3px;
                cursor: pointer;
        
                background: #313131; /* Old browsers */
                background: -moz-linear-gradient(top, #313131 0%, #222222 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top, #313131 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #313131 0%,#222222 100%); /* Opera11.10+ */
                background: -ms-linear-gradient(top, #313131 0%,#222222 100%); /* IE10+ */
                background: linear-gradient(top, #313131 0%,#222222 100%); /* W3C */
        
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all  0.3s ease;
            }
        
            .button a:hover,
            .button input:hover,
            .button button:hover,
            .button a:focus,
            .button input:focus,
            .button button:focus
            {
              background: #464646; /* Old browsers */
                background: -moz-linear-gradient(top, #464646 0%, #393939 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top, #464646 0%,#393939 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top, #464646 0%,#393939 100%); /* Opera11.10+ */
                background: -ms-linear-gradient(top, #464646 0%,#393939 100%); /* IE10+ */
                background: linear-gradient(top, #464646 0%,#393939 100%); /* W3C */
            }
        
            header .header-content .button a,
            #content .button a:hover
            {
                text-decoration: none;
            }
        
        .header-content .beta-ribbons {
            position: absolute; 
            height: 120px;
            width: 85px;
            text-indent: -200px;
            overflow: hidden;
            background: url(../images/kendo-ribbons.png) no-repeat 0 0;
        }
        
        .header-content .beta-ribbons.ribbon-1 {
            background-position: -170px 0;
            top: -3px;
            right: -145px;
        }
        
        .header-content p.copy .beta-ribbons.ribbon-1 {
            top: -135px;
            left: 900px;
        }
        
        .header-content .beta-ribbons.ribbon-4 {
            background-position: -255px 0;
            left: -62px;
            top: -30px;
            z-index: 10;
                text-indent: -2000px;
        }
        JavaScript代碼:
        下面是這個焦點圖插件的代碼。
        
        /**
        * @author Alexander Farkas
        * v. 1.22
        */
        (function ($)
        {
            if (!document.defaultView || !document.defaultView.getComputedStyle)
            { // IE6-IE8
                var oldCurCSS = $.curCSS;
                $.curCSS = function (elem, name, force)
                {
                    if (name === 'background-position')
                    {
                        name = 'backgroundPosition';
                    }
                    if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name])
                    {
                        return oldCurCSS.apply(this, arguments);
                    }
                    var style = elem.style;
                    if (!force && style && style[name])
                    {
                        return style[name];
                    }
                    return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
                };
            }
        
            var oldAnim = $.fn.animate;
            $.fn.animate = function (prop)
            {
                if ('background-position' in prop)
                {
                    prop.backgroundPosition = prop['background-position'];
                    delete prop['background-position'];
                }
                if ('backgroundPosition' in prop)
                {
                    prop.backgroundPosition = '(' + prop.backgroundPosition;
                }
                return oldAnim.apply(this, arguments);
            };
        
            function toArray(strg)
            {
                strg = strg.replace(/left|top/g, '0px');
                strg = strg.replace(/right|bottom/g, '100%');
                strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
                var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
                return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]];
            }
        
            $.fx.step.backgroundPosition = function (fx)
            {
                if (!fx.bgPosReady)
                {
                    var start = $.curCSS(fx.elem, 'backgroundPosition');
                    if (!start)
                    {//FF2 no inline-style fallback
                        start = '0px 0px';
                    }
        
                    start = toArray(start);
                    fx.start = [start[0], start[2]];
                    var end = toArray(fx.end);
                    fx.end = [end[0], end[2]];
        
                    fx.unit = [end[1], end[3]];
                    fx.bgPosReady = true;
                }
                //return;
                var nowPosX = [];
                nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
                nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
                fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];
        
            };
        })(jQuery);
        
        /*
        tlrkSlider
        
          example usage:
        
            $("#slider").tlrkSlider({
              autoStart: false,
              elements: {
                "img": {delay: 10},
                "h2": {delay: 500},
                ".copy": {delay: 800},
                ".button": {delay: 1000}
              }
            });
        
          to go to a specific frame:
            $("#slider").tlrkSlider("go", position);
            "position" can have one of the following values:
            "next", "prev", "first", "last", "+1", "-1" or a numeric value
        
          to start/stop the automatic loop:
            $("#slider").tlrkSlider("start");
            $("#slider").tlrkSlider("stop");
        
          to change the delay between automatic transitions:
            $("#slider").tlrkSlider("option", "delayAnimation", 1000);
        
          to change any option:
            $("#slider").tlrkSlider("option", option_name, option_value);
        
          Changing the "elements" object is not tested.
        
          Changing the following options: "navigation", "navigationClass", "framesSelector", "autoStart" won't have any effect for now.
          They are used only during the initialization.
        
          $("#slider").data("tlrkSlider") will return the plugin instance and the methods/properties can be accessed from there.
        
          The plugin contructor defaults are accessable through TlrkSlider.defaults
        
          The function that actually sweep the elements in/out can be overriden from
            TlrkSlider.prototype._animationIn and TlrkSlider.prototype._animationOut
        
            See sweepIn/sweepOut 
        
         */
        
        ;(function( $, window, document, undefined ){
        
          // utility function that generates the "dots" navigation
          function generateNavigation($el, count, config) {
            var i, html = "",
                width = count * 24;
        
            html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>";
            for (i = 0; i < count; i++) {
              html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>";
            }
            html += "</ol>";
        
            $el.append(html);
          }
        
          function sweepOut($el, windowWidth) {
            var dfr = $.Deferred(),
                pos = $el.position(),
                width = $el.width(),
                delta, final,
                options = $el.data("tlrkAnimOptions");
        
            windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it
        
            delta = windowWidth - pos.left;
            final = -(delta);
        
            setTimeout(function(){
              $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){
                dfr.resolve();
              });
            }, options.delay);
        
            return dfr.promise();
          }
        
          function sweepIn($el, windowWidth, frameLeft) {
            var dfr = $.Deferred(),
                options = $el.data("tlrkAnimOptions"),
                positionData = $el.data("tlrkOriginalPos"),
                final = positionData.position.left,
                rightEdge;
        
            windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it
        
            $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen
            $el.css("left", function(current){
              return current + windowWidth - frameLeft;
            });
        
            setTimeout(function(){
              $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){
                dfr.resolve();
              });
            }, options.delay);
        
            return dfr.promise();
          }
        
          // two pass function that first iterates all the elements and gets their position/width/height
          // and then sets their position to absolute
          function absolutize($elements) {
        
            // todo - move it to separate function and do it just once
            // gather the original position/dimension data for all elements
            $elements.each(function(){
              var $t = $(this);
        
              if ($t.data("tlrkOriginalPos")) return
        
              $t.data("tlrkOriginalPos", {
                position: $t.position(),
                width: $t.width(),
                height: $t.height(),
                css_pos: $t.css("position"),
                css_left: $t.css("left"),
                css_top: $t.css("top"),
                css_width: $t.css("width") || "auto",
                css_height: $t.css("height") || "auto"
              });
        
            });
        
            // set the absolute position
            $elements.each(function(){
              var $t = $(this),
                  opos = $t.data("tlrkOriginalPos");
        
              $t.css({
                position: "absolute",
                left: opos.position.left,
                top: opos.position.top,
                width: opos.width,
                height: opos.height
              });
            });
          }
        
          function restoreFrameElements($elements) {
            $elements.each(function(){
              var $t = $(this),
                  opos = $t.data("tlrkOriginalPos");
        
              if (!opos) return
        
              $t.css({
                position: opos.css_pos,
                left: opos.css_left,
                top: opos.css_top,
                width: opos.css_width,
                height: opos.css_height
              });
            });
        
          }
        
          var TlrkSlider = function( elem, options ){
              this.elem = elem;
              this.$elem = $(elem);
              this.options = options;
            };
        
          // the plugin prototype
          TlrkSlider.prototype = {
            defaults: {
        
              defaultElementOptions: {
                speed: 1200,
                easing: "easeInOutBack",
                // interval before the element starts moving when the fadeIn/Out functions are called
                // it's a good idea to give different delays for the different elements
                // if all have the same delay they'll start moving all together
                delay: 100 
              },
        
              // dispose elements are these that are not included in the elements object
              // but affect the document flow and will be fadedIn/Out
              disposeDelay: 100, // delay for the dispose elements
              disposeSpeed: 1000, // how quickly they'll fadeOut/In
        
              delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn
              delayAnimation: 7000, // time between auto changing the current frame
        
              loop: true, // if true when clicking next on the last frame the slider jumps to the first one
        
              autoStart: true, // start the automatic looping through the frames on init
        
              framesSelector: "section", // selector for the frames inside the slider
        
              elements: {
                "p": {delay: 100, speed: 1000, easing: "easeInOutBack"}
              },
        
              navigation: true, // the dots navigation on the bottom
              navigationClass: "slider-nav",
        
              // callbacks
              // another way to "catch" these events is with
              // $(-slider-element-).bind("animationStart")
              animationStart: null,
              animationEnd: null
            },
        
            init: function() {
              var c, e, element, $element,
                  that = this,
                  $firstFrame;
        
              c = this.config = $.extend({}, this.defaults, this.options);
        
              this.elem.style.position = "relative"; // make the wrapping element relative
        
              // basics
              this.$frames = this.$elem.find(c.framesSelector);
              this.framesCount = this.$frames.length;
              this.currentFrame = 0;
              this.queue = [];
        
              this._$elementsByFrame = {};
              this._$disposeElementsByFrame = {};
        
              for (i = 0; i < this.framesCount; i++) {
                this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame
                this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame
              }
        
              if (c.navigation) {
                generateNavigation(this.$elem, this.framesCount, c);
                this.$navigation = this.$elem.find("."+c.navigationClass);
              }
        
              // bindings
              this.$elem.find(".slider-nav").delegate("a", "click", function(e){
                var frame = this.getAttribute("href").split("#")[1];
                that.go.call(that, frame);
                return false;
              });
        
              this.$elem // internal bindings for the callbacks
                .bind("animationStart", function(){
                  if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);}
                })
                .bind("animationEnd", function(){
                  if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);}
                })
              ;
        
              // start animation?
              if (c.autoStart) {
                this.start();
              } else {
                this.running = false;
              }
        
              return this;
            },
        
            start: function(instant) {
              var that = this;
        
              if (this.timer) { // we'll clear the current timer
                window.clearTimeout(this.timer);
              }
        
              this.running = true;
        
              if (instant) {
                that.nextFrame();
              } else {
                this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation);
              }
            },
        
            stop: function() {
              if (!this.running) return; // we are not running
        
              this.running = false;
              window.clearTimeout(this.timer);
            },
        
            // main function for changing frames
            selectFrame: function(frame, dfr) {
              var c = this.config, // shorthand for the config
                  that = this,
                  dfr = dfr || $.Deferred(),
                  dFadeIn = $.Deferred(),
                  dFadeOut = $.Deferred();
        
              if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) {
                dfr.reject();
                return dfr.promise();
              }
        
              // clear the animation loop interval if the animation is running
              if (this.running && this.timer) { 
                window.clearTimeout(this.timer);
              }
        
              // check if we are currenly running an animation.
              if (this.animated && this.queue.length > 0) {
                // wait for the last item in the queue to finish
                this.queue[this.queue.length-1].done(function(){
                  that.selectFrame(frame, dfr); // and call again the selectFrame
                })
                return dfr.promise();
              }
        
              this.animated = true;
              this.$elem.trigger("animationStart", [this, frame]);
        
              this.queue.push(dfr);
        
              // fade the frames
              dFadeOut = this._fadeOutFrame(this.currentFrame);
        
              // hide the fadetout frame
              dFadeOut.done(function(){
                that.$frames.eq(that.currentFrame).hide();
              });
        
              window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame
                dFadeIn = that._fadeInFrame.call(that, frame).done(function(){
                  // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise
                  $.when(dFadeOut, dFadeIn).done(function(){
                    that.animated = false;
                    that.queue.shift();
                    that.$elem.trigger("animationEnd", [that]);
                    that.currentFrame = frame;
                    dfr.resolve();
                  });
                });
              }, c.delayBetweenTransition);
        
              // navigation html change
              if (this.config.navigation) {
                this.$navigation.find(".selected").removeClass("selected").end()
                  .find("a").eq(frame).addClass("selected");
              }
        
              dfr.done(function(){ // we'll resume the loop animation after the transitions are done
                if (that.running) {
                  that.start();
                }
              });
        
              return dfr.promise();
            },
        
            _fadeFrame: function(frame, callback, direction) {
              var dfr = $.Deferred(),
                  $frame = this.$frames.eq(frame),
                  $elements = this._$elementsByFrame[frame],
                  windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element 
                  i, len,
                  that = this,
                  elementAnimations = [],
                  $disposeElements = this._$disposeElementsByFrame[frame],
                  $affectedElements,
                  frameLeft = $frame.offset().left;
        
              direction = direction || "out";
        
              if (!$.isFunction(callback)) return; // do nothing if there's no callback passed
        
              $affectedElements = $elements.add($disposeElements);
        
              // position absolute the animation and dispose elements
              absolutize($affectedElements);
        
              // toggle the dispose elements
              if ($disposeElements.length > 0) {
                window.setTimeout(function(){
                  $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed);
                }, this.config.disposeDelay);
              }
        
              // invoke the callback for each element
              // the callback must return a promise
              $elements.each(function(){
                elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) );
              });
        
              // wait for all the elements to finish their animation
              $.when.apply(this, elementAnimations).done(function(){
                //restoreFrameElements($affectedElements); // and restore the elements' position
                dfr.resolve(); // resolve the fade function
              });
        
              return dfr.promise();
            },
        
            _fadeOutFrame: function(frame) {
              var dfr = $.Deferred(),
                  $frame = this.$frames.eq(frame),
                  $disposeElements = this._$disposeElementsByFrame[frame];
        
              this._fadeFrame(frame, this._animationOut, "out").done(function(){
                dfr.resolve();
              })
        
              return dfr.promise();
            },
        
            _fadeInFrame: function(frame) {
              var dfr = $.Deferred(),
                  $frame = this.$frames.eq(frame),
                  $elements = this._$elementsByFrame[frame];
        
              this._restoreFrame(frame);
        
              $frame.show();
        
              this._fadeFrame(frame, this._animationIn, "in").done(function(){
                dfr.resolve();
              });
        
              return dfr.promise();
            },
        
            _restoreFrame: function(frame){
              if (!frame) return
              restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) );
            },
        
            nextFrame: function() {
              var frame = this.currentFrame+1,
                  dfr = $.Deferred();
        
              if (frame > this.framesCount-1) {
                if (this.config.loop) {
                  frame = 0;
                } else {
                  dfr.reject();
                }
              };
        
              this.selectFrame(frame).done(function(){
                dfr.resolve();
              });
        
              return dfr.promise();
            },
        
            prevFrame: function() {
              var frame = this.currentFrame-1,
                  dfr = $.Deferred();
        
              if (frame < 0) {
                if (this.config.loop) {
                  frame = this.framesCount-1;
                } else {
                  dfr.reject();
                  return dfr.promise();
                }
              }
        
              this.selectFrame(frame).done(function(){
                dfr.resolve();
              });
        
              return dfr.promise();
            },
        
            go: function(str) { // shorthand
              switch (str) {
                case "next":
                case "+1":
                  this.nextFrame();
                  break;
        
                case "prev":
                case "-1":
                  this.prevFrame();
                  break;
        
                case "first":
                  this.selectFrame(0);
                  break;
        
                case "last":
                  this.selectFrame(this.framesCount-1);
                  break;
        
                default:
                  if (isNaN(str)) return;
                  this.selectFrame(Number(str));
              }
            },
        
            // returns jquery collection of animation elements
            _getFrameElements: function(frame) { 
              var $frame = this.$frames.eq(frame),
                  elements = this.config.elements,
                  e, elementOptions,
                  $found, $frameElements = $([]);
        
              for (e in elements) {
                elementOptions = elements[e];
                $found = $frame.find(e);
                $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions ));
                $frameElements = $frameElements.add($found);
              }
        
              return $frameElements;
            },
        
            // returns jquery collection of elements that have to be faded out
            // i.e. elements on the same level as the animation elements
            // that doesn't contain other animation elements
            _getDisposeFrameElements: function(frame) {
              var $disposeElements = $([]),
                  $frame = this.$frames.eq(frame),
                  $elements = this._$elementsByFrame[frame];
        
              $elements.each(function(){
                var $t = $(this),
                    $siblings = $t.siblings().not(".t-frame-element");
        
                $siblings.each(function(){
                  var $t = $(this);
                  // check if the node is not already marked and doesn't contains other frame elements
                  if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) {
                    $t.addClass("t-frame-dispose");
                    $disposeElements = $disposeElements.add($t);
                  }
                });
        
              });
              return $disposeElements;
            },
        
            // expose the internal animationIn/Out functions that are called for each element in the frame
            // two arguments are passed - the $element which have to be animated and the window width
            _animationIn: sweepIn,
            _animationOut: sweepOut
        
          }
        
          TlrkSlider.defaults = TlrkSlider.prototype.defaults;
        
          $.fn.tlrkSlider = function(options) {
            var otherArgs = Array.prototype.slice.call(arguments, 1);
        
            return this.each(function() {
              var $el = $(this),
                  pluginData = $el.data("tlrkSlider");
        
              if (!pluginData) { // check if the slider is already attached
                pluginData = new TlrkSlider(this, options).init();
                $el.data("tlrkSlider", pluginData);
                return;
              }
        
              //change the options or call a method
              if (typeof options === "string") {
        
                // setting / getting option(s)
                if (options === "option") {
        
                  if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value
                    pluginData.config[otherArgs[0]] = otherArgs[1]; 
                  }
        
                  if (typeof otherArgs[0] === "object") { // extend the config with new options
                    pluginData.config = $.extend(pluginData.config, otherArgs[0]);
                  }
        
                } else { // call a method?
                  try {
                    pluginData[options].apply(pluginData, otherArgs);
                  } catch(ex) {
                    throw "Error calling a plugin method (" + ex + ")";
                  }
                }
              }
            });
          };
        
          window.TlrkSlider = TlrkSlider;
        
        })( jQuery, window , document );
        下面是頁面調用的JS代碼:
        
        $(document).ready(function(){
          var $backgrounds = $(".header-content").find(".parallax-bg"),
              LAYER_OFFSET = 30,
              PRLX_SPEED = 1500,
              $slider;
        
          $slider = $("#slider").tlrkSlider({
            autoStart: true,
            animationStart: function(ev, slider, step){
              var max_steps = this.framesCount; 
              $backgrounds.each(function(idx, el){
                var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx);
                $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED);
              });
            },
            elements: {
              "img": {delay: 10},
              "h2": {delay: 500},
              ".copy": {delay: 800},
              ".button": {delay: 1000}
            }
          });
        
          $(".header-content")
            .hover(
              function(){$(this).find(".slider-prev, .slider-next").show();},
              function(){$(this).find(".slider-prev, .slider-next").hide();}
            )
            .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end()
            .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; });
        
        });
        
        

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        • HTML5語義化元素你真的用對了嗎

          這篇文章主要介紹了HTML5語義化元素的相關知識,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
          2019-08-22
        • Html5新增標簽與樣式及讓元素水平垂直居中

          這篇文章主要介紹了Html5新增標簽與樣式及讓元素水平垂直居中,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編
          2019-07-11
        • 淺談HTML5中dialog元素嘗鮮

          對話框是web項目中用于用戶交互的重要部分,這篇文章主要介紹了淺談HTML5中dialog元素嘗鮮
          2018-10-15
        • HTML5 source標簽:媒介元素定義媒介資源

          HTML5 source標簽是一種媒介元素(比如 <video> 和 <audio>)來定義媒介資源。接下來通過本文給大家介紹HTML5 source標簽:媒介元素定義媒介資源的相關資料,
          2018-01-29
        • HTML5新表單元素_動力節點Java學院整理

          這篇文章主要為大家詳細介紹了HTML5新表單元素,介紹了三種表單元素,具有一定的參考價值,感興趣的小伙伴們可以參考一下
          2017-07-12
        • html5文本內容_動力節點Java學院整理

          這篇文章主要介紹了html5文本內容的相關資料,主要介紹文本內容方面的語義元素,通常用于描述特殊的內容片段,具有一定的參考價值,感興趣的小伙伴們可以參考一下
          2017-07-11
        • html5 input元素新特性_動力節點Java學院整理

          這篇文章主要介紹了html5 input元素新特性的相關資料,需要的朋友可以參考下
          2017-07-06
        • 詳解HTML5表單新增屬性

          本文主要對HTML5表單新增屬性進行詳細介紹,并附上實例解析,簡單易懂。需要的朋友一起來看下吧
          2016-12-21
        • Html5元素及基本語法詳解

          下面小編就為大家帶來一篇Html5元素及基本語法詳解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2016-08-02
        • html5表單及新增的改良元素詳解

          下面小編就為大家帶來一篇html5表單及新增的改良元素詳解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
          2016-06-07

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            泰州 | 克孜勒苏 | 宁德 | 平凉 | 松原 | 黄冈 | 驻马店 | 甘肃兰州 | 阿坝 | 攀枝花 | 徐州 | 泗洪 | 东莞 | 长葛 | 佳木斯 | 防城港 | 泗阳 | 海安 | 霍邱 | 广汉 | 鞍山 | 榆林 | 龙口 | 莒县 | 庆阳 | 张北 | 安阳 | 保定 | 乌兰察布 | 临夏 | 清远 | 南平 | 长兴 | 怒江 | 抚顺 | 阳泉 | 大连 | 东方 | 南充 | 昌吉 | 姜堰 | 迪庆 | 丽江 | 葫芦岛 | 汕头 | 金坛 | 保定 | 灵宝 | 焦作 | 鄢陵 | 本溪 | 乳山 | 海西 | 遵义 | 防城港 | 神木 | 周口 | 德清 | 株洲 | 肇庆 | 钦州 | 乐平 | 东海 | 陵水 | 大理 | 淮北 | 克拉玛依 | 章丘 | 塔城 | 寿光 | 焦作 | 广饶 | 白银 | 汝州 | 鹤壁 | 濮阳 | 朝阳 | 武安 | 三亚 | 韶关 | 阳春 | 黄石 | 泗洪 | 漳州 | 宝应县 | 贵州贵阳 | 如东 | 永新 | 洛阳 | 建湖 | 亳州 | 新疆乌鲁木齐 | 诸暨 | 天长 | 甘肃兰州 | 阳江 | 韶关 | 山南 | 武安 | 大连 | 哈密 | 襄阳 | 济南 | 高雄 | 余姚 | 眉山 | 涿州 | 河南郑州 | 临汾 | 果洛 | 赣州 | 鄂州 | 偃师 | 漯河 | 武夷山 | 烟台 | 平凉 | 玉林 | 宜都 | 昌吉 | 丹阳 | 湘西 | 江门 | 河北石家庄 | 甘南 | 诸城 | 灌南 | 鞍山 | 沛县 | 驻马店 | 阜新 | 唐山 | 长垣 | 石河子 | 三明 | 韶关 | 南安 | 新沂 | 博尔塔拉 | 乳山 | 哈密 | 阳泉 | 湛江 | 柳州 | 铜川 | 象山 | 长治 | 昭通 | 张家界 | 屯昌 | 珠海 | 贵港 | 克孜勒苏 | 马鞍山 | 明港 | 浙江杭州 | 凉山 | 漳州 | 宝应县 | 泗阳 | 榆林 | 惠州 | 霍邱 | 五指山 | 平潭 | 香港香港 | 济宁 | 偃师 | 日喀则 | 阿拉尔 | 贵港 | 昭通 | 河源 | 莱芜 | 四平 | 江西南昌 | 海丰 | 湖南长沙 | 晋中 | 济源 | 琼海 | 鸡西 | 钦州 | 海西 | 博尔塔拉 | 白城 | 漳州 | 武威 | 阿坝 | 蚌埠 | 山东青岛 | 克拉玛依 | 灌南 | 吉林长春 | 烟台 | 海门 | 莱芜 | 陕西西安 | 德州 | 威海 | 遵义 | 黔南 | 新乡 | 咸阳 | 昌吉 | 唐山 | 蚌埠 | 聊城 | 仁寿 | 长兴 | 宣城 | 平潭 | 雄安新区 | 恩施 | 黑龙江哈尔滨 | 乐山 | 潜江 | 徐州 | 屯昌 | 迁安市 | 阳春 | 济南 | 基隆 | 天长 | 怒江 | 禹州 | 镇江 | 泰州 | 阿里 | 迪庆 | 馆陶 | 吐鲁番 | 安阳 | 长兴 | 果洛 | 普洱 | 桐城 | 绵阳 | 承德 | 东阳 | 邵阳 | 唐山 | 临夏 | 高密 | 吉林长春 | 连云港 | 佛山 | 晋中 | 丽水 | 鹤岗 | 恩施 | 金坛 | 渭南 | 金昌 | 白城 | 瓦房店 | 安岳 | 湘西 | 肥城 | 青海西宁 | 三亚 | 燕郊 | 延边 | 莱芜 | 咸阳 | 广州 | 漯河 | 台北 | 金昌 | 连云港 | 南京 | 襄阳 | 伊犁 | 海西 | 湖北武汉 | 牡丹江 | 慈溪 | 三亚 | 漯河 | 涿州 | 邳州 | 随州 | 泰兴 | 庆阳 | 吉林长春 | 嘉兴 | 西藏拉萨 | 宝鸡 | 楚雄 | 姜堰 | 泰州 | 潜江 | 酒泉 | 定安 | 三门峡 | 襄阳 | 阳泉 | 通化 | 信阳 | 四川成都 | 佛山 | 忻州 | 营口 | 十堰 | 丽江 | 临猗 | 台湾台湾 | 毕节 | 韶关 | 白沙 | 锡林郭勒 | 保定 | 扬州 | 仁怀 | 芜湖 | 丹阳 | 宝应县 | 灌南 | 自贡 | 五指山 | 潜江 | 湛江 | 溧阳 | 瑞安 | 晋中 | 巴彦淖尔市 | 惠东 | 赣州 | 澳门澳门 | 阳江 | 台北 | 阿坝 | 海拉尔 | 保亭 | 黔南 | 清徐 | 大连 | 定安 | 聊城 | 邯郸 | 迪庆 | 阿里 | 万宁 | 铁岭 | 枣阳 | 连云港 | 章丘 | 台南 | 武夷山 | 新疆乌鲁木齐 | 汕头 | 包头 | 孝感 | 淮北 | 宁夏银川 | 金华 | 库尔勒 | 灌南 | 云南昆明 | 邢台 | 泰州 | 阿里 | 张家界 | 库尔勒 | 周口 | 江苏苏州 | 宣城 | 湖北武汉 | 乌兰察布 | 包头 | 正定 | 贵港 | 阿勒泰 | 长垣 | 朔州 | 鸡西 | 大兴安岭 | 无锡 | 高密 | 内蒙古呼和浩特 | 连云港 | 常德 | 乳山 | 宜都 | 恩施 | 通化 | 邳州 | 天门 | 武威 | 锦州 | 曲靖 | 塔城 | 咸阳 | 洛阳 | 汉川 | 孝感 | 庄河 | 阜新 | 哈密 | 仙桃 | 如皋 | 昭通 | 梧州 | 营口 | 肥城 | 乌海 | 鹰潭 | 呼伦贝尔 | 浙江杭州 | 丽江 | 六安 | 石河子 | 宜昌 | 亳州 | 东方 | 普洱 | 云南昆明 | 伊犁 | 甘肃兰州 | 肥城 | 泉州 | 石狮 | 普洱 | 平潭 | 荣成 | 巢湖 | 鄂州 | 牡丹江 | 芜湖 | 赵县 | 株洲 | 甘南 | 大庆 | 咸宁 | 宁波 | 白山 | 克拉玛依 | 灌南 | 柳州 | 丽水 | 红河 | 三沙 | 邳州 | 驻马店 | 香港香港 | 崇左 | 河池 | 晋江 | 临夏 | 安康 | 阿克苏 | 博尔塔拉 | 滨州 | 长兴 | 甘肃兰州 | 安庆 | 启东 | 香港香港 | 大理 | 陇南 | 宁德 | 垦利 | 宜春 | 赤峰 | 绵阳 | 迁安市 | 周口 | 垦利 | 眉山 | 荆门 | 张北 | 宜春 | 儋州 | 常德 | 鹰潭 | 广饶 | 克拉玛依 | 余姚 | 漳州 | 宿州 | 忻州 | 琼海 | 鄂州 | 淮南 | 台南 | 庆阳 | 厦门 | 单县 | 黔西南 | 临沂 | 慈溪 | 鹤岗 | 高雄 | 临汾 | 慈溪 | 柳州 | 汝州 | 诸暨 | 泰兴 | 南平 | 鹤岗 | 台州 | 赣州 | 通辽 | 济源 | 江门 | 海南 | 阳江 | 燕郊 | 贵州贵阳 | 咸阳 | 桓台 | 三门峡 | 鹤壁 | 大理 | 象山 | 丹东 | 绵阳 | 柳州 | 宝鸡 | 乐清 | 佛山 | 建湖 | 安岳 | 咸宁 | 株洲 | 张掖 | 海拉尔 | 聊城 | 铁岭 | 云南昆明 | 明港 | 定西 | 鹰潭 | 永新 | 金坛 | 新泰 | 台南 | 寿光 | 南阳 | 莱州 | 吴忠 | 洛阳 | 张北 | 江西南昌 | 宜宾 | 漯河 | 临猗 | 保亭 | 定安 | 滁州 | 昌吉 | 海北 | 黑河 | 延安 | 东方 | 甘南 | 昭通 | 六安 | 溧阳 | 宁国 | 云南昆明 | 深圳 | 五家渠 | 日喀则 | 西双版纳 | 泰安 | 芜湖 | 周口 | 福建福州 | 绵阳 | 任丘 | 临海 | 临汾 | 桐乡 | 郴州 | 乌兰察布 | 岳阳 | 招远 | 渭南 | 屯昌 | 福建福州 | 眉山 | 定州 | 通辽 | 韶关 | 黔南 | 广安 | 广元 | 齐齐哈尔 | 武威 | 常州 | 江苏苏州 | 信阳 | 内江 | 绵阳 | 庆阳 | 开封 | 七台河 | 镇江 | 河池 | 博尔塔拉 | 景德镇 | 铁岭 | 邢台 | 嘉峪关 | 江苏苏州 | 汕头 | 石狮 | 石狮 | 锡林郭勒 | 台北 | 曲靖 | 芜湖 | 芜湖 | 白山 | 铜川 | 肥城 | 三亚 | 昌吉 | 韶关 | 文山 | 包头 | 毕节 | 黑河 | 三河 | 鄂州 | 涿州 | 铁岭 | 平顶山 | 佳木斯 | 项城 | 景德镇 | 新泰 | 衡水 | 图木舒克 | 明港 | 诸城 | 焦作 | 黑河 | 燕郊 | 江西南昌 | 昌都 | 丹东 | 海拉尔 | 博尔塔拉 | 铜陵 | 景德镇 | 吕梁 | 荆门 | 迪庆 | 慈溪 | 通化 | 沭阳 | 铜川 | 广安 | 黄南 | 兴安盟 | 阿里 | 茂名 | 清徐 | 灌南 | 项城 | 辽宁沈阳 | 公主岭 | 沧州 | 阿坝 | 江门 | 萍乡 | 陵水 | 安康 | 西藏拉萨 | 普洱 | 溧阳 | 兴安盟 | 馆陶 | 抚顺 | 佛山 | 江西南昌 | 黄山 | 桓台 | 淮北 | 濮阳 | 绍兴 | 海南 | 双鸭山 | 咸阳 | 鄂州 | 和县 | 铁岭 | 金昌 | 芜湖 | 甘孜 | 安康 | 南平 | 许昌 | 阜新 | 铜陵 | 温岭 | 仁怀 | 红河 | 益阳 | 通化 | 偃师 | 西双版纳 | 郴州 | 曲靖 | 永新 | 建湖 | 固原 | 日照 | 金华 | 垦利 | 青海西宁 | 淮南 | 贵港 | 馆陶 | 邯郸 | 图木舒克 | 温州 | 大连 | 新沂 | 临夏 | 吕梁 | 神农架 | 那曲 | 滕州 | 深圳 | 昭通 | 内蒙古呼和浩特 | 招远 | 吐鲁番 | 晋江 | 普洱 | 舟山 | 牡丹江 | 营口 | 宜昌 | 渭南 | 醴陵 | 淮南 | 保亭 | 邹城 | 武威 | 黄冈 | 江西南昌 | 河源 | 自贡 | 巴彦淖尔市 | 平潭 | 阳泉 | 锡林郭勒 | 永康 | 白银 | 湘西 | 吴忠 | 丽江 | 平凉 | 丹东 | 新泰 | 滨州 | 滨州 | 邵阳 | 威海 | 德州 | 曲靖 | 钦州 | 石河子 | 定州 | 金华 | 柳州 | 防城港 | 台南 | 辽阳 | 阳春 | 安岳 | 仁怀 | 阿勒泰 | 海门 | 邹平 | 邵阳 | 瓦房店 | 启东 | 衡阳 | 玉环 | 汉中 | 滁州 | 慈溪 | 聊城 | 明港 | 三亚 | 神木 | 孝感 | 义乌 | 渭南 | 晋中 | 青州 | 洛阳 | 保定 | 余姚 | 保亭 | 鄂尔多斯 | 荆州 | 瑞安 | 库尔勒 | 雅安 | 义乌 | 内江 | 惠东 | 沧州 | 神农架 | 泉州 | 桐城 | 黄山 | 桐城 | 甘肃兰州 | 乐平 | 泰州 | 潍坊 | 锦州 | 随州 | 烟台 | 云浮 | 白银 | 儋州 | 红河 | 泰安 | 兴化 | 绍兴 | 长垣 | 宿州 | 姜堰 | 吉林长春 | 沭阳 | 六盘水 | 余姚 | 金昌 | 如皋 | 朝阳 | 资阳 | 邯郸 | 临猗 | 防城港 | 怒江 | 商丘 | 瑞安 | 保定 | 佛山 | 青州 | 沛县 | 吉林长春 | 渭南 | 包头 | 嘉峪关 | 乳山 | 苍南 | 启东 | 库尔勒 | 宝鸡 | 长兴 | 淮北 | 丽水 | 灵宝 | 葫芦岛 | 昭通 | 三亚 | 新余 | 襄阳 | 永州 | 黄南 | 燕郊 | 长兴 | 许昌 | 盘锦 | 昌吉 | 黄冈 | 邹平 | 南通 | 琼海 | 珠海 | 娄底 | 青海西宁 | 廊坊 | 珠海 | 龙岩 | 安康 | 义乌 | 驻马店 | 怀化 | 资阳 | 大庆 | 桐城 | 海丰 | 沧州 | 灌南 | 锡林郭勒 | 聊城 | 金坛 | 巴中 | 项城 | 鄢陵 | 钦州 | 湘西 | 丽江 | 喀什 | 咸阳 | 邳州 | 海丰 | 新乡 | 白沙 | 兴安盟 | 永新 | 顺德 | 白银 | 昆山 | 海拉尔 | 济南 | 赣州 | 如东 | 铜川 | 南平 | 泰兴 | 商洛 | 四平 | 海拉尔 | 仁怀 | 延边 | 湘西 | 兴化 | 潜江 | 大庆 | 海宁 | 沧州 | 鄂尔多斯 | 株洲 | 甘南 | 库尔勒 | 德阳 | 天水 | 延安 | 天水 | 章丘 | 溧阳 | 肇庆 | 澄迈 | 苍南 | 金昌 | 湘西 | 赣州 | 马鞍山 | 鄢陵 | 淄博 | 乌兰察布 | 晋中 | 天水 | 聊城 | 永州 | 宁夏银川 | 珠海 | 扬中 | 汉中 | 商洛 | 三沙 | 邢台 | 盐城 | 瑞安 | 乳山 | 海门 | 陇南 | 涿州 | 清远 | 自贡 | 台南 | 台湾台湾 | 东台 | 桓台 | 东阳 | 台湾台湾 | 江门 | 儋州 | 温州 | 荆门 | 荆州 | 义乌 | 贵港 | 定安 | 泗阳 | 潮州 | 济源 | 北海 | 淮南 | 东阳 | 来宾 | 正定 | 汕尾 | 铜陵 | 黑龙江哈尔滨 | 遵义 | 绥化 | 秦皇岛 | 苍南 | 咸阳 | 琼中 | 伊犁 | 澄迈 | 聊城 | 简阳 | 铁岭 | 赵县 | 包头 | 绍兴 | 济南 | 鞍山 | 东海 | 桐城 | 延边 | 肥城 | 铜陵 | 楚雄 | 鹤岗 | 张家口 | 阿拉尔 | 偃师 | 大兴安岭 | 四平 | 营口 | 图木舒克 | 延边 | 瓦房店 | 金昌 | 新泰 | 三沙 | 盘锦 | 咸阳 | 新泰 | 扬州 | 许昌 | 滁州 | 雄安新区 | 吉林长春 | 恩施 | 毕节 | 大连 | 靖江 | 日土 | 益阳 | 平凉 | 邯郸 | 济源 | 咸阳 | 泗阳 | 广饶 | 唐山 | 遂宁 | 丹阳 | 包头 | 日喀则 | 忻州 | 钦州 | 毕节 | 安阳 | 日喀则 | 浙江杭州 | 东海 | 菏泽 | 仁寿 | 黔南 | 余姚 | 宣城 | 宜宾 | 邳州 | 毕节 | 吉林 | 五指山 | 龙岩 | 宿迁 | 西藏拉萨 | 佳木斯 | 苍南 | 瓦房店 |