Introduction: Because these days in learning jquery some knowledge, than before the feeling that jquery is too powerful, many very simple features in JavaScript to write dozens of lines of code in the jquery only a few lines of code is done, so I decided to learn to learn jquery, Support me, hehe, these days of learning jquey make me feel that the use of jquery is not very difficult, I feel jquery as long as the selector to learn almost, the other basic can be solved, more understanding of some methods, events and so on. So I'm here to implement a jquery implementation of the Tencent meager radio release.
1. First create a new HTML page and introduce what I want to implement
(1) Create a new HTML page as follows
(2) The first function, when the mouse slide to the broadcast picture above the words will become another color of the light point of the picture, leave the original state of return
(3) The second function, when the input text into the box when the input text does not input a word, the bottom of the word number of the place minus 1, if more than, will prompt the user more than how many words
(4) The third function, click the topic button, if the text box is empty, enter the # Please enter the topic information #, and please enter the topic information highlighted, if the text box is not empty then nothing input
(5) The fourth function, when the click of a friend will generate a layer below, showing the user's friend, when the user clicks a friend will display the name in the text box
(6) The fifth function, when the user clicks the expression, will display QQ commonly used expression, then the user may select the expression click to display in the text box, this and the fourth function basically is same, the following one one function says the following
2. The first function
(1) function display diagram
Because this is just a simple sliding effect, so the screenshot does not look obvious, only the code is posted
(2) Code
Copy Code code as follows:
To achieve the movement of pictures and down the change reaction
$ ("#sendBox: Button.sendbtn"). MouseOver (function () {
$ (this). CSS ("backgroundposition", "0-196px");
}). mouseout (function () {
$ (this). CSS ("backgroundposition", " -117px-165px");
});
3. Second function
(1) Function screenshot
(2) Code
Copy Code code as follows:
Realize the change of input word number
$ ("#msgTxt"). Change (function () {
var world = $ ("#msgTxt"). Val ();
var length = 140-world.length;
if (length < 0) {
$ ("#sendBox span.counttxt"). HTML ("You've exceeded the <em style= ' color: #E56C0A; ' > "+ math.abs (length) +" </em> word ");
}else {
$ ("#sendBox span.counttxt"). HTML ("You can also enter <em>" + length + "</em> word");
}
});
SetInterval (function () {
$ ("#msgTxt"). Change ();
}, 20);
4. Third function
(1) Function screenshot
(2) Code
Copy Code code as follows:
Text that confirms the output of the message (Please enter the topic information to display red)
/*
How to extend a select text for jquery
*/
$.fn.selectrange = function (start, end) {
var curobj = $ (this). Get (0);
if (!curobj) return;
else if (Curobj.setselectionrange) {
Curobj.focus ();
Curobj.setselectionrange (start, end);
}/* WebKit * *
else if (Curobj.createtextrange) {
var range = Curobj.createtextrange ();
Range.collapse (TRUE);
Range.moveend (' character ', end);
Range.movestart (' character ', start);
Range.Select ();
}/* IE * *
else if (Curobj.selectionstart) {
Alert (' aaaaaaaa ');
Curobj.selectionstart = start;
Curobj.selectionend = end;
}
};
Click on the topic Output # Please enter the topic information #
$ ("#funBox a.creatnew"). Click (function () {
if ($.trim ($ ("#msgTxt"). Val ()). Length = = 0) {
$ ("#msgTxt"). Val ("#请输入话题信息 #"). Selectrange (1, 8);
}
});
5. Fourth function
(1) Function screenshot
(2) Code
Copy Code code as follows:
To display a friend's message when you click the Friend button
var friendlist = ["Loyal", "Xiao Meng", "Ren first dragon", "either David", "Maria", "Han Guanlong", "Shengjing", "Fei Fei", "Xiao Yin", "Yuan Fang"];
$ ("#funBox a.atsome"). Click (function () {
The div layer that defines the level of ID above is position:absolution
$ ("<div id= ' level ' ><ul id= ' ul ' style= ' Margin:0;padding:0;list-style-type:none ' ></ul></div") > "). Appendto (" #funBox ");
Use the $.each loop to iterate through the values of the array to add to the layer
if ($ ("#level"). Text () = "") {
$.each (friendlist, function () {
To add an Li style transform to the layer
$ ("<li>@" + This + "</li>"). CSS ("cursor", "pointer"). MouseOver (function () {
$ (this). CSS ("BackgroundColor", "yellow"). Siblings (). CSS ("BackgroundColor", "white");
}). Appendto ($ ("#ul")). Click (function () {
When you implement a click style, the value is written to the
$ ("#msgTxt"). Val ($ ("#msgTxt"). Val () + $ (this). text ());
})
})
};
How to tell if a user clicked on a button
$ ("#level"). MouseLeave (function () {
$ ("#level"). Remove ();
})
Placement of the Created module
$ ("#level"). CSS ("Top", $ (this). Offset (). Top + $ (this). Height + "px". CSS (' left ', $ (this). Offset (). Left + "px");
});
6. Fifth function
(1) Function screenshot
(2) Code
Copy Code code as follows:
Realize the function of QQ expression
var userfaces = {' 0.gif ': ' Smile ', ' 1.gif ': ' twitched ', ' 2.gif ': ' Color ', ' 3.gif ': ' Daze ', ' 4.gif ': ' Proud ', ' 5.G ' If ': ' Tears ', ' 6.gif ': ' Shy ', ' 7.gif ': ' Shut Up ', ' 8.gif ': ' Sleep ', ' 9.gif ': ' Cry ', ' 10.gif ': ' Embarrassed ', ' 11.gif ': ' Angry ', ' 12.gif ': ' Naughty ', ' 13. GIF ': ' Bared teeth ', ' 14.gif ': ' Surprise ', ' 15.gif ': ' sad ', ' 16.gif ': ' Cool ', ' 17.gif ': ' Cold Sweat ', ' 18.gif ': ' Mad ', ' 19.gif ': ' Vomit ', ' 20.gif ': ' Laugh ', ' 21.gif ': ' cute ', ' 22.gif ': ' supercilious ', ' 23.gif ': ' Arrogant ', ' 24.gif ': ' Hunger ', ' 25.gif ': ' Sleepy ', ' 26.gif ': ' Panic ', ' 27.gif ': ' Sweat ', ' 28.gif ': ' Shing ', ' 29.gif ': ' Soldier ', ' 30.gif ': ' Struggle ', ' 31.gif ': ' Curse ', ' 32.gif ': ' Doubt ', ' 33.gif ': ' Hush ', ' 34.gif ': ' Halo ', ' 35.gif ': ' Torture ', ' 36.gif ' ': ' fade ', ' 37.gif ': ' Skeleton ', ' 38.gif ': ' Knock ', ' 39.gif ': ' Goodbye ', ' 40.gif ': ' Wipe the sweat ', ' 41.gif ': ' Pick nose ', ' 42.gif ': ' Applause ', ' 43.gif ': ' A big embarrassment ', ' 44.gif ': ' Bad laugh ', ' 45.gif ': ' Left hem ', ' 46.gif ': ' Right hem ', ' 47.gif ': ' Yawn ', ' 48.gif ': ' Despise ', ' 49.gif ': ' wronged ', ' 50.gif ': ' Quick cry ', ' 51.gif ' : ' Sinister ', ' 52.gif ': ' Kiss ', ' 53.gif ': ' Scare ', ' 54.gif ': ' Poor ', ' 55.gif ': ' Chopper ', ' 56.gif ': ' Watermelon ', ' 57.gif ': ' Beer ', ' 58.gif ': ' Basketball ', ' 5 9.gif ': ' Ping-Pong ', ' 60.gif ':' Coffee ', ' 61.gif ': ' Rice ', ' 62.gif ': ' Pig head ', ' 63.gif ': ' Rose ', ' 64.gif ': ' fade ', ' 65.gif ': ' Love ', ' 66.gif ': ' Heart ', ' 67.gif ': ' Heartbreak ', ' 68.g ' If ': ' Cake ', ' 69.gif ': ' Lightning ', ' 70.gif ': ' Bombs ', ' 71.gif ': ' Knives ', ' 72.gif ': ' Football ', ' 73.gif ': ' Ladybug ', ' 74.gif ': ' Poop ', ' 75.gif ': ' Moon ', ' 76.gif ': ' Sun ', ' 77.gif ': ' Gift ', ' 78.gif ': ' Hug ', ' 79.gif ': ' strong ', ' 80.gif ': ' weak ', ' 81.gif ': ' Shake hands ', ' 82.gif ': ' Victory ', ' 83.gif ': ' Hold Fist ', ' 84.gif ': ' Seduce ', ' 85.gif ': ' Fist ', ' 86.gif ': ' Poor ', ' 87.gif ': ' Love You ', ' 88.gif ': ' NO ', ' 89.gif ': ' OK ', ' 90.gif ': ' Love ', ' 91.gi ' F ': ' Kiss ', ' 92.gif ': ' Jump ', ' 93.gif ': ' Shivering ', ' 94.gif ': ' Retort fire ', ' 95.gif ': ' Circle ', ' 96.gif ': ' Kowtow ', ' 97.gif ': ' Back ', ' 98.gif ': ' Jump Rope ', ' 99.gif ': ' Wave ', ' 100.gif ': ' Thrill ', ' 101.gif ': ' Hip-Hop ', ' 102.gif ': ' Kiss ', ' 103.gif ': ' Left Taiji ', ' 104.gif ': ' Right Tai Chi ', ' 105.gif ': ' Calm ', ' 1 06.gif ': ' Halo ', ' 107.gif ': ' Dissatisfied ', ' 108.gif ': ' Sleep ', ' 109.gif ': ' Little Naughty ', ' 110.gif ': ' Curse ', ' 111.gif ': ' Angry ', ' 112.gif ': ' Laughing ', ' 113. GIF ': ' Smile ', ' 114.gif ': ' Shock ', ' 115.gif ': ' embarrassing '};
$ ("#funBox a.insertface"). Click (function () {
$ ("<div id= ' userfaces ' ></div>"). Appendto ("#funBox");
$.each (userfaces, function (key, value) {
$ ("$ ("#msgTxt"). Val ($ ("#msgTxt"). Val () + "[" + $ (This). attr ("title") + "]");
});
});
As with the above, how to determine whether a user clicked a button
$ ("#Userfaces"). MouseLeave (function () {
$ ("#Userfaces"). Remove ();
});
Placing position
$ ("#Userfaces"). CSS ("Top", $ (this). Offset (). Top + $ (this). Height + "px". CSS (' left ', $ (this). Offset (). Left + "px");
});
All right, all the features are there, landscaping things, little friends to come to their own
