经典实用排序筛选js特效

9个月前 (03-05 13:35)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

网站中常用的点击分类名字就自动筛选排序效果，方便用户快速选择，很经典实用的一个网页特效。

<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>经典实用排序筛选js特效_武鸣人</title>
<style type="text/css">
h2,p{margin:0px;padding:0px;}
body{background:#2d3033;margin:0px;padding:0px;font-size:12px;}
#box_wuming_ren{width:942px;height:auto;border:9px solid #33373b;margin:20px 20px 20px 20px;padding:1px;background:#222527;overflow:hidden;}
#box_wuming_ren .title{width:942px;height:100px;float:left;background:#282b2e;}
#box_wuming_ren .title h2{display:block;text-align:center;line-height:60px;font-family:"微软雅黑";font-size:24px;color:#46c5ec;letter-spacing:2px;}
#box_wuming_ren .title p{display:block;text-align:center;line-height:20px;font-family:"微软雅黑";font-size:14px;color:#fff;letter-spacing:2px;}
#box_wuming_ren .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_wuming_ren .tit{width:430px;height:34px;color:#fff;line-height:34px;display:inline-block;}
#box_wuming_ren .tit span{float:left;}
#box_wuming_ren .tit .menu{width:182px;height:22px;float:left;display:inline;margin:6px 0 0 0;background:url(/img/20240305_www_wuming_ren_7.png) no-repeat 0 -92px;}
#box_wuming_ren .tit .menu ul{margin:0px;padding:0px;float:left;list-style-type:none;}
#box_wuming_ren .tit .menu li{float:left;line-height:22px;text-align:center;cursor:pointer;}
#box_wuming_ren .tit .menu li.everything{width:79px;float:left;}
#box_wuming_ren .tit .menu li.applications{width:50px;float:left;border-left:1px solid #000;border-right:1px solid #000;}
#box_wuming_ren .tit .menu li.utilities{width:50px;float:left;}
#box_wuming_ren .tit .menu li.everything_h{background:url(/img/20240305_www_wuming_ren_7.png) no-repeat 0 0;}
#box_wuming_ren .tit .menu li.applications_h{background:url(/img/20240305_www_wuming_ren_7.png) no-repeat -79px 0;}
#box_wuming_ren .tit .menu li.utilities_h{background:url(/img/20240305_www_wuming_ren_7.png) no-repeat -129px 0;}
#box_wuming_ren .tit .menu_1{width:101px;height:22px;float:left;display:inline;margin:6px 0 0 0;background:url(/img/20240305_www_wuming_ren_7.png) no-repeat 0 -55px;}
#box_wuming_ren .tit .menu_1 ul{margin:0px;padding:0px;float:left;list-style-type:none;}
#box_wuming_ren .tit .menu_1 li{float:left;line-height:22px;text-align:center;cursor:pointer;}
#box_wuming_ren .tit .menu_1 li.name{width:50px;float:left;}
#box_wuming_ren .tit .menu_1 li.size{width:50px;float:left;border-left:1px solid #000;}
#box_wuming_ren .tit .menu_1 li.name_h{background:url(/img/20240305_www_wuming_ren_7.png) no-repeat 0 0;}
#box_wuming_ren .tit .menu_1 li.size_h{background:url(/img/20240305_www_wuming_ren_7.png) no-repeat -132px 0;}
#box_wuming_ren .content{width:902px;height:610px;float:left;background:#282b2e;padding:20px 40px;}
#box_wuming_ren .content ul{margin:0px;padding:0px;float:left;list-style-type:none;position:relative;}
#box_wuming_ren .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_wuming_ren .content li strong{display:block;text-align:center;line-height:20px;color:#fff;}
#box_wuming_ren .content li span{display:block;text-align:center;line-height:20px;color:#686f74;}
</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;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function startMove(obj, json, iT, fnEnd){
if(obj.timer)clearInterval(obj.timer);
obj.timer = setInterval(function (){
doMove(obj, json, iT, fnEnd);
}, 30);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function getStyle(obj, attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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();
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="box_wuming_ren">
<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="/img/20240305_www_wuming_ren_8.png">
                <strong>武鸣人一号</strong>
                <span>348 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_9.png">
                <strong>武鸣人二号</strong>
                <span>1904 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_10.png">
                <strong>武鸣人三号</strong>
                <span>1337 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_11.png">
                <strong>武鸣人四号</strong>
                <span>401 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_12.png">
                <strong>武鸣人五号</strong>
                <span>12875 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_13.png">
                <strong>武鸣人六号</strong>
                <span>5273 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_14.png">
                <strong>武鸣人七号</strong>
                <span>5437 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_15.png">
                <strong>武鸣人八号</strong>
                <span>2764 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_16.png">
                <strong>武鸣人九号</strong>
                <span>17612 KB</span>
            </li>
            <li class="util">
            <img src="/img/20240305_www_wuming_ren_17.png">
                <strong>武鸣人十号</strong>
                <span>972 KB</span>
            </li>
            <li class="util">
            <img src="/img/20240305_www_wuming_ren_18.png">
                <strong>武鸣人十一号</strong>
                <span>245 KB</span>
            </li>
            <li class="util">
            <img src="/img/20240305_www_wuming_ren_19.png">
                <strong>武鸣人十二号</strong>
                <span>3788 KB</span>
            </li>
            <li class="app">
            <img src="/img/20240305_www_wuming_ren_20.png">
                <strong>武鸣人十三号</strong>
                <span>1669 KB</span>
            </li>
        </ul>
    </div>
</div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/185.html

筛选排序
回帖

经典实用排序筛选js特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息