wendu网站案例笔记

1.首页搜索功能

html部分：

<div class="search-module">
                <div class="search-txt">
                    <input class="search-ipt" type="text" value="" id="searchText">
                    <span class="search-icon"></span>
                    <span class="search-tips">请输入关键词，例如"考研"</span>
                    <p class="search-hot">
                        <a href="#" class="fl" target="_blank">21考研特训</a>
                    </p>
                </div>
                <input class="search-btn" type="button" value="搜索">
</div>

• input里用的不是placeholder 部分js:

   var searchUrl = '/Search/SearchResult';
function OpenSearchResult() {
    var key = $.trim($("#searchText").val());
    if (key != null && key != '') {
        key = escape(key);
        window.open(searchUrl + "?SearchKey=" + key, "_blank");
    }
    else {
        window.open(searchUrl + "?SearchKey=" + escape('考研'), "_blank");
    }
}
$(function () {
    document.onkeydown = function (e) {
        var ev = document.all ? window.event : e;

        if (ev.keyCode == 13 && $("#searchText").is(":focus") && $.trim($("#searchText").val()) != '') {
            OpenSearchResult();
        }
    }

    BindClick(); 

    //当焦点在输入框中没有输入文本，这时点击搜索按钮不搜索任何东西
    //$("#searchText").blur(function () {
    //    if ($.trim($("#searchText").val()) == '') {
    //        $('.se-button').unbind("click");
    //        setTimeout(BindClick, 200);//再次点击搜索按钮时默认搜索"考研"
    //    }
    //});

    // 搜索框事件
    $('.search-tips').click(function () {
        $('.search-ipt').focus();
        console.log('a')
        $(this).siblings('.search-icon').hide().siblings('.search-tips').hide();
    });
    $('.search-ipt').focus(function () {
        if ($(this).val() == '') {
            $(this).siblings().hide();
        }
    }).blur(function () {
        if ($(this).val() == '') {
            $(this).siblings().show();
        }
    });

});

function BindClick() {
    $('.search-btn').bind("click", function () { OpenSearchResult(); }); //点击提交按钮
}

• var ev = document.all ? window.event : e; 这个是用来区别ie 和其他浏览器的一个判断:下面简单示例

var btn = document.getElementById('id');
btn.onclick = function(event){//给btn绑定一个点击事件
  //这里用一个三元表达式来做简单判断，如果存在document.all那么使用window.event
  //否则就直接用event
  var ev = document.all ? window.event : event;
  alert(ev);
}

以下分析知识点：

1. 鼠标按下事件：onkeydown;
2. ev.keyCode == 13 ;13表示enter按键的keyCode编码
3. escape(string) 转译
4. window.open() 弹出新窗口的命令:具体示例；

window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

• 'page.html' 弹出窗口的文件名；
    'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
    height=100 窗口高度；
    width=400 窗口宽度；
    top=0 窗口距离屏幕上方的象素值；
    left=0 窗口距离屏幕左侧的象素值；
    toolbar=no 是否显示工具栏，yes为显示；
    menubar，scrollbars 表示菜单栏和滚动栏。
    resizable=no 是否允许改变窗口大小，yes为允许；
    location=no 是否显示地址栏，yes为允许；
    status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

2.鼠标移入，下拉显示

html部分：

<div class="top-dropDown top-zx">
    <p class="drop-downTit"><a href="#" target="_blank">资讯</a></p>
    <div class="dropDown-list">   
        <a href="#" target="_blank">资讯首页</a>
        <a href="#" target="_blank">考研</a>
        <a href="#" target="_blank">四六级</a>
        <a href="#" target="_blank">医学教育</a>
    </div>
</div>

• 将类为top-dropDown 的样式调hover状态时

 .top-dropDown:hover .dropDown-list {
    display: block;
}

• 资讯旁边箭头可通过背景图控制

3.楼层跳跃（国际教育）

html：

 <div class="hyjy-subnav">
            <div class="section_1100 clearfix">
                <a href="javascript:;" class="firsta active qbkc">全部课程</a>
                <a href="javascript:;" class="hxsz">核心师资</a>
                <a href="javascript:;" class="kctx">课程体系</a>
                <a href="javascript:;" class="bmsfw">保姆式服务</a>
                <a href="javascript:;" class="nbzl">内部资料</a>
                <a href="javascript:;" class="spk">视频库</a>
            </div>
        </div>

js:

 // scrool
        var f1top = $('.qbkcb').offset().top-100;
        var f2top = $('.hxszb').offset().top-100;
        var f3top = $('.kctxb').offset().top-100;
        var f4top = $('.bmsfwb').offset().top-100;
        var f5top = $('.nbzlb').offset().top-100;
        var f6top = $('.spkb').offset().top-100;
        function scrollHandler() {
            // 当窗口滚动时，首先得到滚动过的距离，保存在st中
            var st = $(this).scrollTop();
            return false;
            // 判断滚动过的距离是否到达最后一个楼层
            // 的【顶部】和【顶部以下100像素】之间
            // if (st >= f6top && st <= f6top) {
            //     $('.spkb').addClass('curr').siblings().removeClass('curr');
            // }
        }
        $(window).scroll(scrollHandler);
        $('.hyjy-subnav a').each(function (index) {
            $(this).click(function () {
                $(this).addClass('curr').siblings().removeClass('curr');
                if ($(this).index() === 0) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f1top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
                if ($(this).index() === 1) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f2top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
                if ($(this).index() === 2) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f3top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
                if ($(this).index() === 3) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f4top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
                if ($(this).index() === 4) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f5top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
                if ($(this).index() === 5) {
                    $(this).addClass('curr').siblings().removeClass('curr');
                    $('html,body').stop().animate({
                        scrollTop: f6top
                    },1000, function () {
                        $(window).scroll(scrollHandler);
                    });
                }
            });
        })
        // 
        var $flow = $('.hyjy-subnav')
        var offset = $flow.offset();
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            if (offset.top < scrollTop) {
                $flow.addClass("fixed");
            } else {
                $flow.removeClass("fixed");
            }
        });