下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML><head><Meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8"><Title>无标题文档</Title><style type="text/CSS"> HTML,body { height:100%; margin:0px; padding:0px; background-color:#EFEFEF; Font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; Font-size:12px; line-height:1.5; color:#333;}.leftBox1{ wIDth: 120px; background-color:#F5F5F5; border:1px solID #ddddDD;}.leftBox2{ wIDth: 30px; background-color:#F5F5F5; border:1px solID #ddddDD;animation: myfirst2 0.3s; -moz-animation: myfirst2 0.3s; -webkit-animation: myfirst2 0.3s;}.leftBox2:hover{ wIDth: 120px; background-color:#F5F5F5; border:1px solID #ddddDD; Box-shadow:1px 1px 5px 1px rgba(0,0.2); animation: myfirst 0.3s; -moz-animation: myfirst 0.3s; -webkit-animation: myfirst 0.3s;}.leftBox2 ul{ display:none;}.leftBox2:hover ul{display:block;}.rightBox1{ wIDth: 120px; background-color:#F5F5F5; border:1px solID #ddddDD;}.rightBox2{ wIDth: 30px; background-color:#F5F5F5; border:1px solID #ddddDD;animation: myfirst2 0.3s; -moz-animation: myfirst2 0.3s; -webkit-animation: myfirst2 0.3s;}.rightBox2:hover{ wIDth: 120px; background-color:#F5F5F5; border:1px solID #ddddDD; Box-shadow:1px 1px 5px 1px rgba(0,0.2); animation: myfirst 0.3s; -moz-animation: myfirst 0.3s; -webkit-animation: myfirst 0.3s;}.rightBox2 ul{ display:none;}.rightBox2:hover ul{display:block;}.rightBox3{ wIDth: 30px; background-color:#F5F5F5; border:1px solID #ddddDD;}.rightBox3 ul{ display:none;}/*.rightBox3:hover ul{display:block;}*/@keyframes myfirst{0% {wIDth:30px;}100% {wIDth:120px;}}@-moz-keyframes myfirst /* firefox */{0% {wIDth:30px;}100% {wIDth:120px;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0% {wIDth:30px;}100% {wIDth:120px;}}@keyframes myfirst2{0% {wIDth:100px;}/*如果按照div的宽带来填，即会出现不友好的用户体验*/100% {wIDth:30px;}}@-moz-keyframes myfirst2 /* firefox */{0% {wIDth:100px;}/*如果按照div的宽带来填，即会出现不友好的用户体验*/100% {wIDth:30px;}}@-webkit-keyframes myfirst2 /* Safari 和 Chrome */{0% {wIDth:100px;}/*如果按照div的宽带来填，即会出现不友好的用户体验*/100% {wIDth:30px;}}.clearfloat{ clear:both;}#mainContent{ overflow:auto; margin:20px 142px 20px 142px;}#leftBox{margin-right:20px; position:fixed; left:0; top:0; height:100%;}#rightBox{margin-left:20px; position:fixed; right:0; top:0; height:100%;}#leftBoxa{right:0px; text-align:right; margin: 4px;}#rightBoxa{left:0px; text-align:left; margin: 4px;}#righta{margin-right: 4px;}</style></head><body> <div ID="leftBox" > <div ID="leftBoxa"><img ID="lefta" src="frame/left.png" onclick="closeBoxleft(1);"></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div ID="rightBox" > <div ID="rightBoxa"><img ID="righta" src="frame/right.png" onclick="closeBoxright(1);"><img ID="righta" src="frame/lock.png" onclick="closeBoxrightlock(1);"></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div ID="mainContent"> Quisque ornare risus quis ligula. Phasellus trsce varius urna ID quam. Sed neque mi,varius eget,tincIDunt nec,suscipit ID,libero. Quisque ornare risus quis ligula. Phasellus trsce varius urna ID quam. Sed neque mi,libero. v Quisque ornare risus quis ligula. Phasellus trsce varius urna ID quam. Sed neque mi,libero. Quisque ornare risus quis ligula. Phasellus trsce varius urna ID quam. Sed neque mi,libero. </div> <div ></div><script src="//code.jquery.com/jquery-1.10.2.min.Js" type="text/JavaScript"></script><script>function closeBoxleft(v){ if(v == 1){ $("#leftBox").removeClass("leftBox1"); $('#leftBox').addClass('leftBox2'); $("#leftBoxa").HTML("<img ID='lefta' src='frame/right.png' onclick='closeBoxleft(2);'/>"); $("#mainContent").CSS("margin-left","50px") }else{ $("#leftBox").removeClass("leftBox2"); $("#leftBox").addClass("leftBox1"); $("#leftBoxa").HTML("<img ID='lefta' src='frame/left.png' onclick='closeBoxleft(1);'/>"); $("#mainContent").CSS("margin-left","142px") }}function closeBoxright(v){ if(v == 1){ $("#rightBox").removeClass("rightBox1"); $('#rightBox').addClass('rightBox2'); $("#rightBoxa").HTML("<img ID='righta' src='frame/left.png' onclick='closeBoxright(2);'/>"); $("#mainContent").CSS("margin-right","50px") }else{ $("#rightBox").removeClass("rightBox2"); $("#rightBox").addClass("rightBox1"); $("#rightBoxa").HTML("<img ID='righta' src='frame/right.png' onclick='closeBoxright(1);'/><img ID='righta' src='frame/lock.png' onclick='closeBoxrightlock(1);'/>"); $("#mainContent").CSS("margin-right","142px") }}function closeBoxrightlock(v){ if(v == 1){ $("#rightBox").removeClass("rightBox1"); $('#rightBox').addClass('rightBox3'); $("#rightBoxa").HTML("<img ID='righta' src='frame/lock_unlock.png' onclick='closeBoxrightlock(2);'/>"); $("#mainContent").CSS("margin-right","50px") }else{ $("#rightBox").removeClass("rightBox3"); $("#rightBox").addClass("rightBox1"); $("#rightBoxa").HTML("<img ID='righta' src='frame/right.png' onclick='closeBoxright(1);'/><img ID='righta' src='frame/lock.png' onclick='closeBoxrightlock(1);'/>"); $("#mainContent").CSS("margin-right","142px") }}</script></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的jQuery左右伸缩菜单框架全部内容，希望文章能够帮你解决jQuery左右伸缩菜单框架所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）