JQuery 事件与动画
2024-10-12 01:23:39
第一大部分 提纲
事件与动画
一、事件
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>
最新文章
- java代码解压zip文件
- 20款 JavaScript 开发框架推荐给前端开发者
- mac osx 上面部署Django项目 apache+mysql+mod_wsgi
- 再谈vim中多窗口的编辑
- 【项目管理和构建】十分钟教程,eclipse配置maven + 创建maven项目(三)
- Graham&#39;s Scan算法
- Oracle 监听动态注册与静态注册
- RabbitMQ-清空队列中(一个channel或连接中)的Unacknowledged状态的消息
- 反射以及 getDeclaredMethods()和getMethods()区别
- VS2010中配置C#Project不生成.vhost.exe和.pdb文件的方法
- 这是最好的时光 这是最坏的时光 v0.1.1.1
- Python-网站页面代码获取
- 杭电ACM2009--求数列的和
- Web前端-Vue.js必备框架(一)
- Individual Project - Word frequency program——12061154Joy
- wireshark抓取OMCI报文
- 20145316《网络对抗》Exp9 Web安全基础实践学习总结
- 通过beego快速创建一个Restful风格API项目及API文档自动化(转)
- linux定时任务-cron
- python2 除法保留两位小数
热门文章
- java--equal&;==
- 初始WebApi 利用WebApi实现基础的CRUD
- duilib之源码分析
- Windows Azure 网站 (WAWS) 和中间证书
- KVM虚拟机介绍
- BZOJ 2750: [HAOI2012]Road( 最短路 )
- 简单区分`:before`与`::before`的区别
- 在Qt中如何使用QtDesigner创建的UI文件
- JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结(转)
- 基于visual Studio2013解决面试题之1004最长等差数列