基于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='/images/loading.gif' data-original="js/html5.js"></script><![endif]-->10 <!--[if IE 6]> 11 <script type="text/javascript" src='/images/loading.gif' data-original="js/DD_belatedPNG.js"></script> 12 <script>DD_belatedPNG.fix('*');</script> 13 <![endif]-->14 <script type='text/javascript' src='/images/loading.gif' data-original='js/jquery-1.7.2.min.js'></script>15 <script type='text/javascript' src='/images/loading.gif' data-original='js/common.js'></script>16 <script type='text/javascript' src='/images/loading.gif' data-original='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 src='/images/loading.gif' data-original="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/loading.gif' data-original="images/dataviz-home-image-q2.png" />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/loading.gif' data-original="images/home_banner_web-q2.png" />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)"><</a> <a class="slider-next" href="javascript: void(0)">></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
喜欢的朋友,可以下载
下载地址
原标题:一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器
关键词:HTML