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

luckyjaky

浏览: 114394 次
性别:
来自: 深圳

最近访客更多访客>>

geosir

xiyuzhimo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript\JQuery

jQuery Apple JavaScript CSS XHTML

<!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>

分享到：

JQuery事件对象的属性event | 锋利的JQuery实例-超链接提示效果

2011-03-02 16:41
浏览 1189
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

分享33个优秀的 jQuery 教程

细说Cookie

百度和优酷的搜索体验改善，类似Google Instant搜索

jquery如何退出each循环的?

jquery获取当前鼠标的x、y位置

26个JQuery使用小技巧

JQuery UI Demo Darggable学习结果

锋利的JQuery实例-用JQuery打造个性网站-详细页面

锋利的JQuery实例-用JQuery打造个性网站-首页

cookie插件

去除左、右边空格

css与attr、trigger()与toggle()的区别

复选框应用

锋利的JQuery实例-视频展示效果

JQuery中动画效果的left值

JQuery事件对象的属性event

锋利的JQuery实例-超链接提示效果

锋利的JQuery学习笔记-认识JQuery

js乱码解决方法

【JQuery】鼠标经过表格行变色

最近访客更多访客>>