Jquery implements broadcasting imitating Tencent Weibo_jquery

Preface: Since I have been learning some knowledge about Jquery these days, I feel that Jquery is too powerful than before. Many simple functions used to require dozens of lines of code in JavaScript but only use a few lines of code in Jquery. That’s it, so I decided to study Jquery hard. Please support me. Haha, learning Jquey these days has made me feel that it is not difficult to use Jquery. I feel that Jquery only needs to learn the selector. The basics can be easily solved, learn more about some methods, events, etc. So I implemented a Jquery here to imitate Tencent's meager broadcast publishing.

1. First create a new HTML page and introduce what function I want to achieve

(1) Create a new HTML page as follows

(2) The first function, when the mouse slides over the broadcast image, it will turn into another picture with a lighter color, and it will return to the original state when leaving it

(3) The second function is that when you enter text into the text input box and do not enter a word, the number of words indicated at the bottom is reduced by 1. If it exceeds the number, the user will be prompted how many words have been exceeded

(4) The third function is to click the topic button. If the text box is empty, #Please enter topic information # will be entered, and please enter the topic information to highlight. If the text box is not empty, nothing will be displayed. Do not enter

(5) The fourth function is that when a friend is clicked, a layer will be generated underneath to display the user’s friends. When the user clicks a friend, the name will be displayed in the text box

(6) The fifth function, when the user clicks on the emoticon, the commonly used emoticons of QQ will be displayed, and then the user can select the emoticon to click and display in the text box. This is basically the same as the fourth function, as follows The functions are described below

2. The first function

　(1) Function display diagram

Since this is just a simple sliding effect, the screenshot does not look obvious, so I only posted the code

　(2) Code

Copy code The code is as follows:

//Realize the change reaction of moving the picture up and down
　　$("#sendBox :button.sendBtn").mouseover(function () {
　　 $(this).css("backgroundPosition", "0 -196px");
　　}).mouseout(function () {
​​ $(this).css("backgroundPosition", "-117px -165px");
　　});

3. The second function

　(1) Function screenshots

　

　(2) Code

Copy code The code is as follows:

//Realize changes in the number of input characters
　　$("#msgTxt").change(function () {
​var world = $("#msgTxt").val();
var length = 140 - world.length;
​if (length $("#sendBox span.countTxt").html("You have exceeded " Math.abs(length) " words");
}else {
​$("#sendBox span.countTxt").html("You can also enter " length "words");
}
});
​ setInterval(function () {
​$("#msgTxt").change();
}, 20);

4. The third function

　(1) Function screenshots

　

　(2)Code

Copy code The code is as follows:

