第一大部分 提纲

事件与动画
一、事件
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 事件与动画的更多相关文章

  1. jQuery事件以及动画

    jQuery事件以及动画 一.jQuery事件 加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...

  2. jQuery事件与动画

    一 事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪  执行次数:多次  简单写法:原:$(document).ready(function(){})  ...

  3. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

  4. JavaScript jQuery 事件、动画、扩展

    事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...

  5. 初学jQuery之jQuery事件与动画

    今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready   准备就绪 2.鼠标事件 方法                      ...

  6. JQuery事件与动画总结

    1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...

  7. jquery事件和动画操作集锦

    一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){   //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...

  8. python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

    11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); ​ // 绑定方 ...

  9. jQuery事件和动画

    1.toggle事件 <!DOCTYPE html>   <html>   <head lang="en">   <meta charse ...

随机推荐

  1. 如何改变c盘的访问权限

    1.在文件夹或文件图标上面点击鼠标右键,再点击属性2.打开文件夹属性选项卡,按顺序单击:安全 > 高级 >所有者 > 编辑,选中Administrators用户组(或者你的用户所在的 ...

  2. ant-学习记录二

    <?xml version="1.0"?> <project name="targetStudy" default="mkdir&q ...

  3. hibernate 一对多映射

    package com.entity.onetomany; import java.util.ArrayList; import java.util.List; import javax.persis ...

  4. windows下使用openssl的一种方法

    下载openssl之后,全部解压到一个路径下,如:c:\program files\openssl sdk 举个例子,如使用SHA1,开发时引用头文件: #include <sha.h> ...

  5. android handler looper thread

    在线程中调用包含创建handler方法的时候,会报错,提示: “need call Looper.prepare()” -- 在创建之前,调用Looper.prepare()方法来创建一个looper ...

  6. AT&T汇编

    AT&T汇编和8086汇编语言虽然两者很相似,但是还是不能根据8086的语法规则来读AT&T汇编的吧,所以还是要看看AT&T汇编的语法规则,因为在读内核代码时,跟硬件打交道的部 ...

  7. android APP 中微信分享功能实现 的总结

    //花了很长时间最终完成了微信分享功能,中间走了很多弯路,在此做一下小结,希望对在应用中使用到微信分享的朋友有所帮助. 主要问题就是下面两个: 1.为什么运行了项目之后,微信分享只是闪了一下就没有了? ...

  8. UVA 10574 - Counting Rectangles(枚举+计数)

    10574 - Counting Rectangles 题目链接 题意:给定一些点,求可以成几个边平行于坐标轴的矩形 思路:先把点按x排序,再按y排序.然后用O(n^2)的方法找出每条垂直x轴的边,保 ...

  9. c语言， objective code(new 2)

    参考: 1. C中的继承和多态 http://www.cnblogs.com/skynet/archive/2010/09/23/1833217.html

  10. 转：python idle 清屏问题的解决

    http://www.cnblogs.com/maybego/p/3234055.html python idle 清屏问题的解决 在学习和使用python的过程中,少不了要与python idle打 ...