易网时代-编程资源站
易网时代-编程资源站 
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></div>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-IE8var 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 fallbackstart = "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 togetherdelay: 100 },// dispose elements are these that are not included in the elements object// but affect the document flow and will be fadedIn/OutdisposeDelay: 100, // delay for the dispose elementsdisposeSpeed: 1000, // how quickly they"ll fadeOut/IndelayBetweenTransition: 1000, // time between starting fadeOut and fadeIndelayAnimation: 7000, // time between auto changing the current frameloop: true, // if true when clicking next on the last frame the slider jumps to the first oneautoStart: true, // start the automatic looping through the frames on initframesSelector: "section", // selector for the frames inside the sliderelements: {"p": {delay: 100, speed: 1000, easing: "easeInOutBack"}},navigation: true, // the dots navigation on the bottomnavigationClass: "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// basicsthis.$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 framethis._$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）;}// bindingsthis.$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 timerwindow.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 runningthis.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 runningif （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 finishthis.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 framesdFadeOut = this._fadeOutFrame（this.currentFrame）;// hide the fadetout framedFadeOut.done（function（）{that.$frames.eq（that.currentFrame）.hide（）;}）;window.setTimeout（function（）{ // then wait delayBetweenTransition and fadeIn the new framedFadeIn = 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 changeif （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 doneif （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 elementi, 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 elementsabsolutize（$affectedElements）;// toggle the dispose elementsif （$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" positiondfr.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） returnrestoreFrameElements（ 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） { // shorthandswitch （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 attachedpluginData = new TlrkSlider（this, options）.init（）;$el.data（"tlrkSlider", pluginData）;return;}//change the options or call a methodif （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; }）;}）;希望本文对大家学习javascript程序设计有所帮助。