微软官网导航效果在IE6小没有动画效果，顺便也把IE6的效果给加上，兼容IE6
阅读全文...
<!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=utf-8" /> <title>功能筛选_1.0</title> <style type="text/css"> h2, p{margin:0px;padding:0px;} body{background:#2d3033;margin:0px;padding:0px;font-size:12px;} #box{width:942px;height:auto;border:9px solid #33373b;margin:20px auto;padding:1px;background:#222527;overflow:hidden;} #box .title{width:942px;height:100px;float:left;background:#282b2e;} #box .title h2{display:block;text-align:center;line-height:60px; font-family:"微软雅黑";font-size:24px;color:#46c5ec;letter-spacing:2px;} #box .title p{display:block;text-align:center;line-height:20px; font-family:"微软雅黑";font-size:14px;color:#fff;letter-spacing:2px;} #box .nav{width:942px;height:34px;float:left;background:#35393c;border-top:1px solid #222527;border-bottom:1px solid #222527;text-align:center;line-height:34px;color:#fff;} #box .tit{width:430px;height:34px;color:#fff;line-height:34px;display:inline-block;} #box .tit span{float:left;} #box .tit .menu{width:182px;height:22px;float:left;display:inline;margin:6px 0 0 0;background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat 0 -92px;} #box .tit .menu ul{margin:0px;padding:0px;float:left;list-style-type:none;} #box .tit .menu li{float:left;line-height:22px;text-align:center;cursor:pointer;} #box .tit .menu li.everything{width:79px;float:left;} #box .tit .menu li.applications{width:50px;float:left;border-left:1px solid #000;border-right:1px solid #000;} #box .tit .menu li.utilities{width:50px;float:left;} #box .tit .menu li.everything_h{background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat 0 0;} #box .tit .menu li.applications_h{background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat -79px 0;} #box .tit .menu li.utilities_h{background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat -129px 0;} #box .tit .menu_1{width:101px;height:22px;float:left;display:inline;margin:6px 0 0 0;background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat 0 -55px;} #box .tit .menu_1 ul{margin:0px;padding:0px;float:left;list-style-type:none;} #box .tit .menu_1 li{float:left;line-height:22px;text-align:center;cursor:pointer;} #box .tit .menu_1 li.name{width:50px;float:left;} #box .tit .menu_1 li.size{width:50px;float:left;border-left:1px solid #000;} #box .tit .menu_1 li.name_h{background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat 0 0;} #box .tit .menu_1 li.size_h{background:url([url]http://zf4uc1.chinaw3.com/script/Filter/images/buttons.png[/url]) no-repeat -132px 0;} #box .content{width:902px;height:610px;float:left;background:#282b2e;padding:20px 40px;} #box .content ul{margin:0px;padding:0px;float:left;list-style-type:none;position:relative;} #box .content li{width:128px;height:177px;float:left;font-family:Verdana;display:inline;margin:20px 0 0 35px;filter:alpha(opacity=100);opacity:1;} #box .content li strong{display:block;text-align:center;line-height:20px;color:#fff;} #box .content li span{display:block;text-align:center;line-height:20px;color:#686f74;} #box .bottom{width:942px;height:50px;float:left;background:#282b2e;text-align:center;line-height:50px;color:#fff;} #box .bottom a{text-decoration:none;color:#46c5ec; padding:3px 5px;} </style> <script type="text/javascript"> window.onload = function(){ var oContent = document.getElementById('content'); var aUtil = getClass(oContent, 'util'); var aApp = getClass(oContent, 'app'); var aLi = oContent.getElementsByTagName('li'); var aStrong = oContent.getElementsByTagName('strong'); var aSpan = oContent.getElementsByTagName('span'); var oSize = document.getElementById('size'); var oName = document.getElementById('name'); var oEverything = document.getElementById('everything'); var oApplications = document.getElementById('applications'); var oUtilities = document.getElementById('utilities'); var Util = Appl = false; var aLocation = []; var aFilter = []; var aName = []; var aSize = []; var i = 0; //位置 for(i=0;i<aStrong.length;i++)aName.push(aStrong[i]); for(i=0;i<aSpan.length;i++)aSize.push(aSpan[i]); for(i=0;i<aLi.length;i++)aLocation.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop}); //布局转换 for(i=0;i<aLi.length;i++){ aLi[i].style.top = aLi[i].offsetTop +'px'; aLi[i].style.left = aLi[i].offsetLeft +'px'; } for(i=0;i<aLi.length;i++){ aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0'; } //按照大小排序 oSize.onclick = function(){ oName.className = 'name'; this.className = 'size size_h'; aSize.sort(function (str1, str2){ return parseInt(str1.innerHTML) - parseInt(str2.innerHTML); }); Size(); }; //按照名字排序 oName.onclick = function(){ Nzclass(); aName.sort(function (str1, str2){ return str1.innerHTML.localeCompare(str2.innerHTML); }); Name(); for(i=0;i<aLi.length;i++)aLocation.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop}); }; //所有图标 oEverything.onclick = function(){ this.className = 'everything everything_h'; oApplications.className = 'applications'; oUtilities.className = 'utilities'; for(i=0;i<aLi.length;i++)startMove(aLi[i], {top:aLocation[i].top,left:aLocation[i].left,opacity:100}, 5); Util = Appl = false; }; //所有应用 oApplications.onclick = function(){ oEverything.className = 'everything'; this.className = 'applications applications_h'; oUtilities.className = 'utilities'; Nzclass(); AppUtil(aUtil,aApp); Util = false; Appl = true; }; //所有公用 oUtilities.onclick = function(){ oEverything.className = 'everything'; oApplications.className = 'applications'; this.className = 'utilities utilities_h'; Nzclass(); AppUtil(aApp,aUtil); Util = true; Appl = false; }; function Nzclass(){ oName.className = 'name name_h'; oSize.className = 'size'; } function AppUtil(app,util){ for(i=0;i<aLi.length;i++)startMove(aLi[i], {opacity:100}, 5); for(i=0;i<app.length;i++)startMove(app[i], {opacity:0}, 5); for(i=0;i<util.length;i++)startMove(util[i], {top:aLocation[i].top,left:aLocation[i].left,opacity:100}, 5); } function Name(){ Util == false && Appl == false ? SizeIf(aName, aName) : (Util == true && Appl == false ? SizeIf(aUtil, aName) : SizeIf(aApp, aName)); } function Size(){ Util == false && Appl == false ? SizeIf(aSize, aSize) : (Util == true && Appl == false ? SizeIf(aUtil, aSize) : SizeIf(aApp, aSize)); } function SizeIf(obj, parent){ for(i=0;i<aLi.length;i++)startMove(aLi[i], {opacity:0}, 5); for(i=0;i<obj.length;i++)startMove(parent[i].parentNode, {top:aLocation[i].top,left:aLocation[i].left,opacity:100}, 5); } }; function getClass(oParent, sClass){ var aElem = oParent.getElementsByTagName('*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; } function startMove(obj, json, iT, fnEnd){ if(obj.timer)clearInterval(obj.timer); obj.timer = setInterval(function (){ doMove(obj, json, iT, fnEnd); }, 30); } function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } function doMove(obj, json, iT, fnEnd){ var iCur = 0; var attr = ''; var bStop = true; for(attr in json){ attr == 'opacity' ? iCur = parseInt(100*parseFloat(getStyle(obj, 'opacity'))) : iCur = parseInt(getStyle(obj, attr)); if(isNaN(iCur))iCur = 0; var iSpeed = (json[attr]-iCur) / iT; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(parseInt(json[attr])!=iCur)bStop = false; if(attr=='opacity'){ obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")"; obj.style.opacity = (iCur + iSpeed) / 100; }else{ attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px'; } } if(bStop){ clearInterval(obj.timer); obj.timer = null; if(fnEnd)fnEnd(); } } </script> </head> <body> <div id="box"> <div class="title"> <h2>功能筛选</h2> <p>重新排序和筛选项目图标动画</p> </div> <div class="nav"> <div class="tit"> <span>按类型筛选：</span> <div class="menu"> <ul> <li class="everything everything_h" id="everything">所有图标</li> <li class="applications" id="applications">应用</li> <li class="utilities" id="utilities">公用</li> </ul> </div> <span> 排序方式：</span> <div class="menu_1"> <ul> <li class="name name_h" id="name">名字</li> <li class="size" id="size">大小</li> </ul> </div> </div> </div> <div class="content" id="content"> <ul> <li class="util"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/activity-monitor.png" /> <strong>Activity Monitor</strong> <span>348 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/address-book.png" /> <strong>Address Book</strong> <span>1904 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/finder.png" /> <strong>Finder</strong> <span>1337 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/front-row.png" /> <strong>Front Row</strong> <span>401 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/google-pokemon.png" /> <strong>Google Pokémon</strong> <span>12875 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/ical.png" /> <strong>iCal</strong> <span>5273 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/ichat.png" /> <strong>iChat</strong> <span>5437 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/interface-builder.png" /> <strong>Interface Builder</strong> <span>2764 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/ituna.png" /> <strong>iTuna</strong> <span>17612 KB</span> </li> <li class="util"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/keychain-access.png" /> <strong>Keychain Access</strong> <span>972 KB</span> </li> <li class="util"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/network-utility.png" /> <strong>Network Utility</strong> <span>245 KB</span> </li> <li class="util"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/sync.png" /> <strong>Sync</strong> <span>3788 KB</span> </li> <li class="app"> <img src="http://zf4uc1.chinaw3.com/script/Filter/images/textedit.png" /> <strong>TextEdit</strong> <span>1669 KB</span> </li> </ul> </div> <div class="nav">原生--Javascript--功能筛选_1.0效果</div> <div class="bottom">如蒙转载请注明出处 <a href="http://zf4uc1.chinaw3.com/">zf4uc1.chinaw3.com</a> , By — lzh8023, QQ:190135180</div> </div> </body> </html>
提示：你可以先修改部分代码再运行。
原始地址：http://zf4uc1.chinaw3.com/script/Filter/
兼容所有浏览器，无BUG，看代码及演示：
<!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=utf-8" /> <title>无标题文档</title> </head> <body> <div id="demo" style="width:100px;height:100px;position:absolute;background:red;cursor:move;"></div> <script type="text/javascript"> function drag(o){var a="onmousemove",b="setCapture",c="releaseCapture",f="clientY",g="clientX",d=document,z=d.documentElement,x,y,t,l,w,h;o=d.getElementById(o);o.onmousedown=function(e){e=e||event;x=e[g]-o.offsetLeft;y=e[f]-o.offsetTop;d[a]=function(e){e=e||event;t=e[f]-y;l=e[g]-x;w=z.clientWidth-o.offsetWidth;h=z.clientHeight-o.offsetHeight;l<0&&(l=0);t<0&&(t=0);l>w&&(l=w);t>h&&(t=h);with(o.style){top=t+"px";left=l+"px"}};d.onmouseup=function(){d[a]=null;o[c]&&o[c]()};o[b]&&o[b]();return false}}; drag("demo"); </script> </body> </html>
