关灯
请选择 进入手机版 | 继续访问电脑版
回帖奖励 200 金钱      回复本帖可获得 20 金钱奖励! 每人限 2 次

jquery动画与事件

[复制链接]
admin 发表于 2018-12-20 21:54:05 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
代码都已经测试通过,直接打开注释即可看见效果!


  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
  7.                 <script type="text/javascript">
  8.                         $(function(){
  9.                                 //鼠标单击事件
  10.                                 /*$("#div1").click(function(){
  11.                                         alert('a');
  12.                                 });*/
  13.                                 //鼠标移动上的事件
  14.                                 /*$("#div1").mousemove(function(){
  15.                                         $(this).css("background","yellow");
  16.                                 });*/
  17.                                 //鼠标离开事件
  18.                                 /*$("#div1").mouseout(function(){
  19.                                         $(this).css("background","green");
  20.                                 });*/
  21.                                 //鼠标指针进入时
  22.                                 /*$("#div1").mouseenter(function(){
  23.                                         $(this).css("background","pink");
  24.                                 });*/
  25.                                 //鼠标指针离开时
  26.                                 /*$("#div1").mouseleave(function(){
  27.                                         $(this).css("background","red");
  28.                                 });*/
  29.                                
  30.                                 //用户按下键盘的时间
  31.                                 /*$("[name='pass']").keydown(function(){
  32.                                         alert("按下了键");
  33.                                 });*/
  34.                                 //用户释放键盘的时间
  35.                                 /*$("[name='pass']").keyup(function(){
  36.                                         alert("释放了键");
  37.                                 });*/
  38.                                 //当键盘或按钮被按下时
  39.                                 /*$("[name='pass']").keypress(function(){
  40.                                         alert("按下了键");
  41.                                 });*/
  42.                                
  43.                                 //获得焦点
  44.                                 /*$("[name='pass']").focus(function(){
  45.                                         alert("聚焦");
  46.                                 });*/
  47.                                 //失去焦点
  48.                                 /*$("[name='pass']").blur(function(){
  49.                                         alert("失去焦点");
  50.                                 });*/
  51.                                 //绑定单个事件
  52.                                 /*$("#div2").bind("click",function(){
  53.                                         alert('单击完了');
  54.                                 })*/
  55.                                
  56.                                 //绑定多个事件
  57.                                 /*$("#div2").bind({
  58.                                         mouseover:function(){
  59.                                                 $(this).css("background","red");
  60.                                         },
  61.                                         mouseout:function(){
  62.                                                 $(this).css("background","yellow");
  63.                                         }
  64.                                 });*/
  65.                                 //移除绑定的事件
  66.                                 /*$("#div2").unbind("mouseover");*/
  67.                                
  68.                                 //toggle()方法,相当于模拟鼠标多次单击事件
  69.                                 /*$("p").toggle(
  70.                                         function(){
  71.                                                 $(this).css("background","red")
  72.                                         },
  73.                                         function(){
  74.                                                 $(this).css("background","orange")
  75.                                         },
  76.                                         function(){
  77.                                                 $(this).css("background","yellow")
  78.                                         },
  79.                                         function(){
  80.                                                 $(this).css("background","green")
  81.                                         },
  82.                                         function(){
  83.                                                 $(this).css("background","cyan")
  84.                                         },
  85.                                         function(){
  86.                                                 $(this).css("background","blue")
  87.                                         },
  88.                                         function(){
  89.                                                 $(this).css("background","people")
  90.                                         }
  91.                                 );*/
  92.                                 //动画,jquery显示和隐藏
  93.                                 /*$("p").hide();
  94.                                 $("#div2").click(function(){
  95.                                         $("p").show("300");
  96.                                 });*/
  97.                                 //隐藏
  98.                                 /*$("#div2").click(function(){
  99.                                         $("p").hide("300");
  100.                                 });*/
  101.                                
  102.                                 //改变元素的透明度(淡入和淡出)
  103.                                 //淡入
  104.                                 /*$("p").hide();
  105.                                 $("#div2").click(function(){
  106.                                         $("p").fadeIn("slow");
  107.                                 })*/
  108.                                
  109.                                 //淡出
  110.                                 /*$("#div2").click(function(){
  111.                                         $("#div1").fadeOut("slow");
  112.                                 })*/
  113.                                
  114.                                 //改变元素的高度
  115.                                 /*$("#div2").click(function(){
  116.                                         $("#div1").slideUp("slow");
  117.                                 })*/
  118.                                 /*$("#div1").hide("3000");
  119.                                 $("#div2").click(function(){
  120.                                         $("#div1").slideDown("slow");
  121.                                 })*/
  122.                         })
  123.                 </script>
  124.                 <style type="text/css">
  125.                         #div1{
  126.                                 width: 200px;
  127.                                 height: 150px;
  128.                                 background: pink;
  129.                                 border-radius: 5px;
  130.                                 line-height: 50px;
  131.                                 text-align: center;
  132.                                 cursor: pointer;
  133.                         }
  134.                         #div2{
  135.                                 width: 200px;
  136.                                 height: 150px;
  137.                                 background: blueviolet;
  138.                                 border-radius: 5px;
  139.                                 line-height: 50px;
  140.                                 text-align: center;
  141.                                 cursor: pointer;
  142.                         }
  143.                 </style>
  144.         </head>
  145.         <body>
  146.                 <div id="div1">
  147.                         按钮1
  148.                         <p style="background: brown;">p1</p>
  149.                 </div>
  150.                 <div id="div2">
  151.                         按钮2
  152.                 </div>
  153.                 密码<input type="password" name="pass" />
  154.         </body>
  155. </html>
复制代码


回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

0粉丝

38帖子

排行榜
作者专栏

关注我们:微信订阅号

官方微信

APP下载

全国服务热线(QQ):

2451999120

公司地址:中国山东省济南市历城区

运营中心:中国山东省济南市历城区

邮编:250000 Email:2451999120@qq.com

Copyright   ©2017-2018  梦翔资源论坛Powered by©梦翔资源论坛技术支持:梦翔资源论坛    ( 鲁ICP备17042555号-3 ) 鲁公网安备 37011202000726号