前几天帮朋友弄了这个东西,拿出来大家分享,省的自己去写了。嘿嘿^_^
第一个小特效:
当较长的表格往下看的时候,表头就显示不出来了,这个特效就是,不论你看的是哪个位置的数据,表头始终跟随。还有一个注意的地方,就是当表头显示再可视区域的时候,这个浮动表头隐藏。
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;" οnmοuseοver="clearTimeout(window.hideTimeout);clearTimeout(window.keepTimeout)" οnmοuseοut="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>内调用方式:
1103