您的位置：首页 > Web前端 > JQuery

JQuery 事件与动画

2015-08-23 00:33 597 查看

第一大部分提纲

事件与动画
一、事件
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">
<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;

width:300px;
height:300px;
position:absolute;
}
ul{
list-style-type:none;
width: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({width:"500px",height:"500px"},3000) //自定义动画用animate({},秒数) 自定义的在{}里面写
//$("#ss").animate({ width: "500px" }, 3000).animate({height:"500px"},3000)//先宽度拉伸500px 再高度增长500px
$("#ss").animate({ left: "500px" }, 3000).animate({ top: "200px" }, 3000).animate({ width: "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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航