多种流行效果JS代码

最新推荐文章于 2023-02-05 10:34:16 发布

yangtututu

最新推荐文章于 2023-02-05 10:34:16 发布

阅读量1.4k

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript function class border table null

本文链接：https://blog.csdn.net/yangtututu/article/details/1379118

版权

JAVASCRIPT 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

< html >
< meta http-equiv ="Page-Enter" content ="revealTrans(duration=1, transition=23)" >
< meta http-equiv ="Page-Exit" content ="revealTrans(duration=1, transition=23)" >
< head >
</ head >
< title > Mapabc地图无限 </ title >

< body >
< a href ="1.html" >     ###################################################################### </ a >
    ######################################################################
    ######################################################################

    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################

    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################

    ######################################################################
    ######################################################################
    ######################################################################
    ######################################################################    ######################################################################

</ body >
</ html >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > cao888---提示 </ title >
</ head >

< body >
< script language =javascript >
var cao_x,cao_y;

function cao888()
{
this .display = display;
}

function display()
{
  document.write( " <table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button οnclick=document.getElementById('cao1').style.display='block' οnfοcus=this.blur()>CAO留言</button></td></tr></table> " );
  document.write( " <div  id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'> " );
  document.write( " <div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'> " );
  document.write( " <table width=200 height=20 bgcolor=green οnmοusedοwn='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' οnmοuseup='releaseCapture();' οnmοusemοve='caoMove(this.parentNode)' style='cursor:move;'> " );
  document.write( " <tr align=center> " );
  document.write( " <td align=left>提示:CAO888</td> " );
  document.write( " </tr> " );
  document.write( " </table> " );
  document.write( " <span style= cursor:hand οnclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span> " );
  document.write( "   </div> " );
  document.write( " </div> " );
}
function caoMove(obj)   // 实现层的拖移
{
   if (event.button == 1 )
  {
     var caoX = obj.clientLeft;
     var caoY = obj.clientTop;
    obj.style.pixelLeft = caoX + (event.x - cao_x);
    obj.style.pixelTop = caoY + (event.y - cao_y);
  }
}
</ script >
< script language =javascript >
var mycao = new cao888();
mycao.display();
</ script >
</ body >
</ html >

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 模仿as效果的导航菜单 </ title >
< style type ="text/css" >

</ style >
< script type ="text/javascript" >
lastNo = 0
function re(menu_no){
if (lastNo != menu_no){
cur = menu_no + 1
lastNo = menu_no
rest()
} else {
cur = 100
}
document.getElementById( " board " + menu_no).style.visibility = " visible "
}
function rest(){
for (i = 1 ;i <= 4 ;i ++ ){
document.getElementById( " hor " + i).style.top = 20 * i;
document.getElementById( " board " + i).style.visibility = " hidden "
}
menu_num = 4 ;
act = 1
height = 120 + 20
speed = 0 ;
posY = 0 ;
}
function huke(){
if (act == 1 && cur < 100 ){
speed = (height - posY) * 0.69 + speed * 0.6
posY += speed
for (i = cur;i <= menu_num;i ++ ){
document.getElementById( " hor " + i).style.top = posY + (i - 2 ) * 20
}
if (Math.abs(height - posY) < 0.5 ){
for (i = cur;i <= menu_num;i ++ ){
document.getElementById( " hor " + i).style.top = height + (i - 2 ) * 20
}
act = 0
}
setTimeout( " huke() " , 50 )
}
}

</ script >
</ head >
< body >
< div id ="hor1" onclick ="re(1);huke()" > News </ div >
< div id ="hor2" onclick ="re(2);huke()" > Populor </ div >
< div id ="hor3" onclick ="re(3);huke()" > Sports </ div >
< div id ="hor4" onclick ="re(4);huke()" > Woman </ div >
< div id ="board1" > 1.由AS而想起Javascript < br /> 2.用Jscript写ASP有没有先天性的不足？ < br /> 3.没有了。 </ div >
< div id ="board2" > 1.xhtml+css真的来了吗？ < br /> 2.Flash取代传统网站 < br /> 3.Flash何时才能连接数据库？ </ div >
< div id ="board3" > 1.程序员与小姐的10个相同。 < br /> 2.中国的程序员与中国的足球？ </ div >
< div id ="board4" > 1.二十一世纪最缺的是什么?人才 < br />
< a href ="http://www.gamvan.com" target ="_blank" > http://www.gamvan.com </ a >
< a href ="http://www.gamvan.com" target ="_blank" > http://www.gamvan.com </ a ></ div >
</ body >
</ html >

