列表瘦身&提示效果

 

<SCRIPT src="tooltip.js" type=text/jscript></SCRIPT>
<SCRIPT src="jQuery.js" type=text/jscript></SCRIPT>

 

<SCRIPT type=text/javascript>

$.fn.StringCut=function(len){

$(this).each(function(){

 var allText = $(this).html();
 var childText = $(this).children().html();
 /* var viewText_pre = allText.substring(0,3); */
 /* var viewText_aft = allText.substring(3,allText.lenght); */
 /* var viewText = viewText_pre + " οnmοuseοver=\"tooltip.show('" + childText +  "');\" οnmοuseοut=\"tooltip.hide();\" " + viewText_aft; */
 $(this).children().attr("name",childText);

 var showText = $(this).html();
 if(childText.length>len)
 {
  childText = childText.substring(0,len)+ "...";
 }

 $(this).children().html(childText);
 /* $(this).html(viewText); */

});
 
 $(this).children().mouseover(function(){
 /* var showText = $(this).html(); */
 var showText = $(this).attr("name");
 tooltip.show(showText);
 });

 $(this).children().mouseout(function(){
 tooltip.hide();
 });
 

}

$(document).ready(function() { 

 
 var newsText = $('.mainContent table').find('.new_arrowimage').parent().parent().next();
  
 newsText.StringCut(30);
 

});

</SCRIPT>

 

 

tooltip.js

var tooltip=function(){
//debugger;
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 200;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h,length;
 var ie = document.all ? true : false;

 return{
  show:function(v,w){
  //debugger;
   if(tt == null){
   //debugger;
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmouseover = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
    length = tt.offsetWidth;
   }
   
   if(tt.offsetWidth > maxw)
   {
   tt.style.width = maxw + 'px';
   length = maxw;
   
   }
   h = parseInt(tt.offsetHeight) + top;
   
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   var browserlength = document.documentElement.clientWidth;
   var browserheight =  document.documentElement.clientHeight;
   var diff = browserlength - (l + maxw);
   var diffheight = browserheight - u;
   if(diffheight > (h + top))
   tt.style.top= (u + top) + 'px';
   else
   tt.style.top = (u - h) + 'px';
   if(diff > left)
   tt.style.left = (l + left) + 'px';
   else
   {
   tt.style.left = (l + left - length) + 'px';
   }

  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
    if(endalpha - a < speed && d == 1){
     i = endalpha - a;
    }else if(alpha < speed && d == -1){
     i = a;
    }
    alpha = a + (i * d);
    tt.style.opacity = alpha * .01;
    tt.style.filter = 'alpha(opacity=' + alpha + ')';
   }else{
    clearInterval(tt.timer);
    if(d == -1){tt.style.display = 'none'}
   }
  },
  hide:function(){
   clearInterval(tt.timer);
   //tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
   tt.style.display = 'none'
  }
 };
}();

 

===============================

最近更新：灵活定义列表项长度

 

 

 

-->-->