【锋利的JQuery-学习笔记】Tootip（提示框）

效果图：

1.当鼠标移动到超链接时，有提示框。

2..当鼠标移动到图片动画旋转

html：

                 <div id="jnNotice">

                    <div id="jnMiaosha">

                        <a href="#nogo" class="JS_css3"><img src="images/upload/20120216.jpg" alt="冬品清仓"  /></a>

                    </div>

                    <div id="jnNoticeInfo">

                        <h2 title="最新动态">最新动态</h2>

                        <ul>

                            <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>

                            <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>

                            <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>

                            <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>

                            <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>

                            <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>

                        </ul>

                        <br class="clear" />

                    </div>

                </div>

css:

/* 最新动态 */

#jnNotice{

    float: left;

    height: 321px;

    overflow: hidden;

    width: 230px;

}

#jnMiaosha {

    float: left;

    height: 176px;

    margin-bottom: 10px;

    overflow: hidden;

    width: 230px;

}

.JS_css3 img {

    -webkit-transition:1s all;

    -moz-transition:1s all;

    -o-transition:1s all;

    transition:1s all;

}

.JS_css3:hover img {

    -webkit-transform:rotate(720deg);

    -moz-transform:rotate(720deg);

    -o-transform:rotate(720deg);

    transform:rotate(720deg);

}

#jnNoticeInfo {

    float: left;

    border: 1px solid #DFDFDF;

    height: 133px;

    overflow: hidden;

    width: 228px;

}

#jnNoticeInfo h2 {

    height: 23px;

    line-height: 23px;

    border-bottom: 1px solid #DFDFDF;

    text-indent:12px;

}

#jnNoticeInfo ul {

    float: left;

    padding: 6px 2px 0 12px;

}

#jnNoticeInfo li {

    height: 20px;

    line-height: 20px;

    overflow: hidden;

}

#jnNoticeInfo li a{

    color:#666666;

}

#jnNoticeInfo li a:hover{

    color: #008CD7;

    text-decoration: none;

}

/* 品牌活动 */

js:

$(function () {

    var x = 10;

    var y = 15;

$("a.tooltip").mouseover(function (e) {

        this.myTitle = this.title;

        this.title = "";
var tooltip = "<div id = ‘tooltip‘>" + (this.myTitle !=null ?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();

    });
});

【锋利的JQuery-学习笔记】Tootip（提示框）,码迷,mamicode.com