第一大部分 提纲
事件与动画
一、事件
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>
- jQuery事件以及动画
jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...
- jQuery事件与动画
一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪 执行次数:多次 简单写法:原:$(document).ready(function(){}) ...
- 第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
- JavaScript jQuery 事件、动画、扩展
事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
- 初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 ...
- JQuery事件与动画总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...
- jquery事件和动画操作集锦
一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...
- python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- jQuery事件和动画
1.toggle事件 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
随机推荐
- cocos2d-x中文显示：加字库
1.如下:为了中文显示 2.如下:解决方案-加入中文字库
- 【ant项目构建学习点滴】--（3）打包及运行jar文件
<?xml version="1.0" encoding="UTF-8"?> <project default="compile&q ...
- 判断程序是否在VMWare内运行
现在有许多用户都喜欢用虚拟机来测试他们的软件,以避免对真实机器环境造成损害.但是在虚拟机中,有些功能是受限,甚至不可能完成的,因此,需要在程序中判断虚拟机的环境,如果程序在虚拟机内运行,则就要把虚拟机 ...
- svn回滚版本1
我刚开始使用SubVersion时, 想把svn代码库回滚到以前某个版本, 上网找来找去都找不到(那时文档比较少), 让我郁闷了好一阵子. 现在记录一下 SubVersion回滚的方法: 第一种方 ...
- html submit 登录
<!doctype html> <html lang="en"> <head> <meta name="Generator&qu ...
- eclipse中使用maven插件的时候，运行run as maven build的时候报错
-Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a ...
- How to find variable is empty in shell script
(1). var="" if [ -n "$var" ]; then echo "not empty" else echo ...
- 重操JS旧业第四弹：Date与Global对象
1 Date原理 Date类型表示时间,js中采用UTC国际协调时间,以1971年1月1日0分0秒0微秒开始,经过的毫秒数来表示时间,比如一年的时间计算 1分:1000*60: 1小时:1000(毫秒 ...
- QFrame好像是万能的（可以随意画线，或者图片，放在其它元素之间做点缀，还可OnClick）
QFrame *fr2=new QFrame(this); fr2->setGeometry(0,140,90,40); fr2->setStyleSheet("backgrou ...
- mac下brew install 报错
mac下brew install 报错 错误提示: 原因:是这个brew的权限不正确 修改一下这个brew的权限 chown root:wheel /usr/local/bin/brew
