前端开发jQuery自定义提示信息

怎样搭建前端开发环境|web前端开发的社会环境|前端开发系统环境搭建

html 代码

<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title></title>
</head>
<body>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        img {
            border: 0 none;
        }
        body {
            padding: 100px;
        }
        .tooltip {
            position: absolute;
            display: none;
            border: 1px solid #333;
            border-radius: 8px;
            box-shadow: 0 0 3px rgba(000, 000, 000, 0.8);
            background: rgba(247, 245, 209, 0.5);
            padding: 3px;
            color: #333;
        }
        /* border-radius,box-shadow ie9以下都不兼容 */
    </style>
    <div class=”test”>
        <a style=”border:1px solid;display:inline-block;margin-top: 100px” href=”#” class=”link” title=”1111111111″>自定义链接提示</a>
        <a href=”#” class=”link” title=”自定义TITLE提示2222!!!!”>自定义链接提示</a>
        <div class=”link” style=”border:1px solid;width:500px ;height:100px;” title=”我是div”></div>
</body>
<script src=”http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=”text/javascript”>
    $(document).ready(function () {
        var x = 10;
        var y = 20;
        $(“.link”).mouseover(function (e) {
            //alert(e.pageX);
            if (typeof ($(this).attr(‘title’)) != ‘undefined’) { // 判断标签中是否有定义title属性
                this.my_tit = this.title;
                this.title = ”;
                var tooltip = “<div class=’tooltip’>” + this.my_tit + “</div>”;
                $(“body”).append(tooltip);
                $(“.tooltip”).css({
                    display: ‘block’,
                    left: e.pageX,
                    top: e.pageY + y,
                })
            }
        }).mouseout(function () {
            if (typeof ($(this).attr(‘title’)) != ‘undefined’) {
                this.title = this.my_tit;
                $(“.tooltip”).remove();
            }
        }).mousemove(function (e) {// 鼠标移动时跟随
            $(“.tooltip”).css({
                left: e.pageX + x,
                top: e.pageY + y
            })
        })
    });
</script>
</html>

小程序前端开发环境|建整套前端开发环境|前端的开发环境、

» 本文来自:前端开发者 » 《前端开发jQuery自定义提示信息》
» 本文链接地址:https://www.rokub.com/5157.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!