鼠标悬浮显示图片和文字

最新推荐文章于 2022-09-16 10:41:17 发布

huachongrizhao

最新推荐文章于 2022-09-16 10:41:17 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端JS 文章标签：鼠标悬浮显示

本文链接：https://blog.youkuaiyun.com/huachongrizhao/article/details/94599675

前端JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何通过引入jQuery库和编写配置及业务JavaScript代码来实现在鼠标悬浮时显示图片和文字的功能。主要涉及的文件包括jquery-1.11.0.min.js、config.js和screen.js。在页面加载完成后，通过showModulesTypeArray()初始化数据，并应用hover()函数实现悬停显示效果。

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

1.引入jquery-1.11.0.min.js、配置文件config.js、业务js screen.js；

页面代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../config/config.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/screen.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .side-menu-sub li {
                width: 10%;
                line-height: 50px;
                background: #EEEEEE;
            }
            
            #showModulesDetails {
                position: relative;
                padding: 0 10px;
                box-sizing: border-box;
                background: lavender;
                left: 30%;
            }
            
            #showModulesDetails img {
                width: 100px;
                height: 100px;
                margin: 2px;
            }
        </style>
    </head>

    <body>
        <!--显示左侧的图标栏-->
        <div id="showModules"></div>
        <!--显示右侧的图标详情图-->
        <div id="showModulesDetails" style="display: none;width: 100px;height: 100px;"></div>
    </body>

</html>

config.js代码：

var modulesArrays = [{
        'id': '1',
        'name': '柱状图',
        'type': 'Bar',
        'grade': '1',
        'parentId': '1'
    }, {
        'id': '2',
        'name': '折线图',
        'type': 'Line',
        'grade': '1',
        'parentId': '2'
    }, {
        'id': '3',
        'name': '饼图',
        'type': 'Pie',
        'grade': '1',
        'parentId': '3'
    }, {
        'id': '4',
        'name': '特殊饼图',
        'type': 'Pie',
        'grade': '2',
        'parentId': '3'
    }

];

var modulesTypeArray = [{
        'id': '1',
        'name': '柱状图',
        'typeId': '1',
        'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562160109173&di=484dd1a2e3bfd544b26f8b7da56216f5&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130801%2F11604791_100539834000_2.jpg',
        'enable': '1',
        'analysis': '1',
        'analysis_method': '随便1',
        'parentId': '1'
    }, {
        'id': '2',
        'name': '折线图',
        'typeId': '2',
        'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562160097267&di=9dea3180223ab9b2967bfa2be81ce878&imgtype=0&src=http%3A%2F%2Fpic40.nipic.com%2F20140331%2F9469669_142840860000_2.jpg',
        'enable': '1',
        'analysis': '1',
        'analysis_method': '随便2',
        'parentId': '2'
    }, {
        'id': '3',
        'name': '饼图',
        'typeId': '3',
        'img': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562160081037&di=4ce06b95e0088cf4656de52f109ed619&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png',
        'enable': '1',
        'analysis': '1',
        'analysis_method': '随便3',
        'parentId': '3'
    }, {
        'id': '4',
        'name': '特殊饼图',
        'typeId': '4', //typeId对应上级的id比如说饼图为3，特殊饼图为4
        'img': 'http://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
        'enable': '1',
        'analysis': '1',
        'analysis_method': '随便4',
        'parentId': '3' //对应上一级：比如说柱状图和特殊柱状图的parentid都是3对应的大类，都是饼图
    }

];

业务js（screen.js）：

/*显示所有组件*/
function showModulesTypeArray() {
    //    console.log(JSON.stringify(modulesArrays))
    var modulesArray = new Array();
    for(var i = 0; i < modulesArrays.length; i++) {
        if(modulesArrays[i].grade == 1) {
            modulesArray.push(modulesArrays[i].name);
            $('#showModules').append('<ul class="side-menu-sub"><li style="list-style-type:none" id="' + modulesArrays[i].parentId + '">' + modulesArrays[i].name + '</li></ul>')
        }
    }
    //    console.log(JSON.stringify(modulesArray));

};
/*显示组件详情*/
function showModulesByTypeId(data) {
    var modulesByTypeArray = new Array();
    var jsonObj = {};
    for(var i = 0; i < modulesTypeArray.length; i++) {
        if(data == modulesTypeArray[i].parentId) {
            jsonObj = {
                'name': modulesTypeArray[i].name,
                'img': modulesTypeArray[i].img
            };
            modulesByTypeArray.push(jsonObj)
        }
    }
    //    console.log(JSON.stringify(modulesByTypeArray));
    return modulesByTypeArray;
};

/*鼠标悬浮显示*/
function hover() {
    $('.side-menu-sub li').hover(function() {
        console.log($(this).attr('id'))
        var parentId = $(this).attr('id');
        var top = $(this).offset().top;
        $('#showModulesDetails').html('')
        var arrays = showModulesByTypeId(parentId);
        console.log(arrays)
        for(var i = 0; i < arrays.length; i++) {
            $('#showModulesDetails').append('<div><img src="' + arrays[i].img + '"/></div><div>' + arrays[i].name + '</div>')
        }
        $('#showModulesDetails').show()
        $('#showModulesDetails').css('top', (top - 88) + 'px');
        //console.log($(this).offset().top)
    }, function() {
        $('#showModulesDetails').hover(function() {}, function() {
            $('#showModulesDetails').hide()
            //console.log(1)

        });

    });

}

$(document).ready(function() {
showModulesTypeArray();
hover();

});