54장 JQueryEffect 슬라이더 처리 (SlideExample)
| SlideExample1.htm |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Example</title> <style type="text/css"> div { position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#right").click(function () { $(".block").animate({ "left": "+=50px" }, "slow"); }); $("#left").click(function () { $(".block").animate({ "left": "-=50px" }, "slow"); }); }); </script> </head> <body> <button id="left">«®i</button> <button id="right">»®i</button> <div class="block"></div> </body> </html> |
| SlideExample2.htm |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> div { background-color:#bca; width:200px; height:1.1em; text-align:center; border:2px solid green; margin:3px; font-size:14px; } button { font-size:14px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#go1").click(function () { $("#block1").animate({ width: "90%" }, .animate({ fontSize: "24px" }, 1500) .animate({ borderRightWidth: "15px" }, 1500); }); $("#go2").click(function () { $("#block2").animate({ width: "90%" }, 1000) .animate({ fontSize: "24px" }, 1000) .animate({ borderLeftWidth: "15px" }, 1000); }); $("#go3").click(function () { $("#go1").add("#go2").click(); }); $("#go4").click(function () { $("div").css({ width: "", fontSize: "", borderWidth: "" }); }); }); </script> </head> <body> <button id="go1">» Animate Block1</button> <button id="go2">» Animate Block2</button> <button id="go3">» Animate Both</button> <button id="go4">» Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div> </body> </html> |
