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

发布时间：2018-09-08 16:54:57 所属栏目：创业来源：站长网

导读：基于 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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网