第一大部分 提纲
事件与动画
一、事件
1.在JavaScript语法中的事件，把onxxxxx中的on去掉，就是JQuery中的事件。
onclick - click
ondblclick - dblclick
onmouseover - mouseover
onmouseout - mouseout
onfocus - focus
onblur - blur
onchange - change
onkeydown - keydown
onkeyup - keyup
onkeypress - keypress
2.特有事件：
hover(function(){},function(){})：相当于把mouseover和mouseout结合起来了
toggle(function(){},function(){},...function(){})：每点击一下执行下一个function,如执行到末尾，会再返回第一个执行
3.JQuery中的事件，需要事件的小括号中写function(){}
$("#Button1").click(function(){
//事件处理代码
});
案例：
1.光棒效果：mouseover,mouseout
2.展开面板：click
二、动画
hide(),show()
fadeIn(),fadeOut()
slideUp(),slideDown()
slideUp([毫秒数],[回调函数])
slideUp(3000,function(){xxx();})
animate({left:"500px"},3000,function(){/*回调函数*/})
stop(bool,bool);
第一个参数：是否清空之前的动画序列。
第二个参数：直接走到最后的状态。
第二大部分 例题
html xmlns="http://www.w3.org/1999/xhtml">
第二大部分 例题
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#ss{
border:1px solid blue;
300px;
height:300px;
position:absolute;
}
ul{
list-style-type:none;
400px;
border:1px ;
}
.titlebar{
padding:5px;
color:white;
margin-top:1px;
}
.spanbar{
padding:5px;
display:none;
}
#aa{
padding:5px;
border:1px solid blue;
}
</style>
<script src="新文件夹1/jquery-1.8.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
//$(".titlebar").click(function () { //click 鼠标点击事件
//var s = $(this).next().css("display");
//if(s == "none")//如果display ==none
//{
// $(this).next().css("display","block");//如果把点击标题 那么把下面展开
//}
//else {
// $(this).next().css("display","none");//如果把点击标题 那么把下面隐藏
//}
//});
//$(".titlebar").hover(function(){ //hover鼠标移动到上面的事件
// //$(this).next().css("display", "block"); //移动上去显示隐藏部分
//},function(){
// $(this).next().css("display", "none");//鼠标离开 隐藏
//})
//$(".titlebar").hover(function () { //hover 鼠标移动事件
// $(this).toggleClass("mover"); //toggleClass 如果没有 就添加上 如果有 就移除
//}, function () {
// $(this).toggleClass("mover");
//})
//$("#aa").toggle(function () { //toggle 里面可以放无数个 每次点击执行下一个 执行到最后一个就在执行第一个
// $(this).css("background-color","#ffff00");//
//}, function () {
// $(this).css("background-color","#ff00ff");
//}, function () {
// $(this).css("background-color","#00ffff");
//}, function () {
// $(this).css("background-color","#ffffcc");
//});
//动画效果
$(".titlebar").click(function () {
var s = $(this).next().css("display");
if (s == "none")
{
//$(this).next().show();//点击显示
//$(this).next().fadeIn();//渐变显示 fadein(3000)括号里面放秒数 3秒
$(this).next().slideDown();//slideDown()拉下来括号里面放秒数
}
else
{
//$(this).next().hide();点击隐藏
//$(this).next().fadeOut();//fadeOut渐变隐藏
$(this).next().slideUp();//slideUp()拉上去 括号里面也是放时间
}
})
$("#ss").click(function () {
//hideDiv();//点击回调函数 自动来回 拉上来拉下去
// $("#ss").animate({"500px",height:"500px"},3000) //自定义动画用animate({},秒数) 自定义的在{}里面写
//$("#ss").animate({ "500px" }, 3000).animate({height:"500px"},3000)//先宽度拉伸500px 再高度增长500px
$("#ss").animate({ left: "500px" }, 3000).animate({ top: "200px" }, 3000).animate({ "500px" }, 3000).animate({ height: "500px" }, 3000);//跑到中间位置
})
});
//定义显示毁回调函数
function showDiv() {
$("#ss").slideDown(3000, function () { hideDiv(); });
}
function hideDiv() {
$("#ss").slideUp(3000, function () { showDiv(); });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<div class="titlebar">
<%#Eval("Name") %>-<%#Eval("Price") %>
</div>
<div class="spanbar">
代号：<%#Eval("Code") %>
<br/>
名称：<%#Eval("Name") %>
<br/>
系列: <%#Eval("Brand") %>
<br/>
油耗：<%#Eval("Oil") %>
<br/>
排量：<%#Eval("Exhaust") %>
<br/>
功率：<%#Eval("Powers") %>
<br/>
上市时间：<%#Eval("Time") %>
<br/>
价格：<%#Eval("PRice") %>
<br/>
</div>
</li>
</ItemTemplate>
</asp:Repeater>
<div>
<span id="aa">
点击变化颜色
</span>
</div>
<div id="ss">
</div>
</div>
</form>
</body>
</html>