提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

鼠标悬浮事件 -jQuery hover（）方法（layer.js）（layer.tips）

JSjQuery事件方法 鼠标 Tips 悬浮 layer
2023-09-27 14:29:08 时间

 鼠标悬浮事件 -jQuery hover（）方法代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="title-01"><span class="name">机构账户统计</span></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript">
    var differentindex = 999;
    $(function(){
        $(".name").hover(function() {
            openMsg();
        }, function() {
            layer.close(differentindex);
        });
    });
    function openMsg() {
        console.log('------open msg')
        differentindex = layer.tips('点击分类内容项，可查看下一级机构账户统计情况', '.name', {
            tips: [1, '#3595CC'],
            time: 30000
        });
    }
</script>
</body>
</html>

以下是目录结构截图：

（需要注意的是，layer.js的引入，从官网下载了layer.js，保存到本地，然后从文件中引入 - 注意修改代码中引入layer.js的路径（line 10）） 

layer官网：http://layer.layui.com/

layer.js下载地址：http://layer.layui.com/

 

效果如下： 

免下载layer.js文件，直接通过 CDN（内容分发网络） 引用layui.js，使用layui.js下的layer，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="title-01"><span class="name">机构账户统计</span></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--<script src="./layer-v3.1.1/layer/layer.js"></script>-->
<script src="https://www.layuicdn.com/layui/layui.js"></script>

<script type="text/javascript">


    // layer.msg('hello');

    var differentindex = 999;
    $(function(){
        $(".name").hover(function() {
            openMsg();
        }, function() {
            layer.close(differentindex);
        });
    });
    function openMsg() {
        layui.use('layer', function() {
            var layer = layui.layer;
            console.log('------open msg')
            differentindex = layer.tips('点击分类内容项，可查看下一级机构账户统计情况', '.name', {
                tips: [1, '#3595CC'],
                time: 30000
            });
        })

    }
</script>
</body>
</html>

 

 

 

相关文章