月度存档: 三月 2010

jquery 实现的下拉菜单

作者: luo 日期: 2010年03月27日没有评论

jquery 实现的下拉菜单，原来用的mouseover（）和 mouseout（）实现的，可是有点缺陷（鼠标经过子菜单会跳动），自己感觉也不太好，今天又改了下用hover()，兼容很好，支持主流浏览器，点击运行可以查看效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉菜单</title> <script type="text/javascript" src="http://www.uedspace.com/zuopin/js/jquery.js"></script> <style type="text/css"> * { margin:0px; padding:0px;} html{color:#333;background:#FFF;} body{ text-align:left; font-style:normal; font-size:12px; line-height:20px; font-family:"宋体";} ul,ol,li{list-style:none;} table{ border-collapse:collapse; border-spacing:0;} img,fieldset {border:0;} h1,h2,h3,h4,h5,h6{font-size:14px;} input,label,select,option,textarea,button,fieldset,legend,table,td {font-size:12px;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} a { color:#333; text-decoration:none; font-style: normal; } a:hover{ color:#F00; text-decoration:underline; cursor: pointer;} #nav{ width:600px; margin-left:auto; margin-right:auto; height30px; line-height:30px; background-color:#333; margin-top:50px;} #nav li{ float:left; text-align:center; width:100px; position:relative;} #nav li a{ color:#fff; background-color:#333; display:block;} #nav li a:hover{ color:#fff; background-color:#666; } #nav li ul{ line-height:25px; position:absolute; top:30px; left:0px; background-color:#333; color:#fff;} #nav li ul li a{ background-color:#333; display:block;} #nav li ul li a:hover{ background-color:#666;} </style> </head> <body> <ul id="nav"> <li><a href="#">频道一</a> <ul> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> <li><a href="#">频道一1</a></li> </ul> </li> <li><a href="#">频道二</a> <ul> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> <li><a href="#">频道二2</a></li> </ul> </li> <li><a href="#">频道三</a> <ul> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> <li><a href="#">频道三3</a></li> </ul> </li> <li><a href="#">频道四</a> <ul> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> <li><a href="#">频道四1</a></li> </ul> </li> <li><a href="#">频道五</a> <ul> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> <li><a href="#">频道五5</a></li> </ul> </li> <li><a href="#">频道六</a> <ul> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> <li><a href="#">频道六6</a></li> </ul> </li> </ul> <script type="text/javascript"> var subNav = $('#nav li').find('ul'); subNav.hide(); var navName =$('#nav > li'); navName.hover(function(){ $(this).children().show(); },function(){ subNav.hide(); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

jquery 实现的树型菜单

作者: luo 日期: 2010年03月26日没有评论

刚学jquery没多久，先写个树型菜单，实现方法很简单，兼容很好。

提示：你可以先修改部分代码再运行。

js控制鼠标经过显示文字信息

作者: luo 日期: 2010年03月16日没有评论

自己写的js控制鼠标经过图片上显示文字描述信息，兼容主流浏览器，点击下面运行可以看到效果。

提示：你可以先修改部分代码再运行。

焦点图循环切换效果

作者: luo 日期: 2010年03月16日没有评论

焦点图循环切换效果

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>焦点图循环切换效果</title> <style type="text/css"> body{margin:0;padding:0;background-color:#FFF;} form,input,select,div,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;} body,td,select,input,div{font-size:12px; color:#333;} img{border:none;} ul,li{list-style:none;} h1,h2{font-weight:normal;} a{text-decoration: none; color:#333;} a:hover{text-decoration:underline; color:#ff0000;} /*焦点图*/ #focuspic {width:345px; height:250px;} #focuspic #focus{width:345px; height:250px; position: relative;} #focuspic #au{FILTER:progid:DXImagetransform.Microsoft.Fade (duration=0.5,overlap=1.0); width:345px; height:250px;} #focuspic #no {margin-top: 0px; left:0px; width:345px; position: absolute; top:219px; text-align:center; line-height:31px; height:31px; background:#000;filter:alpha(Opacity=60);-moz-opacity: 0.6;} #focuspic #conau {margin-top:6px; left:14px; width:276px; position:absolute; top:222px; text-align:left;color:#fff;font-size:14px; font-weight:bold;} #focuspic #conau a{color:#fff;} #focuspic #conau a:hover{color:#fff;} #focuspic .lunbo{width:90px; height:14px; position: absolute;top:227px; left:256px;} #focuspic .lunbo ul{height:17px; float:right;} #focuspic .lunbo li{line-height:12px;font-weight:bold; float:left; margin-right:3px;} #focuspic .lunbo .bg,#focuspic .lunbo .active{width:14px;height:12px;text-align:center;line-height:12px;padding-top:2px;} #focuspic .lunbo .bg{background:#000;color:#b1b1b1;} #focuspic .lunbo .active{background:#e36500;color:#fefefe;} </style> </head> <body> <div id="focuspic"> <div id="focus"> <div id="au"> <div style="display:block;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30211/30211808.jpg" width="345" /></a></div> <div style="display:none;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30213/30213540.jpg" width="345" /></a></div> <div style="display:none;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30211/30211257.jpg" width="345" /></a></div> </div> <div id="no"></div> <div class="lunbo"> <ul> <li class="active" id="t0" onmouseover="Mea(0);clearAuto();" onmouseout="setAuto();">1 </li> <li class="bg" id="t1" onmouseover="Mea(1);clearAuto();" onmouseout="setAuto();">2 </li> <li class="bg" id="t2" onmouseover="Mea(2);clearAuto();" onmouseout="setAuto();">3 </li> </ul> </div> <div id="conau"> <div style="display:block;"><a href="#">春天宝宝这样吃可防身体缺钙</a></div> <div style="display:none;"><a href="#">原配自述：小三最终没成功</a></div> <div style="display:none;"><a href="#">专家：高龄孕妈咪全孕期指导</a></div> </div> <script type=text/javascript> var n=0; function Mea(value){ n=value; setBg(value); plays(value); conaus(n); } function setBg(value){ for(var i=0;i<3;i++) document.getElementById("t"+i+"").className="bg"; document.getElementById("t"+value+"").className="active"; } function plays(value){ try { with (au){ filters[0].Apply(); for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } catch(e) { var d = document.getElementById("au").getElementsByTagName("div"); for(i=0;i<3;i++)i==value?d[i].style.display="block":d[i].style.display="none"; } } function conaus(value){ try { with (conau){ for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; } } catch(e) { var d = document.getElementById("conau").getElementsByTagName("div"); for(i=0;i<3;i++)i==value?d[i].style.display="block":d[i].style.display="none"; } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 4000)} function auto(){ n++; if(n>2)n=0; Mea(n); conaus(n); } setAuto(); </script> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

runcode 使用

作者: luo 日期: 2010年03月15日没有评论

runcode使用

<div>hello world!!</div>

提示：你可以先修改部分代码再运行。

UEDspace

专注于web前端开发、关注用户体验。

月度存档: 三月 2010

jquery 实现的下拉菜单

jquery 实现的树型菜单

js控制鼠标经过显示文字信息

焦点图循环切换效果

runcode 使用

随机文章

标签云

存档

链接

管理