jquery-纯jQuery制作网站超链接和图片提示效果

最新推荐文章于 2019-12-30 16:23:14 发布

Annaluo

最新推荐文章于 2019-12-30 16:23:14 发布

阅读量775

点赞数

分类专栏： jQuery 文章标签：图片 jquery html javascript dom

本文链接：https://blog.csdn.net/Annaluo/article/details/78049285

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接和图片提示效果</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
<p><a href="#" title="这是自带提示1">自带提示1</a> </p>
<p><a href="#" title="这是自带提示2">自带提示2</a> </p>

<ul>
    <li><a href="../images/1.jpg" class="tooltip" title="11"><img src="../images/1.jpg" height="100px" width="200px"> </a> </li>
</ul>
<script>
    $(function () {
        var x = 10;
        var y = 20;
        $("a.tooltip").mouseover(function (e) {
            //当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值
            this.myTitle = this.title;
            this.title = "";
            //创建div元素
            /*var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";*/
            //图片效果
            var tooltip = "<div id='tooltip'><img src='"+this.href+"' alt='产品预览'></div>"
            $("body").append(tooltip);  //将它追加到文档中
            $("#tooltip")
                    .css({
                        "top":(e.pageY+y) + "px",
                        "left":(e.pageX+x) + "px"
                    }).show("fast");    //设置x坐标和y坐标，并且显示
        }).mouseout(function () {
            //当鼠标滑出时，再把对象的myTitle属性的值又赋给属性title
            this.title = this.myTitle;
            $("#tooltip").remove(); //移除
        }).mousemove(function (e) {
            $("#tooltip")
                    .css({
                        "top":(e.pageY+y) +　"px",
                        "left":(e.pageY+y) + "px"
                    });
        });
    })


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

Annaluo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery-纯jQuery制作网站超链接和图片提示效果

超链接和图片提示效果提示1提示2自带提示1 自带提示2 $(function () { var x = 10; var y = 20; $("a.tooltip").mouseover(function (e) { //当鼠标滑入时，给对象添加一个新属性，并把title的值
复制链接

扫一扫

专栏目录