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

来源：互联网发布：ubuntu安装eclipse c 编辑：程序博客网时间：2024/05/22 02:16

在锋利的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>

0 0

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

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