< script >
self.moveTo( 0 , 0 )
self.resizeTo(screen.availWidth,screen.availHeight)
</ script >

< a href ="#" title ="这是提示" > tip </ a >
< script Language ="JavaScript" >
// ***********默认设置定义.*********************
tPopWait = 50 ; // 停留tWait豪秒后显示提示。
tPopShow = 5000 ; // 显示tShow豪秒后关闭提示
showPopStep = 20 ;
popOpacity = 99 ;
// ***************内部变量定义*****************
sPop = null ;
curShow = null ;
tFadeOut = null ;
tFadeIn = null ;
tFadeWaiting = null ;
document.write( " <style type='text/css'id='defaultPopStyle'> " );
document.write( " .cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)} " );
document.write( " </style> " );
document.write( " <div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div> " );

function showPopupText(){
var o = event.srcElement;
MouseX = event.x;
MouseY = event.y;
if (o.alt != null && o.alt != "" ){o.dypop = o.alt;o.alt = "" };
if (o.title != null && o.title != "" ){o.dypop = o.title;o.title = "" };
if (o.dypop != sPop) {
sPop = o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if (sPop == null || sPop == "" ) {
dypopLayer.innerHTML = "" ;
dypopLayer.style.filter = " Alpha() " ;
dypopLayer.filters.Alpha.opacity = 0 ;
}
else {
if (o.dyclass != null ) popStyle = o.dyclass
else popStyle = " cPopText " ;
curShow = setTimeout( " showIt() " ,tPopWait);
}
}
}
function showIt(){
dypopLayer.className = popStyle;
dypopLayer.innerHTML = sPop;
popWidth = dypopLayer.clientWidth;
popHeight = dypopLayer.clientHeight;
if (MouseX + 12 + popWidth > document.body.clientWidth) popLeftAdjust =- popWidth - 24
else popLeftAdjust = 0 ;
if (MouseY + 12 + popHeight > document.body.clientHeight) popTopAdjust =- popHeight - 24
else popTopAdjust = 0 ;
dypopLayer.style.left = MouseX + 12 + document.body.scrollLeft + popLeftAdjust;
dypopLayer.style.top = MouseY + 12 + document.body.scrollTop + popTopAdjust;
dypopLayer.style.filter = " Alpha(Opacity=0) " ;
fadeOut();
}
function fadeOut(){
if (dypopLayer.filters.Alpha.opacity < popOpacity) {
dypopLayer.filters.Alpha.opacity += showPopStep;
tFadeOut = setTimeout( " fadeOut() " , 1 );
}
else {
dypopLayer.filters.Alpha.opacity = popOpacity;
tFadeWaiting = setTimeout( " fadeIn() " ,tPopShow);
}
}
function fadeIn(){
if (dypopLayer.filters.Alpha.opacity > 0 ) {
dypopLayer.filters.Alpha.opacity -= 1 ;
tFadeIn = setTimeout( " fadeIn() " , 1 );
}
}
document.onmouseover = showPopupText;
</ script >

< META NAME ="Description" CONTENT ="" >
</ HEAD >

< BODY >
< script language ="javascript" type ="text/javascript" >

startColor = " #671700 " ; // 定义链接颜色
endColor = " #D8D1C5 " ;   // 定义要渐变到最后的颜色

stepIn = 17 ;
stepOut = 23 ;

/*
定义是否让所有的文本链接自动渐变，true为是，false为否
*/
autoFade = true ;

/*
在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式
*/
sloppyClass = false ;

hexa = new makearray( 16 );
for ( var i = 0 ; i < 10 ; i ++ )
    hexa[i] = i;
