0%

终于给博客的搜索按钮加上了事件切换器

发布于 / 分类: JavaScript / 暂无评论 / 阅读量 827

最后更新于 2018年10月05日

都是辛酸泪,这几天学这个头大,不过好在我搞定了,并且还不会冲突,兼容ie9以上,相当奈斯!

  • 2018-10-5 重新做了兼容,虽然没什么卵用,美名其曰优化代码!

效果图:
-50

原理就是通过修改class的名字来达到隐藏和显示的效果,并且修复了原来动效不能显示的bug。

代码部分(css部分我就不提供了):
[hide]

//兼容添加事件
function addEvent(obj,type,fn) {
    if(obj.addEventListener) {
        obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+type,fn);
    };
}
//兼容删除事件
function removEvent(obj,type,fn) {
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent) {
        obj.detachEvent('on'+type,fn);
    };
    
};
//兼容查找事件目标
function getTagName(evt) {
    if(evt.target) {
        return evt.target;
    }else if(window.event.srcElement) {
        return window.event.srcElement;
    };
};

//基本调用
addEvent(window,'load',search);
 function search() {
    var searcha = document.getElementById('search-a');
    addEvent(searcha,'click',topsearch);

 }


    

//切换器
    function topsearch() {
        var searchphp = document.getElementById('searchphp');
        if(! ifcssName(searchphp,'serachw')) {
            if(ifcssName(searchphp,'serachd')) {
                searchphp.className = searchphp.className.replace('serachd','serachw');
            }else {
                searchphp.className += ' ' + 'serachw';
            };
        };
        this.removeEventListener('click',topsearch,false);
        this.addEventListener('click',bottomsearch,false)
    }
    
    function bottomsearch() {
        var searchphp = document.getElementById('searchphp');
        if(! ifcssName(searchphp,'serachd')) {
            searchphp.className = searchphp.className.replace('serachw','serachd');
        };
        this.removeEventListener('click',bottomsearch,false);
        this.addEventListener('click',topsearch,false)
    }

    function ifcssName(elemt,cssName) {
        return elemt.className.match(new RegExp(cssName));
    };

[/hide]

YoDu魔改版主题v3.1更新 (修复bug) 《Yodu》预加载如何加载到自己需要的js内容
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao