<!DOCTYPE html><html>? ? <head>? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />? ? ? ? <title>jQuery動畫特效</title>? ? ? ? <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>? ? <style type="text/css">? ? ? ? #tip{?? ? position:absolute;? ? left:200px;? ? top:50px;? ? width:80px;? ? height:80px;? ? border: solid 1px #ccc;? ? margin: 0px 8px;? ? background-color: Red;? ? color:White;? ? vertical-align:middle;? ? }? ?? ? </style> ? ?? ? </head>? ??? ? <body>? ? ? ? <input type="button" id="btnLeft" value="左移按鈕">? ? ? ? <input type="button" id="btnRight" value="右移按鈕">? ? ? ? <div id="tip"></div>? ? ? ? <div id="text"></div>? ? ? ? <script>? ? ? ? ? ? $(function(){? ? ? ? ? ? ? ? var $div1=$("#tip");? ? ? ? ? ? ? ?$("#btnLeft").bind("click",function(){? ? ? ? ? ? ? ? ? ?$div1.animate({? ? ? ? ? ? ? ? ? ? ? ?left:"+=50px"? ? ? ? ? ? ? ? ? ?},3000,function(){? ? ? ? ? ? ? ? ? ? ? $(#text).html("執(zhí)行完成！");? ? ? ? ? ? ? ? ? ?})? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ?});? ? ? ? ? ? ? ?$("#btnRight").bind("click",function(){? ? ? ? ? ? ? ? ? ?$div1.animate({? ? ? ? ? ? ? ? ? ? ? ?left:"-=50px"? ? ? ? ? ? ? ? ? ?},3000,function(){? ? ? ? ? ? ? ? ? ? ? ? $(#text).html("執(zhí)行完成！");? ? ? ? ? ? ? ? ? ? ? ?})? ? ? ? ? ? ? ? ? ?})? ? ? ? ? ? ?? ? ? ? ? ??? ? ? ? </script></html>
- 1 回答
- 0 關(guān)注
- 1326 瀏覽
添加回答
舉報
0/150
提交
取消