hexa[ 10 ] = " a " ; hexa[ 11 ] = " b " ; hexa[ 12 ] = " c " ;
hexa[ 13 ] = " d " ; hexa[ 14 ] = " e " ; hexa[ 15 ] = " f " ;

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray( 3 );
for (i = 1 ; i < 7 ; i ++ ){
   for (j = 0 ; j < 16 ; j ++ ){
    if (Color.charAt(i) == hexa[j]){
     if (i % 2 != 0 )
     colorArr[Math.floor((i - 1 ) / 2 )] = eval(j) * 16 ;
     else
     colorArr[Math.floor((i - 1 ) / 2 )] += eval(j);
   }
  }
}
return colorArr;
}

function domouseover() {
   if (document.all){
    var srcElement = event.srcElement;
    if ((srcElement.tagName == " A " && autoFade) || srcElement.className == " fade " || (sloppyClass && srcElement.className.indexOf( " fade " ) != - 1 ))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);
   }
}

function domouseout() {
   if (document.all){
    var srcElement = event.srcElement;
     if ((srcElement.tagName == " A " && autoFade) || srcElement.className == " fade " || (sloppyClass && srcElement.className.indexOf( " fade " ) != - 1 ))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}

function makearray(n) {
     this .length = n;
     for ( var i = 1 ; i <= n; i ++ )
         this [i] = 0 ;
     return this ;
}

function hex(i) {
     if (i < 0 )
         return " 00 " ;
     else if (i > 255 )
         return " ff " ;
     else
        return "" + hexa[Math.floor(i / 16 )] + hexa[i % 16 ];}

function setColor(r, g, b, element) {
       var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = " # " + hr + hg + hb;
}

function fade(s,e, element,step){
var sr = s[ 0 ]; var sg = s[ 1 ]; var sb = s[ 2 ];
var er = e[ 0 ]; var eg = e[ 1 ]; var eb = e[ 2 ];

if (fadeId[ 0 ] != null && fade[ 0 ] != element){
  setColor(sr,sg,sb,eval(fadeId[ 0 ]));
   var i = 1 ;
   while (i < fadeId.length){
   clearTimeout(fadeId[i]);
   i ++ ;
   }
  }

     for ( var i = 0 ; i <= step; i ++ ) {
     fadeId[i + 1 ] = setTimeout( " setColor(Math.floor( " + sr + " *(( " + step + " - " + i + " )/ " + step + " ) + " + er + " * ( " + i + " / " +
   step + " )),Math.floor( " + sg + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eg + " * ( " + i + " / " + step +
    " )),Math.floor( " + sb + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eb + " * ( " + i + " / " + step + " )), " + element + " ); " ,i * step);
  }
fadeId[ 0 ] = element;
}

</ script >

</ BODY >
</ HTML >
< A HREF ="" > 让你的文本链接渐隐渐显 </ A >

<! doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > JavaScript: showPages v1.0 [by Lapuasi.com] </ title >
< script language ="JavaScript" >

</ script >
< style >
/* Pages Main Tyle */
.pages {
    color : #000000 ;
    cursor : default ;
    font-size : 10px ;
    font-family : Tahoma, Verdana ;
    padding : 3px 0px 3px 0px ;
}
.pages .count, .pages .number, .pages .arrow {
    color : #000000 ;
    font-size : 10px ;
    background-color : #F7F7F7 ;
    border : 1px solid #CCCCCC ;
}
/* Page and PageCount Style */
.pages .count {
    font-weight : bold ;
    border-right : none ;
    padding : 2px 10px 1px 10px ;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
    font-weight : normal ;
    padding : 2px 10px 1px 10px ;
}
.pages .number a, .pages .number span {
    font-size : 10px ;
}
.pages .number span {
    color : #999999 ;
    margin : 0px 3px 0px 3px ;
}
.pages .number a {
    color : #000000 ;
    text-decoration : none ;
}
.pages .number a:hover {
    color : #0000ff ;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
    font-weight : normal ;
    padding : 0px 5px 0px 5px ;
}
.pages .arrow a, .pages .arrow span {
    font-size : 10px ;
    font-family : Webdings ;
}
.pages .arrow span {
    color : #999999 ;
    margin : 0px 5px 0px 5px ;
}
.pages .arrow a {
    color : #000000 ;
    text-decoration : none ;
}
.pages .arrow a:hover {
    color : #0000ff ;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
    color : #000000 ;
    font-size : 10px ;
    font-family : Tahoma, Verdana ;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
    color : #666666 ;
    font-weight : bold ;
    background-color : #F7F7F7 ;
    border : 1px solid #CCCCCC ;
}
.pages .input input.ititle {
    width : 70px ;
    text-align : right ;
    border-right : none ;
}
.pages .input input.itext {
    width : 25px ;
    color : #000000 ;
    text-align : right ;
    border-left : none ;
    border-right : none ;
}
.pages .input input.icount {
    width : 35px ;
    text-align : left ;
    border-left : none ;
}
.pages .input input.ibutton {
    height : 17px ;
    color : #FFFFFF ;
    font-weight : bold ;
    font-family : Verdana ;
    background-color : #999999 ;
    border : 1px solid #666666 ;
    padding : 0px 0px 2px 1px ;
    margin-left : 2px ;
    cursor : hand ;
}

/* body */
body {
    font-size : 12px ;
}
</ style >
</ head >

< body >
< script language ="JavaScript" >

</ script >
</ body >
</ html >

< body bgcolor ="#ff0ddd" >
< div id ="Layer1" style ="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)" >
         < table width ="96%" border ="1" cellpadding ="1" cellspacing ="1" bordercolor ="#FFFFFF" bgcolor ="#999999" >
           < tr >

             < td height ="25" bgcolor ="#f5f5f5" class ="13" > 你也可以在这里插入图片 </ td >
                               </ tr >
                               < tr >

             < td height ="20" bgcolor ="#f5f5f5" class ="12" > 你想注册地图名片吗 </ td >
                               </ tr >
                               < tr >

             < td height ="20" bgcolor ="#f5f5f5" class ="12" > http://mc.mapabc.com </ td >
                               </ tr >
                               < tr >

             < td height ="20" bgcolor ="#f5f5f5" class ="12" > EMAIL:lipeng@mapabc.com </ td >
                               </ tr >
                               < tr >

             < td height ="20" bgcolor ="#f5f5f5" class ="12" > 地址 </ td >
                               </ tr >
                               < tr >

             < td height ="20" bgcolor ="#f5f5f5" class ="12" > 邮编 </ td >
                               </ tr >
                             </ table >
               </ div >

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > CSS Tables </ title >
< link href ="styles.css" rel ="stylesheet" type ="text/css" />
</ head >
< style type ="text/css" >
/* CSS Document */
body {
font : normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color : #4f6b72 ;
background : #E6EAE9 ;
}
a {
color : #c75f3e ;
}
#mytable {
width : 700px ;
padding : 0 ;
margin : 0 ;
}
caption {
padding : 0 0 5px 0 ;
width : 700px ;
font : italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
text-align : right ;
}
th {
font : bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color : #4f6b72 ;
border-right : 1px solid #C1DAD7 ;
border-bottom : 1px solid #C1DAD7 ;
border-top : 1px solid #C1DAD7 ;
letter-spacing : 2px ;
text-transform : uppercase ;
text-align : left ;
padding : 6px 6px 6px 12px ;
background : #CAE8EA url(images/bg_header.jpg) no-repeat ;
}
th.nobg {
border-top : 0 ;
border-left : 0 ;
border-right : 1px solid #C1DAD7 ;
background : none ;
}
td {
border-right : 1px solid #C1DAD7 ;
border-bottom : 1px solid #C1DAD7 ;
background : #fff ;
font-size : 11px ;
padding : 6px 6px 6px 12px ;
color : #4f6b72 ;
}

