Jquery는 Tencent Weibo_jquery를 모방한 방송을 구현합니다.
- WBOY원래의
- 2016-05-16 16:31:021354검색
머리말: 요즘 Jquery에 대한 지식을 좀 쌓고 나니 이전보다 Jquery가 너무 강력하다는 생각이 듭니다. JavaScript에서는 수십 줄의 코드가 필요한데 Jquery에서는 몇 줄의 코드만 사용하는 경우가 많습니다. .그래서 Jquery를 열심히 공부하기로 했습니다. ㅎㅎㅎ 요즘 Jquey를 배우다보니 Jquery는 기본만 배우면 될 것 같습니다. 쉽게 해결하고 몇 가지 방법, 이벤트 등에 대해 자세히 알아보세요. 그래서 Tencent의 빈약한 방송 퍼블리싱을 모방하기 위해 여기에 Jquery를 구현했습니다.
1. 먼저 새로운 HTML 페이지를 만들고 어떤 기능을 구현하고 싶은지 소개하세요
(1) 다음과 같이 새로운 HTML 페이지를 생성합니다
(2) 첫 번째 기능은 방송 영상 위에 마우스를 올리면 연한 색상의 다른 사진으로 바뀌고, 나가면 원래 상태로 돌아옵니다
(3) 두 번째 기능은 텍스트 입력창에 텍스트를 입력하고, 단어를 입력하지 않으면 하단에 표시되는 단어 개수가 1씩 줄어드는 기능입니다. 그 개수를 초과하면 사용자는 초과된 단어 수를 묻는 메시지
(4) 세 번째 기능은 주제 버튼을 클릭하는 것입니다. 텍스트 상자가 비어 있으면 #주제 정보를 입력하세요 #가 입력되고, 텍스트 상자가 비어 있지 않으면 강조할 주제 정보를 입력하세요. 아무것도 표시되지 않습니다.
(5) 네 번째 기능은 친구를 클릭하면 아래에 레이어가 생성되어 사용자의 친구를 표시하는 것입니다. 사용자가 친구를 클릭하면 텍스트 상자에 이름이 표시됩니다.
(6) 다섯 번째 기능은 사용자가 이모티콘을 클릭하면 QQ에서 자주 사용하는 이모티콘이 표시되며, 사용자가 클릭할 이모티콘을 선택하여 텍스트 상자에 표시하는 것은 기본적으로 동일합니다. 네 번째 기능으로 다음과 같습니다. 기능은 아래에 설명되어 있습니다
2. 첫 번째 기능
(1) 기능표시도
단순한 슬라이딩 효과라 스크린샷이 잘 안보여서 코드만 올렸습니다
(2) 코드
코드 복사 코드는 다음과 같습니다.
//그림을 위아래로 움직이는 변화반응 구현
$("#sendBox :button.sendBtn").mouseover(function () {
$(this).css("BackgroundPosition", "0 -196px");
}).mouseout(함수 () {
$(this).css("BackgroundPosition", "-117px -165px");
});
3. 두 번째 기능
(1) 기능 스크린샷
(2) 코드
코드 복사 코드는 다음과 같습니다.
//입력 문자 수의 변화를 인식
$("#msgTxt").change(함수 () {
var world = $("#msgTxt").val();
var 길이 = 140 - world.length;
if (길이 < 0) {
$("#sendBoxspan.countTxt").html("" Math.abs(length) " 단어를 초과했습니다."); > }그밖에 {
$("#sendBoxspan.countTxt").html("" 길이 "단어");
}
});
setInterval(함수 () {
$("#msgTxt").change();
}, 20);
(1) 기능 스크린샷
코드 복사 코드는 다음과 같습니다.
//출력된 정보의 텍스트를 확인합니다. (빨간색으로 표시할 주제 정보를 입력해주세요.)
/*
jQuery용 텍스트 선택 방법 확장
*/
$.fn.selectRange = 함수(시작, 끝) {
var curObj = $(this).get(0);
if (!curObj) return;
else if (curObj.setSelectionRange) {
curObj.focus();
curObj.setSelectionRange(시작, 종료);
} /* WebKit */
else if (curObj.createTextRange) {
var range = curObj.createTextRange();
range.collapse(true);
range.moveEnd('문자', end);
range.moveStart('character', start);
range.select();
/* IE */
else if (curObj.selectionStart) {
경고('aaaaaaaa');
CurObj.selectionStart = 시작;
CurObj.selectionEnd = 끝;
}
};
//주제 출력 클릭#주제 정보를 입력해주세요#
$("#funBox a.creatNew").click(function () {
If ($.trim($("#msgTxt").val()).length == 0) {
$("#msgTxt").val("#주제 정보를 입력하세요#").selectRange(1, 8);
}
});
//친구버튼 클릭시 친구정보 표시 구현
var friendList = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", " Yuanfang" ];
$("#funBox a.atSome").click(함수 () {
//위에 정의된 레벨과 같은 ID를 가진 div 레이어는 position:absolution
입니다. $("
//$.each를 사용하여 배열 값을 반복하고 레이어에 추가합니다
If ($("#level").text() == "") {
$.each(friendList, function () {
//레이어에 li 스타일 변환을 탐색하고 추가합니다
$("@" this " ").css("cursor", "pointer").mouseover(function () {
$(this).css("배경색상", "노란색").siblings().css("배경색상", "흰색");
}).appendTo($("#ul")).click(함수 () {
//클릭 스타일 구현 시
에 값을 씁니다. $("#msgTxt").val($("#msgTxt").val() $(this).text());
})
})
};
//사용자가 버튼을 클릭했는지 확인하는 방법
$("#level").mouseleave(함수 () {
$("#level").remove();
})
//생성된 모듈의 위치를 지정
$("#level").css("top", $(this).offset().top $(this).height "px").css("왼쪽", $(this).offset(). 왼쪽 "px");
});
//QQ 이모티콘 기능 구현
var userFaces = { '0.gif': '스마일', '1.gif': '입술', '2.gif': 'color', '3.gif': 'daze', '4.gif': '뿌듯', '5.gif': '울다', '6.gif': '부끄러워', '7.gif': '닥쳐', '8.gif': '잠', '9.gif' : '울다', '10.gif': '당황하다', '11.gif': '화난다', '12.gif': '개구쟁이', '13.gif': '이빨 드러냄', '14. ': '놀랐다', '15.gif': '슬프다', '16.gif': '멋지다', '17.gif': '식은땀', '18.gif': '미쳤어', '19 . gif': '토하다', '20.gif': '웃음', '21.gif': '귀엽다', '22.gif': '눈 굴림', '23.gif': '거만한', ' 24 .gif': '배가 고프다', '25.gif': '졸리다', '26.gif': '겁먹다', '27.gif': '땀이 난다', '28.gif': '멍청한 웃음', ' 29.gif': '군인', '30.gif': '투쟁', '31.gif': '맹세', '32.gif': '질문', '33.gif': '쉿', ' 34.gif': '기절', '35.gif': '고문', '36.gif': '퇴화', '37.gif': '해골', '38.gif': '비트', ' 39.gif': '안녕', '40.gif': '땀 닦아', '41.gif': '코를 골다', '42.gif': '박수', '43.gif': '당황' '크다', '44.gif': '웃음', '45.gif': '왼쪽 콧노래', '46.gif': '오른쪽 콧노래', '47.gif': '하품', ' 48.gif ': '경멸', '49.gif': '불만', '50.gif': '울 뻔', '51.gif': '교활함', '52.gif': '키스', '53. gif': '무서움', '54.gif': '나쁨', '55.gif': '쵸퍼', '56.gif': '수박', '57.gif': '맥주', '58. gif': '농구', '59.gif': '탁구', '60.gif': '커피', '61.gif': '밥', '62.gif': '돼지머리', ' 63.gif': '장미', '64.gif': '위더', '65.gif': '사랑을 보여줘', '66.gif': '사랑', '67.gif': '마음이 아프다' , '68.gif': '케이크', '69.gif': '번개', '70.gif': '폭탄', '71.gif': '칼', '72.gif': '축구' , '73.gif': '무당벌레', '74.gif': '똥', '75.gif': '달', '76.gif': '해', '77.gif': '선물' , '78.gif': '포옹', '79.gif': '강함', '80.gif': '약함', '81.gif': '악수', '82.gif': '승리' , '83.gif': '주먹', '84.gif': '유혹', '85.gif': '주먹', '86.gif': '불량', '87.gif': '사랑해요' ', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '사랑', '91.gif': '키스를 날려보세요', '92.gif' : '점프', '93.gif': '떨림', '94.gif': '불타오르다', '95.gif': '원을 그리며 돌아서', '96.gif': 'kowtow', '97. ': '뒤로 돌아서', '98.gif': '줄넘기', '99.gif': '손 흔들기', '100.gif': '신난다', '101.gif': '스트리트 댄스', ' 102. gif': '키스', '103.gif': '왼쪽 태극권', '104.gif': '오른쪽 태극권', '105.gif': '진정', '106.gif': ' 현기증', '107.gif': '불만', '108.gif': '잠', '109.gif': '개구쟁이', '110.gif': '욕설', '111.gif': ' 화난' , '112.gif': '웃음', '113.gif': '웃는다', '114.gif': '충격', '115.gif': '囧' };
$("#funBox a.insertFace").click(함수 () {
$("").appendTo("#funBox");
$.each(userFaces, 함수(키, 값) {
$("![](faces/" key " "value")
").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
$("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//위와 동일, 사용자가 버튼을 클릭했는지 확인하는 방법
$("#Userfaces").mouseleave(함수 () {
$("#Userfaces").remove();
});
//배치
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("왼쪽", $(this).offset(). 왼쪽 "px");
});
//출력된 정보의 텍스트를 확인합니다. (빨간색으로 표시할 주제 정보를 입력해주세요.)
/*
jQuery용 텍스트 선택 방법 확장
*/
$.fn.selectRange = 함수(시작, 끝) {
var curObj = $(this).get(0);
if (!curObj) return;
else if (curObj.setSelectionRange) {
curObj.focus();
curObj.setSelectionRange(시작, 종료);
} /* WebKit */
else if (curObj.createTextRange) {
var range = curObj.createTextRange();
range.collapse(true);
range.moveEnd('문자', end);
range.moveStart('character', start);
range.select();
/* IE */
else if (curObj.selectionStart) {
경고('aaaaaaaa');
CurObj.selectionStart = 시작;
CurObj.selectionEnd = 끝;
}
};
//주제 출력 클릭#주제 정보를 입력해주세요#
$("#funBox a.creatNew").click(function () {
If ($.trim($("#msgTxt").val()).length == 0) {
$("#msgTxt").val("#주제 정보를 입력하세요#").selectRange(1, 8);
}
});
5. 네 번째 기능
(1) 기능 스크린샷
(2)코드
코드 복사 코드는 다음과 같습니다.
//친구버튼 클릭시 친구정보 표시 구현
var friendList = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", " Yuanfang" ];
$("#funBox a.atSome").click(함수 () {
//위에 정의된 레벨과 같은 ID를 가진 div 레이어는 position:absolution
입니다. $("
//$.each를 사용하여 배열 값을 반복하고 레이어에 추가합니다
If ($("#level").text() == "") {
$.each(friendList, function () {
//레이어에 li 스타일 변환을 탐색하고 추가합니다
$("
$(this).css("배경색상", "노란색").siblings().css("배경색상", "흰색");
}).appendTo($("#ul")).click(함수 () {
//클릭 스타일 구현 시
에 값을 씁니다. $("#msgTxt").val($("#msgTxt").val() $(this).text());
})
})
};
//사용자가 버튼을 클릭했는지 확인하는 방법
$("#level").mouseleave(함수 () {
$("#level").remove();
})
//생성된 모듈의 위치를 지정
$("#level").css("top", $(this).offset().top $(this).height "px").css("왼쪽", $(this).offset(). 왼쪽 "px");
});
6. 다섯번째 기능
(1) 기능 스크린샷
(2)코드
코드 복사 코드는 다음과 같습니다.
//QQ 이모티콘 기능 구현
var userFaces = { '0.gif': '스마일', '1.gif': '입술', '2.gif': 'color', '3.gif': 'daze', '4.gif': '뿌듯', '5.gif': '울다', '6.gif': '부끄러워', '7.gif': '닥쳐', '8.gif': '잠', '9.gif' : '울다', '10.gif': '당황하다', '11.gif': '화난다', '12.gif': '개구쟁이', '13.gif': '이빨 드러냄', '14. ': '놀랐다', '15.gif': '슬프다', '16.gif': '멋지다', '17.gif': '식은땀', '18.gif': '미쳤어', '19 . gif': '토하다', '20.gif': '웃음', '21.gif': '귀엽다', '22.gif': '눈 굴림', '23.gif': '거만한', ' 24 .gif': '배가 고프다', '25.gif': '졸리다', '26.gif': '겁먹다', '27.gif': '땀이 난다', '28.gif': '멍청한 웃음', ' 29.gif': '군인', '30.gif': '투쟁', '31.gif': '맹세', '32.gif': '질문', '33.gif': '쉿', ' 34.gif': '기절', '35.gif': '고문', '36.gif': '퇴화', '37.gif': '해골', '38.gif': '비트', ' 39.gif': '안녕', '40.gif': '땀 닦아', '41.gif': '코를 골다', '42.gif': '박수', '43.gif': '당황' '크다', '44.gif': '웃음', '45.gif': '왼쪽 콧노래', '46.gif': '오른쪽 콧노래', '47.gif': '하품', ' 48.gif ': '경멸', '49.gif': '불만', '50.gif': '울 뻔', '51.gif': '교활함', '52.gif': '키스', '53. gif': '무서움', '54.gif': '나쁨', '55.gif': '쵸퍼', '56.gif': '수박', '57.gif': '맥주', '58. gif': '농구', '59.gif': '탁구', '60.gif': '커피', '61.gif': '밥', '62.gif': '돼지머리', ' 63.gif': '장미', '64.gif': '위더', '65.gif': '사랑을 보여줘', '66.gif': '사랑', '67.gif': '마음이 아프다' , '68.gif': '케이크', '69.gif': '번개', '70.gif': '폭탄', '71.gif': '칼', '72.gif': '축구' , '73.gif': '무당벌레', '74.gif': '똥', '75.gif': '달', '76.gif': '해', '77.gif': '선물' , '78.gif': '포옹', '79.gif': '강함', '80.gif': '약함', '81.gif': '악수', '82.gif': '승리' , '83.gif': '주먹', '84.gif': '유혹', '85.gif': '주먹', '86.gif': '불량', '87.gif': '사랑해요' ', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '사랑', '91.gif': '키스를 날려보세요', '92.gif' : '점프', '93.gif': '떨림', '94.gif': '불타오르다', '95.gif': '원을 그리며 돌아서', '96.gif': 'kowtow', '97. ': '뒤로 돌아서', '98.gif': '줄넘기', '99.gif': '손 흔들기', '100.gif': '신난다', '101.gif': '스트리트 댄스', ' 102. gif': '키스', '103.gif': '왼쪽 태극권', '104.gif': '오른쪽 태극권', '105.gif': '진정', '106.gif': ' 현기증', '107.gif': '불만', '108.gif': '잠', '109.gif': '개구쟁이', '110.gif': '욕설', '111.gif': ' 화난' , '112.gif': '웃음', '113.gif': '웃는다', '114.gif': '충격', '115.gif': '囧' };
$("#funBox a.insertFace").click(함수 () {
$("").appendTo("#funBox");
$.each(userFaces, 함수(키, 값) {
$("
$("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//위와 동일, 사용자가 버튼을 클릭했는지 확인하는 방법
$("#Userfaces").mouseleave(함수 () {
$("#Userfaces").remove();
});
//배치
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("왼쪽", $(this).offset(). 왼쪽 "px");
});
자, 우리가 가져야 할 기능은 다 있어요. 꾸미기는 친구들이 알아서 할 수 있어요
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.