jQuery最后案例

来源：互联网发布：说话技巧叶名琛知乎编辑：程序博客网时间：2024/06/08 16:59
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery动画(最后案例)</title><style type="text/css">  img{    position:relative;  }  #d1{    border:2px solid red;    width:400px;    height:200px;    position:fixed;    top:100px;    right:-330px;  }  #d2{    border:2px solid #CCC;    width:200px;    height:50px;    position:fixed;    right:0;    bottom:0;    background-color:pink;    text-align:center;    line-height:50px;    display:none;  }</style><script type="text/javascript" src="../js/jquery-1.11.1.js"></script><script type="text/javascript">  $(function(){$("input:button:eq(0)").click(function(){  $("img").fadeIn(2000);});$("input:button:eq(1)").click(function(){  $("img").fadeOut(2000);});$("input:button:eq(2)").click(function(){  $("img").animate({"left":"200px"},2000)  .animate({"top":"200px"},1000)  .animate({"left":"0"},1000)  .animate({"top":"0"},1000);});//单击时显示删除成功$("input:button:eq(3)").click(function(){  $("#d2").fadeIn(500).fadeOut(2500);});//悬浮弹框    $("#d1").hover(      function(){        $(this).animate({"right":"0"},500);      },      function(){        $(this).animate({"right":"-330px"},1000);      }    );  });</script></head><body>  <input type="button" value="显示"/>  <input type="button" value="隐藏"/>  <input type="button" value="图片移动"/>  <input type="button" value="删除"/>  <p><img src="../images/02.jpg" /></p>  <div id="d1">悬浮弹框</div>  <div id="d2">删除成功</div></body></html>
0 0