td.alt {
background : #F5FAFA ;
color : #797268 ;
}
th.spec {
border-left : 1px solid #C1DAD7 ;
border-top : 0 ;
background : #fff url(images/bullet1.gif) no-repeat ;
font : bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
}
th.specalt {
border-left : 1px solid #C1DAD7 ;
border-top : 0 ;
background : #f5fafa url(images/bullet2.gif) no-repeat ;
font : bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif ;
color : #797268 ;
}
/* ---------for IE 5.x bug */
html>body td { font-size : 11px ; }
</ style >
< body >
< table id ="mytable" cellspacing ="0" summary ="The technical specifications of the Apple PowerMac G5 series" >
< caption >   </ caption >
   < tr >
     < th scope ="col" abbr ="Configurations" class ="nobg" > Configurations </ th >
     < th scope ="col" abbr ="Dual 1.8" > Dual 1.8GHz </ th >
     < th scope ="col" abbr ="Dual 2" > Dual 2GHz </ th >
< th scope ="col" abbr ="Dual 2.5" > Dual 2.5GHz </ th >
   </ tr >
   < tr >
     < th scope ="row" abbr ="Model" class ="spec" > lipeng </ th >
     < td > M9454LL/A </ td >
     < td > M9455LL/A </ td >
     < td > M9457LL/A </ td >
   </ tr >
   < tr >
     < th scope ="row" abbr ="G5 Processor" class ="specalt" > mapabc </ th >
     < td class ="alt" > Dual 1.8GHz PowerPC G5 </ td >
     < td class ="alt" > Dual 2GHz PowerPC G5 </ td >
     < td class ="alt" > Dual 2.5GHz PowerPC G5 </ td >
   </ tr >
   < tr >
     < th scope ="row" abbr ="Frontside bus" class ="spec" > 地图名片 </ th >
     < td > 900MHz per processor </ td >
     < td > 1GHz per processor </ td >
     < td > 1.25GHz per processor </ td >
   </ tr >
   < tr >
     < th scope ="row" abbr ="L2 Cache" class ="specalt" > 图秀卡 </ th >
     < td class ="alt" > 512K per processor </ td >
     < td class ="alt" > 512K per processor </ td >
     < td class ="alt" > 512K per processor </ td >
   </ tr >
