基于jquery、发动画结果的网页操纵小例子

发布时间：2018-08-18 21:09:40 所属栏目：运营来源：站长网

导读：Java Script Closures，jquery相干的动画操纵小例子，天生一些适用的小动画结果，进修jquery的伴侣不妨参阅一下。为办理一些网页殊效运行后不能表现结果（譬喻： jQuery 则必要革新）题目，猛火出格新增网页版演示。点击查察：网页殊效运行演示： !DOCT

　　JavaScript Closures，jquery相干的动画操纵小例子，天生一些适用的小动画结果，进修jquery的伴侣不妨参阅一下。

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JavaScript Closures</title> <style> .button { cursor: pointer; width: 100px; text-align: center; padding: 5px; margin-top: 1em; background-color: #fff; border-top: 3px solid #888; border-left: 3px solid #888; border-bottom: 3px solid #444; border-right: 3px solid #444; } .log { margin-top: 1em; border: 1px solid #888; padding: 5px; } </style> <script src="/uploads/common/js/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.log').append($('<div class="log-title">Results:</div>')); }); jQuery.fn.log = function(message) { if (typeof(message) == 'number') { message = String(message); } if (typeof(message) == 'object') { string = '{'; $.each(message, function(key, value) { string += key + ': ' + value + ', '; }); string += '}'; message = string; } return this.each(function() { $context = $(this); while ($context.length) { $log = $context.find('.log'); if ($log.length) { $('<div class="log-message" />').text(message).hide().appendTo($log).fadeIn(); break; } $context = $context.parent(); } }); } $(document).ready(function() { function f() { function g() { $('#example-1').log('hello'); } g(); } f(); //g(); }); $(document).ready(function() { var m; function f() { function g() { $('#example-2').log('hello'); } m = g; } f(); m(); }); $(document).ready(function() { function f() { function g() { $('#example-3').log('hello'); } return g; } var m = f(); m(); }); $(document).ready(function() { function f() { function g() { var a = 0; a++; $('#example-4').log(a); } return g; } var m = f(); m(); m(); var n = f(); n(); n(); }); $(document).ready(function() { var a = 0; function f() { function g() { a++; $('#example-5').log(a); } return g; } var m = f(); m(); m(); var n = f(); n(); n(); }); $(document).ready(function() { function f() { var a = 0; function g() { a++; $('#example-6').log(a); } return g; } var m = f(); m(); m(); var n = f(); n(); n(); m(); n(); }); $(document).ready(function() { function f() { var a = 0; function g() { a++; $('#example-7').log(a); } function h() { a = a + 2; $('#example-7').log(a); } return {'g': g, 'h': h}; } var m = f(); m.g(); m.h(); m.g(); var n = f(); n.g(); n.h(); n.g(); }); $(document).ready(function() { var a = 0; $('#example-8 .trigger').click(function() { a++; $('#example-8').log(a); }); }); $(document).ready(function() { var a = 0; $('#example-9 .add').click(function() { a++; $('#example-9').log(a); }); $('#example-9 .subtract').click(function() { a--; $('#example-9').log(a); }); }); $(document).ready(function() { $('#example-10 li').each(function(index) { $(this).click(function() { $(this).log(index); }); }); }); $(document).ready(function() { $('#example-11 li').each(function(index) { function f() { $('#example-11').log(index); } $(this).click(f); }); }); </script> </head> <body> <div id="container"> <div id="branding" class="clearfix"> <div id="chapter-number">Appendix A</div> <h1>JavaScript Closures</h1> </div> <div class="content" id="example-1"> <h3>Example 1</h3> <div class="log"></div> </div> <div class="content" id="example-2"> <h3>Example 2</h3> <div class="log"></div> </div> <div class="content" id="example-3"> <h3>Example 3</h3> <div class="log"></div> </div> <div class="content" id="example-4"> <h3>Example 4</h3> <div class="log"></div> </div> <div class="content" id="example-5"> <h3>Example 5</h3> <div class="log"></div> </div> <div class="content" id="example-6"> <h3>Example 6</h3> <div class="log"></div> </div> <div class="content" id="example-7"> <h3>Example 7</h3> <div class="log"></div> </div> <div class="content" id="example-8"> <h3>Example 8</h3> <div class="trigger button">Click Here</div> <div class="log"></div> </div> <div class="content" id="example-9"> <h3>Example 9</h3> <div class="trigger button add">Add 1</div> <div class="trigger button subtract">Subtract 1</div> <div class="log"></div> </div> <div class="content" id="example-10"> <h3>Example 10</h3> <ul> <li>Click</li> <li>these</li> <li>items</li> </ul> <div class="log"></div> </div> <div class="content" id="example-11"> <h3>Example 11</h3> <ul> <li>Click</li> <li>these</li> <li>items</li> </ul> <div class="log"></div> </div> </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要