JQ를 사용하여 데모 animation_jquery로 가장 기본적인 페이드인 및 페이드아웃 효과 작성
- WBOY원래의
- 2016-05-16 16:32:271177검색
jQuery는 다양한 특수 효과에 대한 증가하는 요구를 충족하는 데 사용되는 JavaScript의 확장인 JavaScript 라이브러리입니다. 그 본질은 자바스크립트입니다
JQ를 설명하기 위해 기본 JQ 프로그램을 작성해 보겠습니다.
1. 기본 목표
웹 페이지에는 다음 세 가지 버튼이 있습니다. 하나는 텍스트를 숨길 수만 있고 다른 하나는 텍스트를 표시할 수 있으며 한 번 클릭하면 표시되고, 다른 하나는 텍스트를 표시할 수 있습니다. 주기는 끝이 없습니다.
2. 제작과정
1. 먼저 JQ 공식 홈페이지에서 JQ 지원 파일을 다운로드하여 사이트 폴더에 넣어야 합니다. 해당 지원 파일은 jQuery1.11입니다. jQuery 공식 홈페이지에 가시면 기존 브라우저 IE6과 호환되는 jQuery1.11을 다운로드하실 수 있습니다. 단, 기존 브라우저 IE6과 호환되지 않는 jQuery2는 다운로드하실 수 없습니다.
2. 전체 웹페이지 코드는 설명을 위해 조각으로 나누어져 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("#text").hide();
});
$("#show").click(function() {
$("#text").show();
});
$("#toggle").click(function() {
$("#text").toggle();
});
});
</script>
<!--
<style type="text/css">
#text{
display:none
}
</style>
-->
<title>JQ淡出与显示</title>
</head>
<body>
<p id="text">
被折腾的文本
</p>
<button id="hide">
隐藏
</button>
<button id="show">
显示
</button>
<button id="toggle">
隐藏/显示
</button>
</body>
</html>
(1) 부분
<head>部分主要是实现核心代码部分，放在后面来讲，先说<body>部分 <body> <!--这是定义一段ID为text的文本，便于脚本控制--> <p id="text"> 被折腾的文本 </p> <!--分别设置ID为hide,show,toggle的按钮--> <button id="hide"> 隐藏 </button> <button id="show"> 显示 </button> <button id="toggle"> 隐藏/显示 </button> </body>
(2) 부분
<head>
<!--网页的编码，声明要使用JQ-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数，缺少这个函数提供的框架之后的东西无法执行-->
$(document).ready(function() {
<!--之后再于这个函数内编写需要的函数-->
<!--对于ID为hide这个按钮的click动作进行函数的调用，之后的动作依旧放在这个一个函数的里面-->
$("#hide").click(function() {
<!--隐藏ID的为text的文本-->
$("#text").hide();
});
$("#show").click(function() {
<!--显示ID的为text的文本-->
$("#text").show();
});
$("#toggle").click(function() {
<!--在隐藏与显示之间切换ID的为text的文本-->
$("#text").toggle();
});
});
</script>
lt;!--这段控制默认是显示还是不显示
<style type="text/css">
#text{
display:none
}
</style>
->
<title>JQ淡出与显示</title>
</head>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.