</ table >
</ body >
</ html >

< html >
< head >
< title > DRAG the DIV </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< style >
* { font-size : 12px }
.dragTable {
font-size : 12px ;
border-top : 1px solid #3366cc ;
margin-bottom : 10px ;
width : 100% ;
background-color : #FFFFFF ;
}
td { vertical-align : top ; }
.dragTR {
cursor : move ;
color : #7787cc ;
background-color : #e5eef9 ;
height : 20px ;
padding-left : 5px ;
font-weight : bold ;
}
#parentTable {
border-collapse : collapse ;
letter-spacing : 25px ;
}
</ style >
< script defer >
/* ***JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9***** */
var Drag = {dragged: false ,
  ao: null ,
  tdiv: null ,
dragStart: function (){
Drag.ao = event.srcElement;
if ((Drag.ao.tagName == " TD " ) || (Drag.ao.tagName == " TR " )){
  Drag.ao = Drag.ao.offsetParent;
  Drag.ao.style.zIndex = 100 ;
} else
   return ;
Drag.dragged = true ;
Drag.tdiv = document.createElement( " div " );
Drag.tdiv.innerHTML = Drag.ao.outerHTML;
Drag.ao.style.border = " 1px dashed red " ;
Drag.tdiv.style.display = " block " ;
Drag.tdiv.style.position = " absolute " ;
Drag.tdiv.style.filter = " alpha(opacity=70) " ;
Drag.tdiv.style.cursor = " move " ;
Drag.tdiv.style.border = " 1px solid #000000 " ;
Drag.tdiv.style.width = Drag.ao.offsetWidth;
Drag.tdiv.style.height = Drag.ao.offsetHeight;
Drag.tdiv.style.top = Drag.getInfo(Drag.ao).top;
Drag.tdiv.style.left = Drag.getInfo(Drag.ao).left;
document.body.appendChild(Drag.tdiv);
Drag.lastX = event.clientX;
Drag.lastY = event.clientY;
Drag.lastLeft = Drag.tdiv.style.left;
Drag.lastTop = Drag.tdiv.style.top;
},
draging: function (){ // 重要:判断MOUSE的位置
if ( ! Drag.dragged || Drag.ao == null ) return ;
var tX = event.clientX;
var tY = event.clientY;
Drag.tdiv.style.left = parseInt(Drag.lastLeft) + tX - Drag.lastX;
Drag.tdiv.style.top = parseInt(Drag.lastTop) + tY - Drag.lastY;
for ( var i = 0 ;i < parentTable.cells.length;i ++ ){
   var parentCell = Drag.getInfo(parentTable.cells[i]);
   if (tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
    var subTables = parentTable.cells[i].getElementsByTagName( " table " );
    if (subTables.length == 0 ){
     if (tX >= parentCell.left && tX <= parentCell.right && tY >= parentCell.top && tY <= parentCell.bottom){
     parentTable.cells[i].appendChild(Drag.ao);
    }
     break ;
   }
    for ( var j = 0 ;j < subTables.length;j ++ ){
     var subTable = Drag.getInfo(subTables[j]);
     if (tX >= subTable.left && tX <= subTable.right && tY >= subTable.top && tY <= subTable.bottom){
     parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
      break ;
    } else {
     parentTable.cells[i].appendChild(Drag.ao);
    }
   }
  }
}
}
,
dragEnd: function (){
if ( ! Drag.dragged) return ;
Drag.dragged = false ;
Drag.mm = Drag.repos( 150 , 15 );
Drag.ao.style.borderWidth = " 0px " ;
Drag.ao.style.borderTop = " 1px solid #3366cc " ;
Drag.tdiv.style.borderWidth = " 0px " ;
Drag.ao.style.zIndex = 1 ;
},
getInfo: function (o){ // 取得坐标
var to = new Object();
to.left = to.right = to.top = to.bottom = 0 ;
var twidth = o.offsetWidth;
var theight = o.offsetHeight;
while (o != document.body){
  to.left += o.offsetLeft;
  to.top += o.offsetTop;
  o = o.offsetParent;
}
  to.right = to.left + twidth;
  to.bottom = to.top + theight;
return to;
},
repos: function (aa,ab){
var f = Drag.tdiv.filters.alpha.opacity;
var tl = parseInt(Drag.getInfo(Drag.tdiv).left);
var tt = parseInt(Drag.getInfo(Drag.tdiv).top);
var kl = (tl - Drag.getInfo(Drag.ao).left) / ab;
var kt = (tt - Drag.getInfo(Drag.ao).top) / ab;
var kf = f / ab;
return setInterval( function (){ if (ab < 1 ){
       clearInterval(Drag.mm);
       Drag.tdiv.removeNode( true );
       Drag.ao = null ;
        return ;
      }
     ab -- ;
     tl -= kl;
     tt -= kt;
     f -= kf;
     Drag.tdiv.style.left = parseInt(tl) + " px " ;
     Drag.tdiv.style.top = parseInt(tt) + " px " ;
     Drag.tdiv.filters.alpha.opacity = f;
    }
,aa / ab)
},
inint: function (){ // 初始化
for ( var i = 0 ;i < parentTable.cells.length;i ++ ){
   var subTables = parentTable.cells[i].getElementsByTagName( " table " );
   for ( var j = 0 ;j < subTables.length;j ++ ){
    if (subTables[j].className != " dragTable " ) break ;
   subTables[j].rows[ 0 ].className = " dragTR " ;
   subTables[j].rows[ 0 ].attachEvent( " onmousedown " ,Drag.dragStart);
  }
}
document.onmousemove = Drag.draging;
document.onmouseup = Drag.dragEnd;
}
// end of Object Drag
}
Drag.inint();
function _show(str){
var w = window.open( '' , '' );
var d = w.document;
d.open();
str = str.replace( /= ( ?! " )(.*?)(?! " )( |> ) / g, " ="$1"$2 " );
str = str.replace( / ( < )(. *? )( > ) / g, " <span style='color:red;'><$2></span><br /> " );
str = str.replace( / / g, " <br /> " );
d.write(str);
}
</ script >
</ head >
< body >
< table border ="0" cellpadding ="0" cellspacing ="10" width ="100%" height =500 id ="parentTable" >
< tr >
< td width ="25%" valgin ="top" >
   < table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td >< b > GMAIL </ b ></ td >
    </ tr >
    < tr >
     < td > 暂时无法显示GMAIL内容 </ td >
    < tr >
   </ table >< table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td > 新浪体育 </ td >
    </ tr >
    < tr >
     < td > 解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 < br /> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭 </ td >
    < tr >
   </ table >
   < table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td > 焦点 </ td >
    </ tr >
    < tr >
     < td > 京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 » 哈马斯已有总理人选
                解放日报报业集团 - 所有 489 相关报道 » 陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 » </ td >
    < tr >
   </ table >