//Confirm the text of the output information (please enter the topic information to display in red)
/*
​​Extend a method for selecting 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 topic output#Please enter topic information#
​​​ $("#funBox a.creatNew").click(function () {
If ($.trim($("#msgTxt").val()).length == 0) {
                 $("#msgTxt").val("#Please enter topic information#").selectRange(1, 8);
         }
});

5. The fourth function

　(1) Function screenshots

　

　(2)Code

Copy code The code is as follows:

//Realize the display of friend information when clicking the friend button
var friendList = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", " Yuanfang"];
$("#funBox a.atSome").click(function () {
//The div layer with id as level defined above is position:absolution
$("

div>").appendTo("#funBox");
//Use $.each to loop through the array values ​​and add them to the layer
If ($("#level").text() == "") {
                   $.each(friendList, function () {
//Traverse and add li style transformation to the layer
$("

@" this "

").css("cursor", "pointer").mouseover(function () {
                $(this).css("backgroundColor", "yellow").siblings().css("backgroundColor", "white");
                }).appendTo($("#ul")).click(function () {
//When implementing the click style, write the value to
               $("#msgTxt").val($("#msgTxt").val() $(this).text());
            })
         })
};
//How to determine whether a user clicked a button
$("#level").mouseleave(function () {
​​​​​ $("#level").remove();
})
//Place the location of the created module
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). left "px");
});

6. The fifth function

　(1) Function screenshots

　

　(2)Code

Copy code The code is as follows:

//Realize the function of QQ emoticons
var userFaces = { '0.gif': 'smile', '1.gif': 'lip', '2.gif': 'color', '3.gif': 'daze', '4.gif': 'Proud', '5.gif': 'Crying', '6.gif': 'Shy', '7.gif': 'Shut up', '8.gif': 'Sleep', '9.gif' : 'crying', '10.gif': 'embarrassed', '11.gif': 'angry', '12.gif': 'naughty', '13.gif': 'baring teeth', '14. gif': 'surprised', '15.gif': 'sad', '16.gif': 'cool', '17.gif': 'cold sweat', '18.gif': 'crazy', '19 .gif': 'vomit', '20.gif': 'smirk', '21.gif': 'cute', '22.gif': 'eye roll', '23.gif': 'arrogant', ' 24.gif': 'hungry', '25.gif': 'sleepy', '26.gif': 'frightened', '27.gif': 'sweating', '28.gif': 'silly laughter', '29.gif': 'Soldier', '30.gif': 'Struggle', '31.gif': 'Swear', '32.gif': 'Question', '33.gif': 'Hush', '34.gif': 'faint', '35.gif': 'torture', '36.gif': 'degeneration', '37.gif': 'skeleton', '38.gif': 'beat', '39.gif': 'Goodbye', '40.gif': 'Wipe sweat', '41.gif': 'Pick your nose', '42.gif': 'Applause', '43.gif': 'Embarrassment' Big', '44.gif': 'Smirk', '45.gif': 'Left humming', '46.gif': 'Right humming', '47.gif': 'Yawn', ' 48.gif': 'contempt', '49.gif': 'grievance', '50.gif': 'almost crying', '51.gif': 'insidious', '52.gif': 'kiss ', '53.gif': 'Scary', '54.gif': 'Poor', '55.gif': 'Chopper', '56.gif': 'Watermelon', '57.gif': 'Beer ', '58.gif': 'Basketball', '59.gif': 'Ping Pong', '60.gif': 'Coffee', '61.gif': 'Rice', '62.gif': 'Pig Head ', '63.gif': 'Rose', '64.gif': 'Wither', '65.gif': 'Show love', '66.gif': 'Love', '67.gif': 'Heart Broken', '68.gif': 'Cake', '69.gif': 'Lightning', '70.gif': 'Bomb', '71.gif': 'Knife', '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': 'handshake', '82.gif': 'Victory', '83.gif': 'Fist', '84.gif': 'Seduce', '85.gif': 'Fist', '86.gif': 'Poor', '87.gif': 'Love you', '88.gif': 'NO', '89.gif': 'OK', '90.gif': 'Love', '91.gif': 'Blow a kiss', '92.gif' : 'jumping', '93.gif': 'trembling', '94.gif': 'burning', '95.gif': 'turning in circles', '96.gif': 'kowtow', '97. gif': 'turn back', '98.gif': 'skipping rope', '99.gif': 'waving', '100.gif': 'excited', '101.gif': 'street dance', '102. gif': 'Kiss', '103.gif': 'Left Tai Chi', '104.gif': 'Right Tai Chi', '105.gif': 'Calm', '106.gif': 'Dizzy', '107.gif': 'dissatisfaction', '108.gif': 'sleep', '109.gif': 'naughty', '110.gif': 'cursing', '111.gif': 'angry' , '112.gif': 'laughing', '113.gif': 'smiling', '114.gif': 'shocked', '115.gif': '囧' };
$("#funBox a.insertFace").click(function () {
$("

").appendTo("#funBox");
$.each(userFaces, function (key, value) {
$("").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
         $("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//Same as above, how to determine whether a user clicked a button
$("#Userfaces").mouseleave(function () {
          $("#Userfaces").remove();
});
//Placement
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). left "px");
});

Alright, we have all the functions we should have. As for beautification, friends can do it by themselves