首页 > 代码库 > 【锋利的JQuery-学习笔记】Tootip（提示框）

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

2024-07-02 10:11:12   228人阅读

效果图：

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();
    });

});

 


联系
我们