</ td >
< td width ="25%" >
   < table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td > 中关村在线 </ td >
    </ tr >
    < tr >
     < td > 新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </ td >
    < tr >
   </ table ></ td >
< td width ="25%" >
   < table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td > 网易商业 </ td >
    </ tr >
    < tr >
     < td > 上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市 </ td >
    < tr >
   </ table >    < table border =0 class ="dragTable" cellspacing ="0" >
    < tr >
     < td > 黑可天下 </ td >
    </ tr >
    < tr >
     < td > 上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市 </ td >
    < tr >
   </ table >
</ td >
</ tr >
</ table >
< input type ="button" value ="SHOW" onClick ="_show(document.documentElement.innerHTML)" />
</ body >
</ html >

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
< title > MyPixbot </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" >
< script language ="JavaScript" type ="text/JavaScript" >

</ script >
< style type ="text/css" >

</ style >
</ head >
< body >
< div id ="assist" style ="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class ="win" onMouseDown ="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')" >
   < table width ="180" border ="1" cellpadding ="0" cellspacing ="0" >
     < tr >
       < td class ="caption" > SeekAssist </ td >
       < td width ="14" align ="center" >< a href ="#" onclick ="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'" > % </ a ></ td >
       < td width ="14" align ="center" >< a href ="#" onClick ="MM_showHideLayers('assist','','hide')" > X </ a ></ td >
     </ tr >
     < tr id ="assistwin" >
       < td height ="100" colspan ="3" bordercolor ="#eeeeee" >   </ td >
     </ tr >
   </ table >
         < br >
