h5学习笔记：图片浮动提示

最新推荐文章于 2022-08-12 08:00:00 发布

hero82748274

最新推荐文章于 2022-08-12 08:00:00 发布

阅读量2.3k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/52244717

版权

javascript和Egret相关专栏收录该内容

97 篇文章 3 订阅

订阅专栏

在锋利的jquery一书里面讲到浮动图片应该如何做。下面记录一下
这里写图片描述

在第二版的书里，少了一段代码。导致跟随不到。所以在css设置的时候需要”position”:”absolute”, 加入定位的属性这个程序就能实现了。

jq里面mouseover，mouseout，mousemove是bing绑定的缩写。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片浮动提示</title>
    </head>
    <style type="text/css">
        ul{
            list-style: none;
        }

        #pic ul li{
            display: inline-block;
            padding: 6px;
            box-shadow: 2px 1px 2px #888888;
        }

        #pic ul li a{
            display: block;
            }

        #tooltip{
            display:inline-block;
            padding: 6px;
            background: white;
            border: 1px solid #F8F8F8;
        }

    </style>
    <body>
        <div id="pic">
            <ul>
                <li><a href="img/hot1.jpg"><img src="img//hot1.jpg"></a>风景一</li>
                <li><a href="img/hot2.jpg"><img src="img/hot2.jpg"></a>风景二</li>
                <li><a href="img/hot3.jpg"><img src="img/hot3.jpg"></a>风景三</li>
                <li><a href="img/hot4.jpg"><img src="img/hot4.jpg"></a>风景四</li>
            </ul>

        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript"> 
        $(function(){

            $("#pic a").mouseover(function(e){

                var tooltip = "<div id='tooltip'> <img src="+this.href+"/><br> 我正在测试浮动提示</div>";            
                $("body").append(tooltip);
                $("#tooltip").css({
                    "position":"absolute",
                    "top":(e.pageY+10)+"px",
                    "left":(e.pageX+10)+"px"

                }).show()

            }).mouseout(function(e){

                $("#tooltip").remove();

            }).mousemove(function(e){

                $("#tooltip").css({
                    "top":(e.pageY+10)+"px",
                    "left":(e.pageX+10)+"px"
                });         
            });
            });


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

hero82748274

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记：图片浮动提示

在锋利的jquery一书里面讲到浮动图片应该如何做。下面记录一下在第二版的书里，少了一段代码。导致跟随不到。所以在css设置的时候需要”position”:”absolute”, 加入定位的属性这个程序就能实现了。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片浮动提示</titl
复制链接

扫一扫