你的位置:首页 > 网页设计

[网页设计]一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器

 基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载!

演示图

一个酷炫的,基于HTML5和Css的焦点图特效,兼容各种浏览器

html代码

 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="keywords" content="一个酷炫的,基于HTML5和Css的焦点图特效,兼容各种浏览器" /> 6 <meta name="description" content="一个酷炫的,基于HTML5和Css的焦点图特效,兼容各种浏览器" /> 7 <title>一个酷炫的,基于HTML5和Css的焦点图特效,兼容各种浏览器</title> 8 <link href="css/slider.css" rel="stylesheet" type="text/css" /> 9 <!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->10 <!--[if IE 6]> 11 <script type="text/javascript" src="js/DD_belatedPNG.js"></script> 12 <script>DD_belatedPNG.fix('*');</script> 13 <![endif]-->14 <script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>15 <script type='text/javascript' src='js/common.js'></script>16 <script type='text/javascript' src='js/slider.js'></script>17 </head>18 <body>19 <header>20  <div class="header-content home">21   <div class="parallax-bg" id="slider-wrap">22    <div class="slider parallax-bg" id="slider">23     <div class="slider-sections sandbox">24      <section class="first"> <img alt="Kendo UI" src="images/home-banner-1.png"/>25       <div class="text">26        <h2>SmartSite Ver 2.2<br />27         智能网站管理系统 </h2>28        <p class="copy">采用前后台完全分离技术,通过标签(支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等)加模板技术.全站生成纯静态页。</p>29        <p class="button"><a href="http://www.cnblogs.com/">Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p>30       </div>31      </section>32      <section> <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />33       <div class="text" style="padding-top: 10px;">34        <h2>企业网站管理系统</h2>35        <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城,在线支付、配送、支付方式管理、广告等模块。</p>36        <p class="button"><a href="http://www.cnblogs.com/">Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p>37       </div>38      </section>39      <section> <img src="images/home_banner_web-q2.png" alt="Kendo UI" />40       <div class="text">41        <h2>智能移动网站管理系统</h2>42        <p class="copy">基于jquery.Mobile、HTML5技术框架,前后台完全分离,采用标签加模板技术,全站生成纯静态页。</p>43        <p class="button"><a href="http://www.cnblogs.com/" >Download</a> <a class="dimmed" href="http://www.cnblogs.com/">Learn More</a></p>44       </div>45      </section>46     </div>47    </div>48    <a class="slider-prev" href="javascript: void(0)">&lt;</a> <a class="slider-next" href="javascript: void(0)">&gt;</a> </div>49  </div>50 </header>51 </body>52 </html>

 JS代码

 
 1 /** 2 * @author Alexander Farkas 3 * v. 1.22 4 */ 5 (function ($) 6 { 7   if (!document.defaultView || !document.defaultView.getComputedStyle) 8   { // IE6-IE8 9     var oldCurCSS = $.curCSS; 10     $.curCSS = function (elem, name, force) 11     { 12       if (name === 'background-position') 13       { 14         name = 'backgroundPosition'; 15       } 16       if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) 17       { 18         return oldCurCSS.apply(this, arguments); 19       } 20       var style = elem.style; 21       if (!force && style && style[name]) 22       { 23         return style[name]; 24       } 25       return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); 26     }; 27   } 28  29   var oldAnim = $.fn.animate; 30   $.fn.animate = function (prop) 31   { 32     if ('background-position' in prop) 33     { 34       prop.backgroundPosition = prop['background-position']; 35       delete prop['background-position']; 36     } 37     if ('backgroundPosition' in prop) 38     { 39       prop.backgroundPosition = '(' + prop.backgroundPosition; 40     } 41     return oldAnim.apply(this, arguments); 42   }; 43  44   function toArray(strg) 45   { 46     strg = strg.replace(/left|top/g, '0px'); 47     strg = strg.replace(/right|bottom/g, '100%'); 48     strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); 49     var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 50     return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]]; 51   } 52  53   $.fx.step.backgroundPosition = function (fx) 54   { 55     if (!fx.bgPosReady) 56     { 57       var start = $.curCSS(fx.elem, 'backgroundPosition'); 58       if (!start) 59       {//FF2 no inline-style fallback 60         start = '0px 0px'; 61       } 62  63       start = toArray(start); 64       fx.start = [start[0], start[2]]; 65       var end = toArray(fx.end); 66       fx.end = [end[0], end[2]]; 67  68       fx.unit = [end[1], end[3]]; 69       fx.bgPosReady = true; 70     } 71     //return; 72     var nowPosX = []; 73     nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 74     nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 75     fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; 76  77   }; 78 })(jQuery); 79  80  81  82 /* 83 tlrkSlider 84   85  example usage: 86  87   $("#slider").tlrkSlider({ 88    autoStart: false, 89    elements: { 90     "img": {delay: 10}, 91     "h2": {delay: 500}, 92     ".copy": {delay: 800}, 93     ".button": {delay: 1000} 94    } 95   }); 96  97  to go to a specific frame: 98   $("#slider").tlrkSlider("go", position); 99   "position" can have one of the following values:100   "next", "prev", "first", "last", "+1", "-1" or a numeric value101  102  to start/stop the automatic loop:103   $("#slider").tlrkSlider("start");104   $("#slider").tlrkSlider("stop");105  106  to change the delay between automatic transitions:107   $("#slider").tlrkSlider("option", "delayAnimation", 1000);108 109  to change any option:110   $("#slider").tlrkSlider("option", option_name, option_value);111   112  Changing the "elements" object is not tested.113  114  Changing the following options: "navigation", "navigationClass", "framesSelector", "autoStart" won't have any effect for now.115  They are used only during the initialization.116  117  $("#slider").data("tlrkSlider") will return the plugin instance and the methods/properties can be accessed from there.118  119  The plugin contructor defaults are accessable through TlrkSlider.defaults120  121  The function that actually sweep the elements in/out can be overriden from122   TlrkSlider.prototype._animationIn and TlrkSlider.prototype._animationOut123  124   See sweepIn/sweepOut 125  126 */127 128 129 130 ;(function( $, window, document, undefined ){131  132  // utility function that generates the "dots" navigation133  function generateNavigation($el, count, config) {134   var i, html = "",135     width = count * 24;136   137   html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>";138   for (i = 0; i < count; i++) {139    html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>";140   }141   html += "</ol>";142   143   $el.append(html);144  }145  146  function sweepOut($el, windowWidth) {147   var dfr = $.Deferred(),148     pos = $el.position(),149     width = $el.width(),150     delta, final,151     options = $el.data("tlrkAnimOptions");152   153   windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it154   155   delta = windowWidth - pos.left;156   final = -(delta);157   158   setTimeout(function(){159    $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){160     dfr.resolve();161    });162   }, options.delay);163   164   return dfr.promise();165  }166  167  function sweepIn($el, windowWidth, frameLeft) {168   var dfr = $.Deferred(),169     options = $el.data("tlrkAnimOptions"),170     positionData = $el.data("tlrkOriginalPos"),171     final = positionData.position.left,172     rightEdge;173   174   windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it175   176   $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen177   $el.css("left", function(current){178    return current + windowWidth - frameLeft;179   });180   181   setTimeout(function(){182    $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){183     dfr.resolve();184    });185   }, options.delay);186   187   return dfr.promise();188  }189  190  191  // two pass function that first iterates all the elements and gets their position/width/height192  // and then sets their position to absolute193  function absolutize($elements) {194   195   // todo - move it to separate function and do it just once196   // gather the original position/dimension data for all elements197   $elements.each(function(){198    var $t = $(this);199    200    if ($t.data("tlrkOriginalPos")) return201    202    $t.data("tlrkOriginalPos", {203     position: $t.position(),204     width: $t.width(),205     height: $t.height(),206     css_pos: $t.css("position"),207     css_left: $t.css("left"),208     css_top: $t.css("top"),209     css_width: $t.css("width") || "auto",210     css_height: $t.css("height") || "auto"211    });212    213   });214   215   // set the absolute position216   $elements.each(function(){217    var $t = $(this),218      opos = $t.data("tlrkOriginalPos");219     220    $t.css({221     position: "absolute",222     left: opos.position.left,223     top: opos.position.top,224     width: opos.width,225     height: opos.height226    });227   });228  }229  230  function restoreFrameElements($elements) {231   $elements.each(function(){232    var $t = $(this),233      opos = $t.data("tlrkOriginalPos");234      235    if (!opos) return236      237    $t.css({238     position: opos.css_pos,239     left: opos.css_left,240     top: opos.css_top,241     width: opos.css_width,242     height: opos.css_height243    });244   });245   246  }247 248  var TlrkSlider = function( elem, options ){249    this.elem = elem;250    this.$elem = $(elem);251    this.options = options;252   };253 254  // the plugin prototype255  TlrkSlider.prototype = {256   defaults: {257 258 259    defaultElementOptions: {260     speed: 1200,261     easing: "easeInOutBack",262     // interval before the element starts moving when the fadeIn/Out functions are called263     // it's a good idea to give different delays for the different elements264     // if all have the same delay they'll start moving all together265     delay: 100 266    },267    268    // dispose elements are these that are not included in the elements object269    // but affect the document flow and will be fadedIn/Out270    disposeDelay: 100, // delay for the dispose elements271    disposeSpeed: 1000, // how quickly they'll fadeOut/In272    273    delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn274    delayAnimation: 7000, // time between auto changing the current frame275    276    loop: true, // if true when clicking next on the last frame the slider jumps to the first one277    278    autoStart: true, // start the automatic looping through the frames on init279    280    framesSelector: "section", // selector for the frames inside the slider281    282    elements: {283     "p": {delay: 100, speed: 1000, easing: "easeInOutBack"}284    },285    286    navigation: true, // the dots navigation on the bottom287    navigationClass: "slider-nav",288   289    // callbacks290    // another way to "catch" these events is with291    // $(-slider-element-).bind("animationStart")292    animationStart: null,293    animationEnd: null294   },295 296   init: function() {297    var c, e, element, $element,298      that = this,299      $firstFrame;300    301    c = this.config = $.extend({}, this.defaults, this.options);302    303    this.elem.style.position = "relative"; // make the wrapping element relative304    305    // basics306    this.$frames = this.$elem.find(c.framesSelector);307    this.framesCount = this.$frames.length;308    this.currentFrame = 0;309    this.queue = [];310    311    this._$elementsByFrame = {};312    this._$disposeElementsByFrame = {};313    314    for (i = 0; i < this.framesCount; i++) {315     this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame316     this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame317    }318    319    if (c.navigation) {320     generateNavigation(this.$elem, this.framesCount, c);321     this.$navigation = this.$elem.find("."+c.navigationClass);322    }323    324    // bindings325    this.$elem.find(".slider-nav").delegate("a", "click", function(e){326     var frame = this.getAttribute("href").split("#")[1];327     that.go.call(that, frame);328     return false;329    });330    331    this.$elem // internal bindings for the callbacks332     .bind("animationStart", function(){333      if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);}334     })335     .bind("animationEnd", function(){336      if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);}337     })338    ;339    340    // start animation?341    if (c.autoStart) {342     this.start();343    } else {344     this.running = false;345    }346 347    return this;348   },349   350   start: function(instant) {351    var that = this;352    353    if (this.timer) { // we'll clear the current timer354     window.clearTimeout(this.timer);355    }356    357    this.running = true;358    359    if (instant) {360     that.nextFrame();361    } else {362     this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation);363    }364   },365   366   stop: function() {367    if (!this.running) return; // we are not running368    369    this.running = false;370    window.clearTimeout(this.timer);371   },372 373   // main function for changing frames374   selectFrame: function(frame, dfr) {375    var c = this.config, // shorthand for the config376      that = this,377      dfr = dfr || $.Deferred(),378      dFadeIn = $.Deferred(),379      dFadeOut = $.Deferred();380      381    if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) {382     dfr.reject();383     return dfr.promise();384    }385 386    // clear the animation loop interval if the animation is running387    if (this.running && this.timer) { 388     window.clearTimeout(this.timer);389    }390 391    // check if we are currenly running an animation.392    if (this.animated && this.queue.length > 0) {393     // wait for the last item in the queue to finish394     this.queue[this.queue.length-1].done(function(){395      that.selectFrame(frame, dfr); // and call again the selectFrame396     })397     return dfr.promise();398    }399    400    this.animated = true;401    this.$elem.trigger("animationStart", [this, frame]);402    403    this.queue.push(dfr);404    405    // fade the frames406    dFadeOut = this._fadeOutFrame(this.currentFrame);407    408    // hide the fadetout frame409    dFadeOut.done(function(){410     that.$frames.eq(that.currentFrame).hide();411    });412    413    window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame414     dFadeIn = that._fadeInFrame.call(that, frame).done(function(){415      // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise416      $.when(dFadeOut, dFadeIn).done(function(){417       that.animated = false;418       that.queue.shift();419       that.$elem.trigger("animationEnd", [that]);420       that.currentFrame = frame;421       dfr.resolve();422      });423     });424    }, c.delayBetweenTransition);425    426    // navigation html change427    if (this.config.navigation) {428     this.$navigation.find(".selected").removeClass("selected").end()429      .find("a").eq(frame).addClass("selected");430    }431     432    dfr.done(function(){ // we'll resume the loop animation after the transitions are done433     if (that.running) {434      that.start();435     }436    });437    438    return dfr.promise();439   },440   441   _fadeFrame: function(frame, callback, direction) {442    var dfr = $.Deferred(),443      $frame = this.$frames.eq(frame),444      $elements = this._$elementsByFrame[frame],445      windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element 446      i, len,447      that = this,448      elementAnimations = [],449      $disposeElements = this._$disposeElementsByFrame[frame],450      $affectedElements,451      frameLeft = $frame.offset().left;452      453    direction = direction || "out";454      455    if (!$.isFunction(callback)) return; // do nothing if there's no callback passed456    457    $affectedElements = $elements.add($disposeElements);458    459    // position absolute the animation and dispose elements460    absolutize($affectedElements);461    462    // toggle the dispose elements463    if ($disposeElements.length > 0) {464     window.setTimeout(function(){465      $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed);466     }, this.config.disposeDelay);467    }468    469    // invoke the callback for each element470    // the callback must return a promise471    $elements.each(function(){472     elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) );473    });474    475    // wait for all the elements to finish their animation476    $.when.apply(this, elementAnimations).done(function(){477     //restoreFrameElements($affectedElements); // and restore the elements' position478     dfr.resolve(); // resolve the fade function479    });480    481    return dfr.promise();482   },483 484   _fadeOutFrame: function(frame) {485    var dfr = $.Deferred(),486      $frame = this.$frames.eq(frame),487      $disposeElements = this._$disposeElementsByFrame[frame];488    489    this._fadeFrame(frame, this._animationOut, "out").done(function(){490     dfr.resolve();491    })492    493    return dfr.promise();494   },495   496   _fadeInFrame: function(frame) {497    var dfr = $.Deferred(),498      $frame = this.$frames.eq(frame),499      $elements = this._$elementsByFrame[frame];500    501    this._restoreFrame(frame);502    503    $frame.show();504    505    this._fadeFrame(frame, this._animationIn, "in").done(function(){506     dfr.resolve();507    });508    509    return dfr.promise();510   },511   512   _restoreFrame: function(frame){513    if (!frame) return514    restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) );515   },516   517   nextFrame: function() {518    var frame = this.currentFrame+1,519      dfr = $.Deferred();520      521    if (frame > this.framesCount-1) {522     if (this.config.loop) {523      frame = 0;524     } else {525      dfr.reject();526     }527    };528    529    this.selectFrame(frame).done(function(){530     dfr.resolve();531    });532    533    return dfr.promise();534   },535   536   prevFrame: function() {537    var frame = this.currentFrame-1,538      dfr = $.Deferred();539      540    if (frame < 0) {541     if (this.config.loop) {542      frame = this.framesCount-1;543     } else {544      dfr.reject();545      return dfr.promise();546     }547    }548    549    this.selectFrame(frame).done(function(){550     dfr.resolve();551    });552    553    return dfr.promise();554   },555   556   go: function(str) { // shorthand557    switch (str) {558     case "next":559     case "+1":560      this.nextFrame();561      break;562 563     case "prev":564     case "-1":565      this.prevFrame();566      break;567     568     case "first":569      this.selectFrame(0);570      break;571     572     case "last":573      this.selectFrame(this.framesCount-1);574      break;575     576     default:577      if (isNaN(str)) return;578      this.selectFrame(Number(str));579    }580   },581   582   // returns jquery collection of animation elements583   _getFrameElements: function(frame) { 584    var $frame = this.$frames.eq(frame),585      elements = this.config.elements,586      e, elementOptions,587      $found, $frameElements = $([]);588      589    for (e in elements) {590     elementOptions = elements[e];591     $found = $frame.find(e);592     $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions ));593     $frameElements = $frameElements.add($found);594    }595    596    return $frameElements;597   },598 599   // returns jquery collection of elements that have to be faded out600   // i.e. elements on the same level as the animation elements601   // that doesn't contain other animation elements602   _getDisposeFrameElements: function(frame) {603    var $disposeElements = $([]),604      $frame = this.$frames.eq(frame),605      $elements = this._$elementsByFrame[frame];606 607    $elements.each(function(){608     var $t = $(this),609       $siblings = $t.siblings().not(".t-frame-element");610     611     $siblings.each(function(){612      var $t = $(this);613      // check if the node is not already marked and doesn't contains other frame elements614      if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) {615       $t.addClass("t-frame-dispose");616       $disposeElements = $disposeElements.add($t);617      }618     });619     620    });621    return $disposeElements;622   },623   624   625   // expose the internal animationIn/Out functions that are called for each element in the frame626   // two arguments are passed - the $element which have to be animated and the window width627   _animationIn: sweepIn,628   _animationOut: sweepOut629   630  }631 632  TlrkSlider.defaults = TlrkSlider.prototype.defaults;633 634  $.fn.tlrkSlider = function(options) {635   var otherArgs = Array.prototype.slice.call(arguments, 1);636     637   return this.each(function() {638    var $el = $(this),639      pluginData = $el.data("tlrkSlider");640    641    if (!pluginData) { // check if the slider is already attached642     pluginData = new TlrkSlider(this, options).init();643     $el.data("tlrkSlider", pluginData);644     return;645    }646    647    //change the options or call a method648    if (typeof options === "string") {649     650     // setting / getting option(s)651     if (options === "option") {652      653      if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value654       pluginData.config[otherArgs[0]] = otherArgs[1]; 655      }656      657      if (typeof otherArgs[0] === "object") { // extend the config with new options658       pluginData.config = $.extend(pluginData.config, otherArgs[0]);659      }660      661     } else { // call a method?662      try {663       pluginData[options].apply(pluginData, otherArgs);664      } catch(ex) {665       throw "Error calling a plugin method (" + ex + ")";666      }667     }668    }669   });670  };671 672  window.TlrkSlider = TlrkSlider;673 674 })( jQuery, window , document );675 676 $(document).ready(function(){677  var $backgrounds = $(".header-content").find(".parallax-bg"),678    LAYER_OFFSET = 30,679    PRLX_SPEED = 1500,680    $slider;681  682  $slider = $("#slider").tlrkSlider({683   autoStart: true,684   animationStart: function(ev, slider, step){685    var max_steps = this.framesCount; 686    $backgrounds.each(function(idx, el){687     var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx);688     $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED);689    });690   },691   elements: {692    "img": {delay: 10},693    "h2": {delay: 500},694    ".copy": {delay: 800},695    ".button": {delay: 1000}696   }697  });698  699  $(".header-content")700   .hover(701    function(){$(this).find(".slider-prev, .slider-next").show();},702    function(){$(this).find(".slider-prev, .slider-next").hide();}703   )704   .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end()705   .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; });706 707 });

View Code

 

喜欢的朋友,可以下载 

下载地址