关于网页报表的两个实用小特效

最新推荐文章于 2026-01-07 15:39:12 发布

原创最新推荐文章于 2026-01-07 15:39:12 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#报表 #function #path #layer #null #ie

HTML学习专栏收录该内容

5 篇文章

订阅专栏

前几天帮朋友弄了这个东西，拿出来大家分享，省的自己去写了。嘿嘿^_^

第一个小特效：

当较长的表格往下看的时候，表头就显示不出来了，这个特效就是，不论你看的是哪个位置的数据，表头始终跟随。还有一个注意的地方，就是当表头显示再可视区域的时候，这个浮动表头隐藏。

var top_div=300;//离顶部的距离

document.write("<div id=/"hasIE_level1/" style=/"background:#999666;display:none;text-align: center; padding:1px 0 1px; border:0 solid #B2D1ED;border-width:1px 0; width:100%; z-index:100;margin-bottom:1px;position: absolute;left:0;/"><table bgcolor=/"EEEFFF/" width=100%><thead bgcolor=/"999666/">");
    document.write("<th>产品ID</th>");
    document.write("<th>产品名称</th>");
    document.write("<th>商品编号</th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=pv/">浏览次数</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=addcart/">购买次数</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.original_price/">定价</a></th> ");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=c.price/">公司价</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=c.discount/">价签折扣</a></th>");

    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=c.stock/">库存</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.price/">收订金额</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.sum/">收订数量</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.saleprice/">出库金额</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.salecost/">出库成本</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.lastnum/">出库数量</a></th>");

    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.price_rtn/">退货金额</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.num_rtn/">退货数量</a></th>");
    document.write("<th><a href=/"/report/daily/product/?cat_path=01&day=2008-07-26&sort=a.gross/">毛利率</a></th>");
    document.write("<th>*</th>");
document.write("</thead></table></div><div style=/"clear:both;height:23px;/"></div>");

function closediv(id) {    
    document.getElementById(id).style.display = 'none';
}

var g_myBodyInstance = document.body;
var g_myBodyInstanceString = "document.body";
if(document.compatMode != "BackCompat"){
    // for looser.dtd
    g_myBodyInstance = document.documentElement;
    g_myBodyInstanceString = "document.documentElement";
}
var isMinNS4 = (navigator.appName.indexOf("Netscape") >= 0 &&
                parseFloat(navigator.appVersion) >= 4) ? 1 : 0;
var isMinNS5 = (navigator.appName.indexOf("Netscape") >= 0 &&
                parseFloat(navigator.appVersion) >= 5) ? 1 : 0;
var isMinIE4 = (document.all) ? 1 : 0;
var isMinIE5 = (isMinIE4 && navigator.appVersion.indexOf("5.") >= 0) ? 1 : 0;
var isMacIE = (isMinIE4 && navigator.userAgent.indexOf("Mac") >= 0) ? 1 : 0;

var getFFVersion=navigator.userAgent.substring(
                    navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=getFFVersion<1.5? 16 : 0;



function getLayer(name) {
  if (isMinNS5)
    return document.getElementById(name);
  else if (isMinIE4)
    return eval('document.all.' + name);
  else if (isMinNS4)
    return findLayer(name, document);

  return null;
}

function findLayer(name, doc) {

  var i, layer;

  for (i = 0; i < doc.layers.length; i++) {
    layer = doc.layers[i];
    if (layer.name == name)
      return layer;
    if (layer.document.layers.length > 0) {
      layer = findLayer(name, layer.document);
      if (layer != null)
        return layer;
    }
  }

  return null;
}

function moveLayerTo(layer, x, y) {
  if (isMinIE4) {
    layer.style.left = x;
    layer.style.top  = y;
  }
  else if (isMinNS5) {
    layer.style.left = x+'px';
    layer.style.top  = y+'px';
  }
  else if (isMinNS4)
    layer.moveTo(x, y);
}

function getPageLeft(layer) {

  if (isMinIE4||isMinNS5)
    return(layer.offsetLeft);
  else if (isMinNS4)
    return(layer.pageX);
  return(-1);
}

function getPageTop(layer) {


  if (isMinIE4||isMinNS5)
    return(layer.offsetTop);
  else if (isMinNS4)
    return(layer.pageY);
  return(-1);
}

function getPageScrollX() {

  if (isMinIE4||isMinNS5)
    return(g_myBodyInstance.scrollLeft);
  else if (isMinNS4)
    return(window.pageXOffset);
  return(-1);
}

function getPageScrollY() {

  if (isMinIE4||isMinNS5)
    return(g_myBodyInstance.scrollTop);
  else if (isMinNS4)
    return(window.pageYOffset);
  return(-1);
}

function getHeight(layer) {

  if (isMinIE4||isMinNS5) {
    if (false && layer.style.pixelHeight)
      return(layer.style.pixelHeight);
    else
      return(layer.clientHeight);
  }
  else if (isMinNS4) {
    if (layer.document.height)
      return(layer.document.height);
    else
      return(layer.clip.bottom - layer.clip.top);
  }
  return(-1);
}

function getWindowHeight() {

  if (isMinIE4||isMinNS5)
    return(g_myBodyInstance.clientHeight);
  else if (isMinNS4)
    return(window.innerHeight);
  return(-1);
}

var g_p_zealNavigatorBar = null;
g_p_zealNavigatorBar = getLayer('hasIE_level1');
g_p_zealNavigatorBar1 = getLayer('hasIE_level2');
if(!isMinIE4){g_p_zealNavigatorBar.style.position = 'fixed';g_p_zealNavigatorBar1.style.position = 'fixed';}
function reposzealNavigatorBar(){
if(getPageScrollY()<top_div)
	closediv('hasIE_level1');
else
  document.getElementById('hasIE_level1').style.display = 'block';
    if(isMinIE4){
        try{
            moveLayerTo(g_p_zealNavigatorBar,
                        getPageLeft(g_p_zealNavigatorBar),
                        getPageScrollY());
        }catch(e){}
    }
}

  把下面的话写在<body>里面，不能写到<head>内，否则就会失效

<script langue="javascript">
window.onresize = reposzealNavigatorBar;
window.onscroll = reposzealNavigatorBar;
window.onload = reposzealNavigatorBar;
</script>

这个方法兼容fireworks和IE，如果谁有更好点的建议，不吝赐教啊。

    2.第二个效果

     鼠标浮动，出现浮动链接

function over(e,obj,a1,b1,c1,d1) {
	var x = getposOffset(obj,"left")+2;
	var y = getposOffset(obj,"top")+24;
	var sHtml=document.getElementById('MYDIV').innerHTML;

	sHtml = sHtml.replace("$link1$", a1);
	sHtml = sHtml.replace("$name1$", b1);
	sHtml = sHtml.replace("$link2$", c1);
	sHtml = sHtml.replace("$name2$", d1);
  	popwin.show(window.event,sHtml,false,x,y);
}

function getposOffset(what, offsettype)
{ 
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; 
    var parentEl=what.offsetParent; 
    while (parentEl!=null)
    { 
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; 
         parentEl=parentEl.offsetParent; 
    } 
    return totaloffset; 
}
function getScrollTop(){
    if(document.documentElement && document.documentElement.scrollTop)
        return document.documentElement.scrollTop;
    else if(document.body)
        return document.body.scrollTop;
        else return 0;
};

function getScrollLeft(){
    if(document.documentElement && document.documentElement.scrollLeft)
        return document.documentElement.scrollLeft;
    else if(document.body)
            return document.body.scrollLeft;
        else return 0;
};

function getClientWidth(){
    if(document.documentElement && document.documentElement.clientWidth)
        return document.documentElement.clientWidth;
    else if(document.body)
            return document.body.clientWidth;
        else return 0;
};

function getClientHeight(){
    if(document.documentElement && document.documentElement.clientHeight)
        return document.documentElement.clientHeight;
    else if(document.body)
            return document.body.clientHeight;
        else return 0;
};

var ie = /msie/ig.test(navigator.userAgent);
var popwinConfig = {
	showDelay:	0,
	hideDelay:	500,
	keepTime:	10000
};
document.write('<div id="popwin" style="position:absolute; padding:0; margin:0;" onmouseover="clearTimeout(window.hideTimeout);clearTimeout(window.keepTimeout)" onmouseout="popwin.hide()"></div>');
var popwin = { 
	shown:	false,
	show:	function (e, sHtml, setPos, left, top, iKeepTime) {
		window.clearTimeout(window.keepTimeout);
		window.clearTimeout(window.hideTimeout);
		window.showTimeout = window.setTimeout(this.display, popwinConfig.showDelay);
		if(iKeepTime > 0)
			popwinConfig.keepTime = iKeepTime;
		window.keepTimeout = window.setTimeout(this.vanish, popwinConfig.keepTime);
		e = e || window.event;
		
		this.setView(sHtml);
		
	    var el = document.getElementById("popwin");
	    if(setPos)
		    this.setPosition(e, el);
        else
            this.setFixPosition(el, left, top);
	},
	
	setView:    function (sHtml) {
		this.shown = true;
	    var el = document.getElementById("popwin");
		el.innerHTML = sHtml;
	},

	hide:	function () {
		window.clearTimeout(window.showTimeout);
		window.clearTimeout(window.keepTimeout);
		window.hideTimeout = window.setTimeout(popwin.vanish, popwinConfig.hideDelay);
		popwin.shown = false;	
	},

	display:	function () {
		var el = document.getElementById("popwin");
		el.style.visibility = "visible";		
	},

	vanish:		function () {
		var el = document.getElementById("popwin");
		el.style.visibility = "hidden";	
	},

	mousemove:	function (e) {
		if (popwin.shown) {
			var el = document.getElementById("popwin");
			//popwin.setPosition(e, el);
		}
	},

	setPosition:	function (e, el) {
		e = e|| window.event;
		var x = e.clientX + 0;
		var y = e.clientY + 0;
		var iWidth = el.firstChild.offsetWidth;
		var iHeight = el.firstChild.offsetHeight;
		var InnerWidth = ie ? getClientWidth() : window.innerWidth;
		var InnerHeight = ie ? getClientHeight() : window.innerHeight;
		var xOffset = ie ? getScrollLeft() : window.pageXOffset;
		var yOffset = ie ? getScrollTop() : window.pageYOffset;
		if (x + iWidth - InnerWidth > 0) {
			x = x - iWidth + xOffset - 30;
			if (x < 0) x = xOffset;
		}
		else 
			x = x + xOffset;
		if (y + iHeight - InnerHeight > -30) {
			y = y - iHeight + yOffset - 30;
			if (y < 0) y = yOffset;
		}
		else
			y = y + yOffset;
		el.style.left = x + "px";
		el.style.top = y + "px";
	},
	
	setFixPosition:	function (el, x, y) {
	if(x==NaN)x=0;
	if(y==NaN)y=0;
		el.style.left = x + "px";
		el.style.top = y + "px";
	}
};

function closepop()
{popwin.hide();}

<body>内  

   
	
    $name1$
    

	
    $name2$

调用方式：