码迷,mamicode.com
首页 > Web开发 > 详细

【锋利的JQuery-学习笔记】Tootip(提示框)

时间:2014-05-01 22:32:47      阅读:493      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   javascript   color   width   2014   http   

效果图:

mamicode.com,码迷

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

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

 

html:

mamicode.com,码迷
                 <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>
mamicode.com,码迷

 

css:

mamicode.com,码迷
/* 最新动态 */
#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;
}
/* 品牌活动 */
mamicode.com,码迷

 

 

js:

mamicode.com,码迷
$(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();
    });

});
mamicode.com,码迷

 

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

【锋利的JQuery-学习笔记】Tootip(提示框)

标签:style   blog   class   code   java   ext   javascript   color   width   2014   http   

原文地址:http://www.cnblogs.com/easy5weikai/p/3703093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!