</ div >
< script > loadwin( ' assist ' ) </ script >
< div id ="rank" style ="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class ="win" onMouseDown ="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')" >
   < table width ="180" border ="1" cellpadding ="0" cellspacing ="0" >
     < tr >
       < td class ="caption" > SeekRank </ td >
       < td width ="14" align ="center" >< a href ="#" onclick ="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'" > % </ a ></ td >
       < td width ="14" align ="center" >< a href ="#" onClick ="MM_showHideLayers('assist','','inherit','rank','','hide')" > X </ a ></ td >
     </ tr >
     < tr id ="rankwin" >
       < td height ="100" colspan ="3" bordercolor ="#eeeeee" >   </ td >
     </ tr >
   </ table >
   < br >
</ div >
< script > setTimeout( " loadwin('rank') " , 500 ) </ script >
< div id ="mycolor" style ="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class ="win" onMouseDown ="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')" >
   < table width ="180" border ="1" cellpadding ="0" cellspacing ="0" >
     < tr >
       < td class ="caption" > MyColor </ td >
       < td width ="14" align ="center" >< a href ="#" onclick ="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'" > % </ a ></ td >
       < td width ="14" align ="center" >< a href ="#" onClick ="MM_showHideLayers('mycolor','','hide')" > X </ a ></ td >
     </ tr >
     < tr id ="mycolorwin" >
       < td height ="100" colspan ="3" bordercolor ="#eeeeee" >< table width ="100%" border ="0" cellspacing ="0" cellpadding ="2" >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('#00CCFF','#f6f6f6','#eeeeee')" > Default </ a ></ td >
         </ tr >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('red','#eeccee','#eeddee')" > StyleSheet#1 </ a ></ td >
         </ tr >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('#99ccff','#eeeeee','#ccddff')" > StyleSheet#2 </ a ></ td >
         </ tr >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('#ff9999','#ffffff','#ffeeff')" > StyleSheet#3 </ a ></ td >
         </ tr >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('skyblue','#eeeeee','#99ddff')" > StyleSheet#4 </ a ></ td >
         </ tr >
         < tr >
           < td align ="center" >< a href ="#" onclick ="cs('#009900','#eeffee','#ddffdd')" > StyleSheet#5 </ a ></ td >
         </ tr >
       </ table ></ td >
     </ tr >
   </ table >
   < br >
