JS for skin-changing effects

First, the basic principle of JS skin change

The basic principle is simple, is to use JS to switch the corresponding CSS style sheet file. For example, the navigation site Hao123 on the top right of the Web page skin function. In addition to switching between CSS stylesheet files, the usual web skinning also requires a Cookie to record the user's previously replaced skin so that the next time the user accesses it, the last user-configured option can be automatically used. Then the basic workflow comes out: Visit the webpage--js read cookie--if not, use the default skin--if available, use the specified skin; The user clicks the Skinning option--js control to replace the corresponding CSS style sheet--write the skin option into a Cookie to save.

Second, pre-required preparatory work

1, different skins corresponding to different CSS files, prepare a lot of CSS style files:

if blue corresponds:skincolour_blue.css

Yellow correspondence:skincolour_yellow.css

2, the pictures are stored under different skin folders:

For example, blue corresponds to: Blue folder; yellow corresponds to: Yellow folder.

Put different skin color pictures in the corresponding folder, the picture switching principle: In the skin function set the IMG tag src path attribute to toggle the picture.

Third, the process of skin-changing realization

1, introduce CSS file at the beginning of Web page

<href= "Content/aps/skinnone.css"  rel= "stylesheet"  type  = "Text/css"  ID= "Skincolour"/>

2. Define 2 skin toggle buttons on the page

 <  span  class  = "Skin-btn-blue"   onclick  = "Changesyle (' Blue ');"  >,  blue </ span  >  <  span  class  = "Skin-btn-yellow"   onclick  = "Changesyle (' Yellow ');"  >,  yellow </ span  >  

3, in the JS code, through the function trigger switch <link> tag CSS path, and the path of the picture, to achieve the skin change

//the introduction of skin CSS path <link> tags to selectvarCSSStyle = document.getElementById (' Skincolour '));

Skin changing functionfunctionChangesyle (name) {event.stoppropagation (); Cssstyle.href= "Content/aps/skincolour_" + name + ". css";//Save skin color nameSetstorage ("Skinname", name);//Toggle the path of a picture$ ('. Home-breturn '). attr (' src ', ' img/' + name + '/home_yzl_8.png '));$('. Home-bhome '). attr (' src ', ' img/' + name + '/home_yzl_7.png ');}//HTML5 setting up local storagefunctionsetstorage (sname, Vul) {Window.localStorage.setItem (sname, Vul);}functionGetStorage (attr) {varstr =Window.localStorage.getItem (attr);returnstr;}
Access local storage, get skin namevarCssname = GetStorage ("Skinname");
//Determine ifThere is a skin name, use the obtained skin name, do not use the defaultif(Cssname && Cssname! =NULL) {Cssstyle.href= "Content/aps/skincolour_" + Cssname + ". css";//Set Picture path$ ('. Home-breturn '). attr (' src ', ' img/' + cssname + '/home_yzl_8.png ');$('. Home-bhome '). attr (' src ', ' img/' + cssname + '/home_yzl_7.png ');}Else{//Use the blue default path without skinCssstyle.href = "Content/aps/skincolour_blue.css";//Set default picture path$ ('. Home-breturn '). attr (' src ', ' img/blue/home_yzl_8.png '));$('. Home-bhome '). attr (' src ', ' img/blue/home_yzl_7.png '));}

Iv. to summarize the problems of skin changing1,js dynamically generated label peels, such as JQ via string concatenation, added to the IMG Picture label on the page

1), through the local storage to get the skin name function to take the skin name value, to determine whether the value has, if so, use to take to the skin name, did not take the value of the default blue Blue

    // HTML5 get local storage skins    var cssName2 = GetStorage ("Skinname");     // determine the name of the skin, switch the picture path    var Imgsrccinema;     if NULL ) {        = cssName2;     Else {        = ' Blue ';    };

2), in the JS dynamic generation of the local notation: through the string concatenation,+ variable to achieve

        var liimg = ' <div class= ' film-vidctn3 ' ></div> ';        $ ("." + pos). HTML (LIIMG);

2, click the button to change the color effect of skin:

You can define a class with the same name in different CSS files, and the styles are written separately according to different skins.

For example: in blue skin skincolour_blue.css

/* JS when clicked on the style */ . Zhleftclick {    background-color: rgba (0, 201, 212, 0.5)!important;}

Skincolour_yellow.css in yellow skin

/* 1,js the style when clicked */ . Zhleftclick {    background-color: #43490f!important;}

Add class in JS can solve different skin Click effect, the principle is: in different skin state, the skin CSS file is not the same to achieve.

function () {            $ ('. Icon01 '). Removeclass (' Zhleftclick '). addclass (' Zhleftclick ');     })

3, another kind of click discoloration effect Skin:

First get the skin name through local storage, then define a color variable, determine the different skin names, to change the contents of the variable, to achieve under different skin click Effect.

    //HTML5 get local storage skins    varCssName2 = GetStorage ("Skinname"); //Click to change color    varColorbright;//Click on the background to turn bright   if(cssName2 && cssName2! =NULL) {               if(cssName2 = = "Blue") {Colorbright= "RGB (226, 109, 73)"; } Else if(cssName2 = = "Yellow") {Colorbright= "#acbf04"; } Else if(cssName2 = = "Red") {                    }    } Else {        //without skin, the default is blueColorbright = "RGB (226, 109, 73)"; };$("#ul input:eq (0)"). attr ("Data-num", "1"). CSS ({background: "+ Colorbright +"});

After writing, according to your project to solve the problem of the method of writing, incomplete, please give more advice.

　　

　　

JS for skin-changing effects