井井客

搜索

练手JQ代码实现鼠标移上去显示浮动两边菜单

本来是小伙伴的问题,但是我的思路跟他的不一样,所以自己练习了一下,鼠标移到顶部指定位置时显示顶部菜单,移到距离左侧什么位置时显示左侧菜单。

练手JQ代码实现鼠标移上去显示浮动两边菜单

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练手JQ代码实现鼠标移上去显示浮动两边菜单</title>
<style>
    body,html,div { padding: 0; margin: 0; }
    body,html { height: 100%; }
    .top, .left { transition: all 0.3s; }
    .top {position:fixed; z-index: 3; width: 100%; height: 60px; top:-60px; left: 0; background: rgba(0,0,0,0.4); }
    .top.active { top: 0; }
    .left { position: fixed; z-index: 2; width:240px; height: 100%; top:0; left: -240px; background: rgba(0,20,50,1); }
    .left.active { left: 0; }
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
<script>
    //获取节点以及高度
    var $top = $('.top'), $left = $('.left');
    var topHeight = $top.height(), leftWidth = $left.width();
    //监听鼠标移动事件
    $('body').on('mousemove',function(e){
        //观察高度和宽度(leftWidth,topHeight可以指定值例如距离顶部10px就显示顶部菜单的话就传10)
        watchEvent(e.pageX,leftWidth,$left)
        watchEvent(e.pageY,topHeight,$top)
    })
    //核心函数,用于监听鼠标距离顶部左边的高度是否达到要求然后显示或隐藏菜单
    function watchEvent(nowValue,fixedValue,thisDom){
        if(nowValue <= fixedValue && !thisDom.hasClass('on') && !thisDom.hasClass('delay')){
        //如果位置在范围内并且样式中不包含on和delay
            thisDom.addClass('active delay on')
        }else if(nowValue > fixedValue && thisDom.hasClass('on') && thisDom.hasClass('delay')){
        //如果位置在范围外,并且样式中包含on和delay
            //先删除on
            thisDom.removeClass('on')
            setTimeout(function(){
                //1000毫秒时删除active,到时候会有隐藏的效果
                thisDom.removeClass('active');
            },1000)
            setTimeout(function(){
                //隐藏的效果消失时将delay样式也删除
                thisDom.removeClass('delay');
            },1300)
        }
    }
</script>
</body>
</html>

注释也是差不多的。另外需要注意一下,我这个是按照浮动元素原始的高度或者宽度做为它的区域的的。如果不需要这么大的区域,比如鼠标距离顶部5像素,距离左边3像素的话。则可以在监听鼠标移动事件中这么写:

    watchEvent(e.pageX,3,$left)
    watchEvent(e.pageY,5,$top)

大致就是这样的了~

文章TAG:JQ

作者:井井客原创来源:原创
本文标题:练手JQ代码实现鼠标移上去显示浮动两边菜单
本文链接:/c/15301.html

上一篇:自制canvas压缩图片对比效果
下一篇:【微信小程序】将富文本解析为rich-text支持的JSON格式

文章分类

相关阅读

随便看看