Примеры исспользования jQuery
.pdf
jQuery. Визуальные эффекты
Примеры. Визуальные эффекты (pr11):
jQuery. Визуальные эффекты
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>
<body>
<div id="les8_ex1"></div>
<input type="button" value="Скрыть" onclick="hideDiv();"> <input type="button" value="Показать" onclick="showDiv();">
</body>
</html>
jQuery. Визуальные эффекты
Код style.css:
#les8_ex1{ width:400px; height:100px; background:#666699;
border:1px solid #333366; margin-bottom:20px;
}
Код script.js :
function hideDiv(){ $('#les8_ex1').hide();
}
function showDiv(){ $('#les8_ex1').show();
}
jQuery. Визуальные эффекты
Примеры. Визуальные эффекты (pr12):
jQuery. Визуальные эффекты
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body>
<div id="les8_ex4"></div>
<input type="button" value="Свернуть/Развернуть" onclick="slideToggleDiv();">
</body>
</html>
jQuery. Визуальные эффекты
Код style.css:
#les8_ex4{ width:100px; height:200px; background:#666699;
border:1px solid #333366; margin-bottom:20px;
Код script.js :
function slideToggleDiv(){ $('#les8_ex4').slideToggle(7000);
}
скрывать и отображать div будем за 7 секунд
jQuery. Визуальные эффекты
Примеры. Визуальные эффекты (pr13):
jQuery. Визуальные эффекты
Код html-страницы прост:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body>
<div id="les8_ex5"></div>
<input type="button" value="Исчезает (fadeOut)" onclick="fadeOutDiv();">
<input type="button" value="Появляется (fadeIn)" onclick="fadeInDiv();"> <div id="les8_ex6"></div>
<input type="button" value="Бледнеет (fadeTo)" onclick="fadeToDiv();"> </body>
</html>
jQuery. Визуальные эффекты
Код style.css:
#les8_ex5{ width:400px; height:100px; background:#666699;
border:1px solid #333366; margin-bottom:20px;
}
#les8_ex6{ width:400px; height:100px; background:#666699;
border:1px solid #333366; margin-bottom:20px;
}
Код script.js :
function fadeOutDiv(){ $('#les8_ex5').fadeOut(5000);
}
function fadeInDiv(){ $('#les8_ex5').fadeIn(5000);
}
function fadeToDiv(){ $('#les8_ex6').fadeTo(5000, 0.3);
}
jQuery. Карусель
Примеры. Визуальные эффекты (pr14):