Home > Developer > JavaScript
Similar to the transition effect of the slide, sometimes you need to complete some pictures in the Web page, such as advertising, propaganda, product introduction, and so on, then the simple cut is not interesting, need to switch in the time through some effects make the switch vivid.
One of the more common is the curtain switch.
Paste the finished effect first.
The implementation of the principle is not complex, in a moving one of the "curtain strip" or "strip", each strip is a div, similar to the way the sprite map the position of its background map set to strip visual position, Then use the jquery animate to let them move in accordance with a certain regularity to complete the curtain switching effect.
For ease of use, this feature is written as a plug-in for jquery.
Plugin Name: bobenut.curtain.jquery.js
(function (jquery) { function (options) { //TODO }}) (jQuery);Invoke page
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <style>#curtain{width:800px;Height:600px;position:relative;Overflow:Hidden;margin:0 Auto; } </style> </Head> <Body> <DivID= "Curtain" > <imgsrc= "1.jpg"/> <imgsrc= "2.jpg"/> <imgsrc= "3.jpg"/> <imgsrc= "4.jpg"/> </Div> <Scripttype= ' Text/javascript 'src= "Jquery-1.11.3.min.js"></Script> <Scripttype= ' Text/javascript 'src=".. /src/bobenut.curtain.jquery.js "></Script> <Scripttype= ' Text/javascript '> $('#curtain'). Curtain (); </Script> </Body></HTML>
The div that contains the image is selected by jquery and then called directly.
$ (' #curtain '). Curtain ();The frame is finished, then proceed to the initialization link.
Initialization includes: initialization dimensions, animation containers, pictures to be toggled, creation of individual curtain strips, default background, time parameters for switching.
These initialization operations are obviously quite large in a function, and it is obviously unwise to have a function that requires additional functionality in the future, then split them according to the function of the initialization.
So the invocation of so many initialization functions becomes a problem, is it hard to write each function to make a separate call? Obviously this way is very low.
Like this, each function has the same input parameters, and no results are returned, so it can be said to be the same pattern, which can be called using the iterator design pattern.
The so-called iterator is the sequential access to the elements, and do not care about the details of the elements, in fact, is a circular access, for these initialization function calls we can use the iterator pattern to call, the following functions are defined after the iterator mode call.
The initialization results are definitely going to be put in place, as the basic environment context is used for switching behind the contextual supply.
Define a module-level variable context in this plug-in module.
All initialized results are saved in the context.
var context = {};Next is the various initialization operation functions
1) Initialize the container
function Initcontainer (options) { = options. $container; }A container is a div,options that contains a set of images that are passed in when called, because the container is chosen with jquery, so add a $ to differentiate.
2) Initialize Dimensions
function initsize (options) { = options.stripcount; = Options.width.replace (' px ', '); = Options.height.replace (' px ', '); = Context.containerwidth/ context.stripcount; = context.containerheight; }Gets the size of the container and calculates the size of the strip.
3) Initialize all pictures in the container
functionInitimgs (options) {Context.imgsrcs= []; Context. $container. Children (). each (function(index, Element) {var$element =$ (element); $element. CSS (' Display ', ' none '); Context.imgSrcs.push ($element. attr (' SRC ')); }); Context._imgcurrentindex= 0; CONTEXT.NEXTIMGSRC=function () { if(++context._imgcurrentindex > Context.imgsrcs.length-1) {Context._imgcurrentindex= 0; } returnContext.imgsrcs[context._imgcurrentindex]; }; }
Come on up. Hide all images that need to be toggled and save their URLs in an array for easy switching.
Provides a way to get the next image URL, making it easy to get the URL of the next image when switching.
4) Initialize Strip
functioninitstrips (Options) {context. $strips= []; for(vari = 0; i < Context.stripcount; i++) { var$strip = jquery (' <div></div> '); $strip. CSS (' Background-size ', context.containerwidth + ' px ' + context.containerheight + ' px '); $strip. CSS (' Background-position-x ', I * context.stripwidth *-1 + ' px '); $strip. CSS (' Background-position-y ', ' 0px '); $strip. CSS (' Background-repeat ', ' no-repeat '); $strip. CSS (' Position ', ' absolute '); $strip. CSS (' Left ', (i * context.stripwidth) + ' px '); $strip. CSS (' Top ', context.stripheight + ' px '); $strip. CSS (' Width ', context.stripwidth + ' px '); $strip. CSS (' Height ', context.stripheight + ' px '); $strip. CSS (' Display ', ' block '); $strip. CSS (' Overflow ', ' hidden '); $strip. CSS (' Zoom ', ' 1 '); Context. $strips. push ($strip); Context. $container. Append ($strip); } }
Generate all the strip, give them the default size, set the map to switch to a background map, adjust the display position of the background map by Background-position-x and y, and then save the strip in the array for ease of use.
5) Initialize default background
function Initdefaultbackground () { context. $container. css (' background-image ', ' url (' + context.imgsrcs[0] + ') ' ); Context. $container. css (' background-size ', context.containerwidth + ' px ' + context.containerheight + ' px '); }The first picture is used as the container's background by default.
6) Initialize switch time parameter
function inittime (options) { = options.interval; = Options.basedelay; = options.delayincrement; }Set the switch standard interval of the picture before and after interval, switching delay time and delay increment time for each strip when switching.
Each initialization function is completed, and then the various initialization functions are invoked using the iterator pattern.
function init (options) { var initfuncs = [Initcontainer, Initsize, Initimgs, Initstrips, Initdefaultbackground, Inittime]; for (var i = 0, f; f = initfuncs[i++];) { f (options); } }Here, according to the priority of each initialization function, put them into an array, by looping this array, each function is called, the advantage is that when the new initialization function, simply add to the end of the array, you can even define the initialization function array outside, so that, The INIT function conforms to the opening and closing principle.
jquery has a much larger iterative approach to each, so it modifies the init function slightly.
function init (options) { var initfuncs = [Initcontainer, Initsize, Initimgs, Initstrips, Initdefaultbackground, Inittime]; Jquery.each (Initfuncs,function(i,f) { f (options); }); The first parameter of each function is an object or an array that is iterated, the second parameter is the processing callback function when iterating over each element, and the advantage is that you leave it to the loop and only care about handling it.
At this point, the definition of the initialization function is complete.
To complete the invocation of the INIT function, you need to consider generating the default options because the external can not pass any parameters.
The call to the INIT function is then completed.
functionsetdefaultoptions (Options, $container) {options= Options | | {}; Options. $container=$container; Options.width= Options.width | | ' 800px '; Options.height= Options.height | | ' 600px '; Options.stripcount= Options.stripcount | | 10; Options.interval= Options.interval | | 2; Options.basedelay= Options.basedelay | | 400; Options.delayincrement= Options.delayincrement | | 80; returnoptions; } Jquery.fn.curtain=function(options) {init (setdefaultoptions) (Options, This));
}
The Setdefaultoptions function is responsible for ensuring that each required parameter has a default value.
The normalized options are then used as the init input to invoke the INIT function.
At this point, the design pattern of the iterator completes the definition and invocation of each initialization function.
Next: "JavaScript design Pattern Practice Template Method--with the shutter switch image effect of jquery plugin (ii)"
Code: Stamp
JavaScript design Pattern Practice iterator-jquery plugin with shutter switch image effect (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
