zoukankan      html  css  js  c++  java
  • 图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果

    $(function(){
    var x;
    var y = 38;
    $(".classTab td:parent").live('mouseover',function(e){
     this.myTitle = this.title;
     this.title = "";
     var popHtml ='<div class="tishiBox"><span class="spanL"><\/span><span class="spanR"><\/span><p>'+this.myTitle+'<\/p><em><\/em><\/div>';
     $("body").append(popHtml);
     //alert(e.pageX)
     x = $(".tishiBox").width()-10;
     $(".tishiBox").css({
      left:(e.pageX - x) + "px",
      top:(e.pageY - y) + "px"
      }).show()
     }).live('mouseout',function(){
      this.title = this.myTitle;
      $(".tishiBox").remove();
      }).live("mousemove",function(e){
       x = $(".tishiBox").width()-10;
       $(".tishiBox").css({
       left:(e.pageX - x) + "px",
       top:(e.pageY - y) + "px"
       })  
       })
     
    })

    CSS样式:

    .tishiBox,.tishiBox span,.tishiBox em{ position:absolute;display:inline-block; background:url(../images/tishiBg2.png);}
    .tishiBox{left:100px;height:36px; position: absolute; white-space:nowrap;background-position:-10px 0;}
    .tishiBox span{ position:absolute;display:inline-block; background:url(../images/tishiBg.png)}
    .tishiBox span.spanL,.tishiBox span.spanR{10px;height:36px;top:0;}
    .tishiBox span.spanL{ background-position:0 0;left:-10px;}
    .tishiBox span.spanR{ background-position:right 0;right:-10px;}
    .tishiBox p{padding:0 10px;line-height:30px;color:#e70909;}
    .tishiBox em{10px;height:10px; position:absolute; background-position:-277px -25px;right:10px;top:25px;}

  • 相关阅读:
    抽象类
    类初始化
    final关键字
    super关键字
    继承
    常用类

    封装
    方法重载
    031:Cetus sharding
  • 原文地址:https://www.cnblogs.com/dearxinli/p/2766154.html
Copyright © 2011-2022 走看看