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

　　JavaScript Closures，jquery相关的动画操作小例子，生成一些实用的小动画效果，学习jquery的朋友不妨参阅一下。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

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

热点

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

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

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

由 dawei

相关文章

又一个电脑游戏被检举上热搜，原来是它

90岁《星际迷航》舰长去到太空刷新纪录 落地后他哭了

33岁女科学家研究锂电池获100万大奖 科研无关男女

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

90岁《星际迷航》舰长去到太空刷新纪录落地后他哭了

33岁女科学家研究锂电池获100万大奖科研无关男女