基于jquery、带动画效果的网页操作小例子

发布时间：2018-08-16 23:45:42 所属栏目：运营来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：核心网）

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

三星联合开发，真全面	realme Book增强版配置
小米12系列在西欧上线	iPhone 14 Pro前瞻工