基于jQuery的一款子菜单背景动态变化效果

发布时间：2018-09-28 03:18:34 所属栏目：政策来源：站长网

导读：基于 jQuery 的一款子菜单背景动态变化效果，作者应该是一个新手吧，烈火网小编进行了测试，发现这个例子不兼容IE，无法在IE下显示正常的效果，随后在 Chrome 和 Firefox 下通过，总体来说没有太大的实用价值，不过对于同样是初学者的朋友也许会有帮助，例

　　基于jQuery的一款子菜单背景动态变化效果，作者应该是一个新手吧，烈火网小编进行了测试，发现这个例子不兼容IE，无法在IE下显示正常的效果，随后在Chrome和Firefox下通过，总体来说没有太大的实用价值，不过对于同样是初学者的朋友也许会有帮助，例如小编我，就很菜啦！

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

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready( function(){ var _li; $('.outside li').click( function(){ oLi=$('.outside li'); if(this._li!=oLi) { for(i=0;i<oLi.length;i++) { $('.outside li').find(".ff").css({width:"1px",height:"1px"}); $('.outside li').find(".ff").hide(); } this._li=oLi; $(this).find(".ff").show(); $(this).find(".ff").animate({ width: "158", height: "200", }, 300 ); } else { return; } }); }); </script> <style> .outside{ width:200px; height:400px; background-color:#CCC;} .ll{ width:160px; background-color:#0F0; margin:5px 20px; top:10px; position:relative; list-style-type:none;} .ff{ background-color:#99F; width:158px; height:200px; margin:0 1px; overflow:hidden;} </style> <title>List放大菜单，带动画</title> </head> <body> <div class="outside"> <li class="ll"> <div><a href="#">aaaaaaaaaaaaaa</a></div> <div class="ff" id="ff" style="display:block;"> something<br />asldkjflaskd<br />jflaskdjlfkas<br />jdlfkjasldkj<br />flaskdjlfkasjl<br />dkfjalsdkfjlas<br />kdjflkajsdlfk </div> </li> <li class="ll"> <div><a href="#">bbbbbbbbbbbbbb</a></div> <div class="ff" id="ff" style="display:none;"> something<br />asldkjflaskdjflaskd<br />jlfkasjdlfkjasldkj<br />flaskdjlfkasjld<br />kfjalsdkfjlaskdj<br />flkajsdlfk </div> </li> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：南平站长网）

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