锋利的JQuery实例-图片提示效果

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

luckyjaky

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

阅读量96

点赞数

分类专栏： JavaScript\JQuery 文章标签： jQuery Apple JavaScript CSS XHTML ViewUI

本文链接：https://blog.csdn.net/luckyjaky/article/details/83848508

版权

JavaScript\JQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>图片提示</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }
        img
        {
            border: none;
        }
        ul, li
        {
            margin: 0;
            padding: 0;
        }
        li
        {
            list-style: none;
            float: left;
            display: inline;
            margin-right: 10px;
            border: 1px solid #AAAAAA;
        }
        
        /* tooltip */
        #tooltip
        {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }
    </style>
    <!--   引入jQuery -->
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            var x = 10;
            var y = 20;
            $(".tooltip").mouseover(function (e) {
                this.myTitle = this.title;
                this.title = "";
                var tooltip = "<div id='tooltip'><img src=" + this.href + " alt='产品展示图' /><br />" + this.myTitle + "</div>";
                $("body").append(tooltip);
                $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
            }).mouseout(function () {
                this.title = this.myTitle;
                $("#tooltip").remove();
            }).mousemove(function (e) {
                $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h3>
        有效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">
            <img src="images/apple_1.jpg"  /></a></li>
        <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">
            <img src="images/apple_2.jpg"  /></a></li>
        <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">
            <img src="images/apple_3.jpg"  /></a></li>
        <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
            <img src="images/apple_4.jpg" /></a></li>
    </ul>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3>
        无效果：</h3>
    <ul>
        <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod">
            <img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
        <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano">
            <img src="images/apple_2.jpg" alt="苹果 iPod nano" /></a></li>
        <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone">
            <img src="images/apple_3.jpg" alt="苹果 iPhone" /></a></li>
        <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac">
            <img src="images/apple_4.jpg" alt="苹果 Mac" /></a></li>
    </ul>
    </form>
</body>
</html>

luckyjaky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锋利的JQuery实例-图片提示效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="serv.
复制链接

扫一扫

专栏目录