第1章 WEB前端开发工程师-jQuery框架公共代码：显示隐藏——搜索下拉

老张谋

于 2019-06-26 17:06:30 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wgf5845201314/article/details/93750546

前端技术专栏收录该内容

111 篇文章

订阅专栏

本文详细介绍了使用jQuery实现网页元素的交互效果，包括搜索框的动态展示、元素的显示与隐藏，以及焦点图文字随鼠标移动的效果。通过具体代码示例，展示了如何增强用户体验并增加网页的互动性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
    //搜索下拉框
    $('.search-text').focus(function(){
        $(".search-feedback").show();
    }).blur(function(){
        $(".search-feedback").hide();
    })
    //显示隐藏
    $(".guide-item").hover(function(){
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    })
    //焦点图  文字 跟随鼠标移动
    var bg = $(".header-banner").finder(".bg");
    var text = $(".header-banner").finder(".text");
    var disX = 0;
    var disY = 0;
    bg.hover(function(ev){
        disX = ev.clintX;
        disY = ev.clintY;
        text.css({left:ev.clintX,top: ev.clintY});
        text.show();
        $(document).mousemove(function(ev){
            var offset_left = ev.clintX+20;
            var offset_top = ev.clintY-bg.offset().top;
            text.css({left:offset_left,top: offset_top});
        }),function(){
            text.hide();
        }
    })
    
})