css动画

来源：互联网发布：excel表函数数据分类编辑：程序博客网时间：2024/06/10 02:38

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"></script>  </head> <body> <img src="img/a1.jpg"id="img0"style="position: relative;"/> <input type="button" id="show" value="显示" /> <input type="button" id="hide" value="隐藏" /> <hr /> <input type="button" id="dr" value="淡入" /> <input type="button" id="dc" value="淡出" /><BR> <input type="button" id="zdy" value="自定义动画" /> <script type="text/javascript"> $("#show").click(function(){ $("#img0").show(3000); }); $("#hide").click(function(){ $("#img0").hide(3000); }); //------------------- $("#dr").click(function(){ $("#img0").fadeIn(2000); }); $("#dc").click(function(){ $("#img0").fadeOut(2000); }); //----------------------- $("#zdy").click(function(){ $("#img0").animate({ left: "90%", }, 1000 ); }); </script> </body> </html>

阅读全文

0 0