</ div >
< script > setTimeout( " loadwin('mycolor') " , 1000 ) </ script >
< div id ="results" style ="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class ="win" onMouseDown ="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')" >
   < table width ="570" border ="1" cellpadding ="0" cellspacing ="0" >
     < tr >
       < td >< table width ="100%" border ="0" cellspacing ="0" cellpadding ="0" >
           < tr >
             < td class ="caption" > Results </ td >
             < td width ="12" class ="button" >< a href ="#" onClick ="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'" > % </ a ></ td >
             < td width ="12" class ="button" >< a href ="#" onClick ="MM_showHideLayers('results','','inherit')" > X </ a ></ td >
           </ tr >
       </ table ></ td >
     </ tr >
     < tr >
       < td height ="20" bordercolor ="#eeeeee" >< input name ="url" type ="text" value ="http://www.google.com/search?q=ezlee" size ="100" >
       < a href ="#" onclick ="mainframe.location=url.value" > Search </ a ></ td >
     </ tr >
     < tr id ="resultswin" >
       < td height ="318" valign ="top" class ="navframe" >< aiframe name ="mainframe" id ="mainframe" src ="http://www.google.com/search?q=ezlee" width ="100%" height ="100%" frameborder ="0" scrolling ="auto" >< font color ="#FF0000" > Welcome! </ font ></ aiframe ></ td >
     </ tr >
     < tr >
       < td height ="14" class ="statusbar" > Ready! </ td >
           </ tr >
   </ table >
   < br >
</ div >
< script > setTimeout( " loadwin('results') " , 2000 ) </ script >
</ body >
</ html >

< div style ="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;" >
< font disabled >
怎么样，我凹下去了吧？ < br >
你不想试试吗？ < br >
< a href ="http://www.lenvo.cn/" > www.lenvo.cn </ a ></ font >
</ div >

< style >
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td { font-size : 12px ; font-family : verdana,arial ; font-weight : bolder ; color : #ffffff ; border : 1px solid #336699 ; background : #336699 ; filter : blendtrans(duration=0.5) ; cursor : hand ; text-align : center ; }
</ style >
< script >
/*
http://lexrus.blueidea.com
这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
var tds = objid.getElementsByTagName( ' td ' );
for ( var i = 0 ;i < tds.length;i ++ ){
   with (tds[i]){
   onmouseover = function (){
     with ( this ){
     filters[ 0 ].apply();
     style.background = ' #66CCFF ' ; // 这是鼠标移上去时的背景颜色
     style.border = ' 1px solid #ffffff ' ; // 边框
     style.color = ' black ' ; // 文字颜色
     filters[ 0 ].play();
    }
   }
   onmouseout = function (){
     with ( this ){
     filters[ 0 ].apply();
     style.background = ' #336699 ' ; // 这是鼠标离开时的背景颜色
     style.border = ' 1px solid #336699 ' ; // 边框
     style.color = ' #ffffff ' ; // 文字颜色
     filters[ 0 ].play();
    }
   }
  }
}
}
</ script >

< table class ="xmenu" id ="xmenu0" width ="500" cellpadding ="1" cellspacing ="4" border ="0" bgcolor ="#336699" align ="center" >
< tr >
   < td >< a href ="http://www.lenvo.cn/" > www.lenvo.cn </ a ></ td >
   < td > Name </ td >
   < td > Is </ td >
   < td > LeX </ td >
   < td > Rus </ td >
   < td > !!! </ td >
</ tr >
</ table >
< script > attachXMenu(xmenu0); // 在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
< br >< br >< br >< br >

< table class = " xmenu " id = " xmenu1 " width = " 100 " cellpadding = " 1 " cellspacing = " 4 " border = " 0 " bgcolor = " #336699 " align = " center " >
< tr >< td > My </ td ></ tr >
< tr >< td > Name </ td ></ tr >
< tr >< td > Is </ td ></ tr >
< tr >< td > LeX </ td ></ tr >
< tr >< td > Rus </ td ></ tr >
< tr >< td >!!!</ td ></ tr >
</ table >
< script > attachXMenu(xmenu1); </ script >

,
<script type="text/javascript"> google_ad_client = "pub-8527320164371593"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //2006-11-09: asp.net google_ad_channel = "8786117784"; google_language = 'en'; </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

yangtututu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多种流行效果JS代码

html>meta http-equiv="Page-Enter" content="revealTrans(duration=1, transition=23)">meta http-equiv="Page-Exit" content="revealTrans(duration=1, transition=23)">head>head>title>Mapabc地图无限title>body >
复制链接

扫一扫

专栏目录