Jquery code for text font size Switching

This article will introduce Jquery's code for implementing the font size switching effect. If you need to know it, you will not be able to go to the reference page.

The slice () method returns the selected element from an existing array.
ArrayObject. slice (start, end ).
Start is required. Specifies where to start selection. If it is a negative number, it specifies the position starting from the end of the array. That is to say,-1 refers to the last element,-2 refers to the second to last element, and so on.
End is optional. Specifies where to end the selection. This parameter is the array subscript at the end of the array fragment. If this parameter is not specified, the split array contains all elements from start to end of the array. If this parameter is a negative number, it specifies the elements starting from the end of the array.
The jQuery code is as follows:

The Code is as follows:

Copy code

<Script type = "text/javascript"> $ (Function (){ $ ("Span"). click (function (){ // Obtain the font size of para Var thisEle = $ ("# para" ).css ("font-size "); // The second parameter of parseFloat indicates the hexadecimal format of the conversion. If the value is 10, the conversion is 10. Var textFontSize = parseFloat (thisEle, 10 ); // Javascript built-in method Var unit = thisEle. slice (-2); // get the unit Var cName = $ (this). attr ("class "); If (cName = "bigger "){ TextFontSize + = 2; } Else if (cName = "smaller "){ TextFontSize-= 2; } // Set the font size of para $ ("# Para" ).css ("font-size", textFontSize + unit ); }); }); </Script>

Let's take a look at an application instance and add the function to the WordPress blog.

First, you need to use the html code content (put in the single. php file, usually under the title ):

The Code is as follows:	Copy code
<Span class = "changef"> <Ul> <Li class = "fsmall"> small </li> <Li class = "fmid"> medium </li> <Li class = "fbig"> big </li> </Ul> </Span>

Then there is the js Code (either in the header. php file or in the js file ):

The Code is as follows:

Copy code

<Script type = "text/javascript"> $ (Document). ready (function (){ $ ('. Changef ul li'). click (function () {// use the mouse click event Var class_name = $ (this). attr ('class '); // Obtain the class name, that is, the above fsmall, fmid, and fbig If (class_name = 'fsmall') // when the class name is fsmall { Fsize = 12; // Modify the font size based on your own situation $ (This). addClass ("current "); // Add another class name in the fsmall background $ ('. Fmid,. fbig'). removeClass ("current "); // If fmid and fbig are followed by the current class name, remove } If (class_name = 'fmid') // when the class name is fmid { Fsize = 14; $ (This). addClass ("current "); $ ('. Fsmall,. fbig'). removeClass ("current "); } If (class_name = 'fbig ') // when the class name is fbig { Fsize = 15; $ (This). addClass ("current "); $ ('. Fsmall,. fmid'). removeClass ("current "); } $ ('. Entry-content p,. entry-content a'0000.css ('font-size', fsize + 'px '); // Find the name of the class attribute or id attribute of the label used in the document content. Then add the font size style }); }) </Script>

The following examples are available in the theme style.css file.

The Code is as follows:	Copy code
. Entry-utility. changef ul li {float: left; margin: 0 3px 0 3px; border: 1px dashed # e0e0e0; border-radius: 5px; padding: 0px 4px 0px 4px; text-align: center; display: block; font-family: ""; cursor: pointer ;} /* Float the left of the text into a row, and then add some other styles. */ . Changef ul li. current {font-weight: bold; color: # FE872A ;}

/* When you click "small", "medium", or "large", the font size and color change. */

In this way, we have set the font size, as long as we click the size.