前端jQuery实现的提示浮层跟随鼠标移动

前端如何提升开发效率 前端开发如何调试 安卓前端开发岗:岗位职责

html 代码

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
    <title>jquery实现简单文字提示</title>
    <style type=”text/css”>
        #preview {
            background: #000;
            color: #fff;
            padding: 6px 8px;
            border-radius: 3px;
            font-size: 13px;
            display: none;
            position: absolute;
        }
        .preview {
            width: 130px;
            height: 40px;
            padding: 0;
            font-size: 14px;
            line-height: 38px;
            color: #333;
            background-color: #fff;
            border: 1px solid #d1d2d3;
            display: inline-block;
            margin: 50px 20px 0;
            font-weight: normal;
            text-align: center;
            cursor: pointer;
            border-radius: 2px;
        }
    </style>
    <script type=”text/javascript” src=”http://img.jb51.net/jslib/jquery/jquery.js”></script>
</head>
<body>
    <a class=”preview”>把鼠标放到这里1</a>
    <a class=”preview”>把鼠标放到这里2</a>
    <a class=”preview”>把鼠标放到这里3</a>
    <a class=”preview”>把鼠标放到这里4</a>
    <a class=”preview”>把鼠标放到这里5</a>
    <script type=”text/javascript”>
        this.imagePreview = function () {
            /* CONFIG */
            xOffset = 25;
            yOffset = 15;
            // 可以自己设定偏移值
            /* END CONFIG */
            $(“a.preview”).hover(function (e) {
                $(“body”).append(“<div id=’preview’>jquery实现简单文字提示</div>”);
                $(“#preview”)
                    .css(“top”, (e.pageY – xOffset) + “px”)
                    .css(“left”, (e.pageX + yOffset) + “px”)
                    .fadeIn(“slow”);
            },
                function () {
                    $(“#preview”).fadeOut(“fast”);
                });
            $(“a.preview”).mousemove(function (e) {
                $(“#preview”)
                    .css(“top”, (e.pageY – xOffset) + “px”)
                    .css(“left”, (e.pageX + yOffset) + “px”);
            });
        };
        // 页面加载完执行
        $(document).ready(function () {
            imagePreview();
        });
    </script>
</body>
</html>

如何更的学好前端开发 安卓与前端开发视频教程下载 安卓与前端开发视频教程下载

» 本文来自:前端开发者 » 《前端jQuery实现的提示浮层跟随鼠标移动》
» 本文链接地址:https://www.rokub.com/5702.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!