您的位置:首页 > Web前端 > JavaScript

仲夏夜--js特效--左右内容的选择

2009-12-29 22:16 417 查看
<style>
<!--
BODY{FONT-FAMILY: 宋体; FONT-SIZE: 12.6px;
SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
SCROLLBAR-SHADOW-COLOR: buttonface;
SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
SCROLLBAR-TRACK-COLOR: #eeeeee;
SCROLLBAR-DARKSHADOW-COLOR: buttonshadow}
td,form,select {FONT-SIZE: 12px; LINE-HEIGHT: 20px}
input {FONT-SIZE: 12px; BORDER: #000000 1px solid;height: 18px; BACKGROUND-color: #f7f7ff; COLOR: #000000;}
.small {FONT-SIZE: 1px; LINE-HEIGHT: 1px}
.mid {FONT-SIZE: 12px;LINE-HEIGHT: 20px}
A:active {COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
A:link {COLOR: #000000; TEXT-DECORATION: none}
A:visited {COLOR: #000000; TEXT-DECORATION: none}
-->
</style>
 
<html>
<head>
<title>仲夏夜--js特效--左右内容的选择</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="css/the9.css"
rel=stylesheet type=text/css>
<style type="text/css">
<!--
.zf {  border: #999999; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
<script src="ad.js"></script>
</head>
<body bgcolor=#FFFFFF>

<div align="center" >
****************
    <tr>
      **********
    </tr>
  </table>
  <table width="770" border="0" cellspacing="0" cellpadding="0" class="zf1">
    <tr>
      ***********
      ************
      *************
          <tr>
**************
 <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function addbookmark()
{
bookmarkurl="http://5icat.net.ru"
bookmarktitle="欢迎光临仲夏夜"
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
//  End -->
</script>
***************</div></td>
          </tr>
          <tr>
            <td height="15"><div align="center"><img src="images/little2.gif" width="9" height="9">
 <span  onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://5icat.net.ru');"  style="CURSOR: hand"> 设为首页</a></span></div></td>
          </tr>
          <tr>
            <td><div align="center"><img src="images/little3.gif" width="9" height="9"><script src="../mail.js"></script></div></td>
          </tr>
        </table></td>
    </tr>
  </table>
   <table width="770" border="0" cellspacing="0" cellpadding="0" class="zf1">
    <tr>
      <td  height="20"><table width="768" height="19" border="0" align="center" cellpadding="0" cellspacing="0" background="images/menubg.gif">   
          <script src="js.js"></script>
        </table></td>
    </tr>
  </table>
  <table width="770" border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC"class="zf1">
    <tr>
      <td class="zf3"><script language="JavaScript">
<!--
var enabled = 0; today = new Date();
var day; var date;
if(today.getDay()==0) day = "星期日"
if(today.getDay()==1) day = "星期一"
if(today.getDay()==2) day = "星期二"
if(today.getDay()==3) day = "星期三"
if(today.getDay()==4) day = "星期四"
if(today.getDay()==5) day = "星期五"
if(today.getDay()==6) day = "星期六"
date = "" + (today.getYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日  " + day +"";
document.write("<font color=black>" + date + "</font>");
-->
</script></td><td align=right>****************</td>
    </tr>
  </table>
<!--<IFRAME width=770 height=60 style="backgroundcolor: #CCCCCC" marginwidth="0" marginheight="0"  frameborder="0" scrolling="NO"   src="ad_top.htm"></IFRAME> -->
  <table width="770" border="0" cellspacing="0" cellpadding="0" >
    <tr>
      <td height="2"></td>
    </tr>
  </table>
  <table width="770" border="0" cellspacing="10" cellpadding="0" bgcolor="#CCCCCC">
    <tr>
      <td bgcolor="#FFFFFF" height="501" valign="top">
        <div align="center"> <br>
         
         
 <table width="700" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="200"> </td>
              <td>
                <table width="300" border="1" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                    <td bgcolor="#CCCCCC" height="20" width="15"> </td>
                    <td bgcolor="#999999" height="20" width="260">
     
                      <div align="center"><font color="#FFFFFF" size="3">左右内容的选择</font></div>
                    </td>
                    <td bgcolor="#CCCCCC" height="20" width="17"> </td>
                  </tr>
                </table>
              </td>
              <td width="10"><a href="UserCollect.asp?action=add&id=1581" target="Collect">****************</a></td>
            </tr>
          </table>
          <br>
          <fieldset style="width:500;height:50"><legend>效果显示区</legend>
        
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Compare two options within a list by VALUES

function compareOptionValues(a, b)

{

  // Radix 10: for numeric values

  // Radix 36: for alphanumeric values

  var sA = parseInt( a.value, 36 ); 

  var sB = parseInt( b.value, 36 ); 

  return sA - sB;

}

 

// Compare two options within a list by TEXT

function compareOptionText(a, b)

{

  // Radix 10: for numeric values

  // Radix 36: for alphanumeric values

  var sA = parseInt( a.text, 36 ); 

  var sB = parseInt( b.text, 36 ); 

  return sA - sB;

}

 

// Dual list move function

function moveDualList( srcList, destList, moveAll )

{

  // Do nothing if nothing is selected

  if (  ( srcList.selectedIndex == -1 ) && ( moveAll == false )   )

  {

    return;

  }

 

  newDestList = new Array( destList.options.length );

 

  var len = 0;

 

  for( len = 0; len < destList.options.length; len++ )

  {

    if ( destList.options[ len ] != null )

    {

      newDestList[ len ] = new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

    }

  }

 

  for( var i = 0; i < srcList.options.length; i++ )

  { <
dc0d
/span>

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Statements to perform if option is selected

 

       // Incorporate into new list

       newDestList[ len ] = new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

       len++;

    }

  }

 

  // Sort out the new destination list

  newDestList.sort( compareOptionValues );   // BY VALUES

  //newDestList.sort( compareOptionText );   // BY TEXT

 

  // Populate the destination with the items from the new array

  for ( var j = 0; j < newDestList.length; j++ )

  {

    if ( newDestList[ j ] != null )

    {

      destList.options[ j ] = newDestList[ j ];

    }

  }

 

  // Erase source list selected elements

  for( var i = srcList.options.length - 1; i >= 0; i-- )

  {

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Erase Source

       //srcList.options[i].value = "";

       //srcList.options[i].text  = "";

       srcList.options[i]       = null;

    }

  }

 

} // End of moveDualList()

//  End -->

</script>
<form ACTION="" METHOD="POST" name="myForm">

<table border="0">

<tr>

  <td>

    <!-- Multiple Select List with 20 rows size and 70 pixels wide -->

    <!-- Using   for SPACING and alignment -->

    <select multiple size="20" style="width:70" name="listLeft">

      <option value="10">      10 </option>

      <option value="20">      20 </option>

      <option value="30">      30 </option>

      <option value="40">      40 </option>

      <option value="50">      50 </option>

      <option value="A" >       A  </option>

      <option value="B" >       B  </option>

      <option value="F" >       F  </option>

      <option value="X" >       X  </option>

    </select>

  </td>

  <td><NOBR>  

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, false )" 

    name="Add     >>"  value="Add       >>">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  false )" 

    name="Add     <<"  value="Add       <<">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, true  )" 

    name="Add All >>"  value="Add All >>">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  true  )" 

    name="Add All <<"  value="Add All <<">     <BR>

    </NOBR>

  </td>

  <td>

    <select multiple size="20" style="width:70" name="listRight">

      <option value="01">       1  </option>

      <option value="02">       2  </option>

      <option value="03">       3  </option>

      <option value="04">       4  </option>

      <option value="05">       5  </option>

      <option value="D" >       D  </option>

      <option value="G" >       G  </option>

      <option value="K" >       K  </option>

      <option value="Z" >       Z  </option>

      <option value="55">           55  </option>

    </select>

  </td>

</tr>

</table>

</form>
</fieldset>

<br><br><br>
          <table width="500" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <table width="500" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td bgcolor="#CCCCCC" width="15" height="16"> </td>
                    <td width="96" bgcolor="#000000" height="16">
                      <div align="center"><font color="#FFFFFF">脚本说明:</font></div>
                    </td>
                    <td width="389" height="16"> </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="zf">
                <textarea name="textfield" cols="80" rows="10" class="textfield">脚本说明:
 
把如下代码加入<body>区域中
 <SCRIPT LANGUAGE="JavaScript">
<!-- Begin

// Compare two options within a list by VALUES

function compareOptionValues(a, b)

{

  // Radix 10: for numeric values深圳翻译公司

  // Radix 36: for alphanumeric values

  var sA = parseInt( a.value, 36 ); 

  var sB = parseInt( b.value, 36 ); 

  return sA - sB;

}

 

// Compare two options within a list by TEXT

function compareOptionText(a, b)

{

  // Radix 10: for numeric values

  // Radix 36: for alphanumeric values上海翻译公司

  var sA = parseInt( a.text, 36 ); 

  var sB = parseInt( b.text, 36 ); 

  return sA - sB;

}

 

// Dual list move function

function moveDualList( srcList, destList, moveAll )

{

  // Do nothing if nothing is selected

  if (  ( srcList.selectedIndex == -1 ) && ( moveAll == false )   )

  {

    return;

  }

 

  newDestList = new Array( destList.options.length );

 

  var len = 0;

 

  for( len = 0; len < destList.options.length; len++ )

  {

    if ( destList.options[ len ] != null )

    {

      newDestList[ len ] = new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

    }

  }

 

  for( var i = 0; i < srcList.options.length; i++ )

  {

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Statements to perform if option is selected北京翻译公司

 

       // Incorporate into new list

       newDestList[ len ] = new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

       len++;

    }

  }

 

  // Sort out the new destination list

  newDestList.sort( compareOptionValues );   // BY VALUES

  //newDestList.sort( compareOptionText );   // BY TEXT翻译公司

 

  // Populate the destination with the items from the new array

  for ( var j = 0; j < newDestList.length; j++ )

  {

    if ( newDestList[ j ] != null )

    {

      destList.options[ j ] = newDestList[ j ];

    }

  }

 

  // Erase source list selected elements

  for( var i = srcList.options.length - 1; i >= 0; i-- )

  {

    if ( srcList.options[i] != null && ( srcList.options[i].selected == true || moveAll ) )

    {

       // Erase Source

       //srcList.options[i].value = "";

       //srcList.options[i].text  = "";

       srcList.options[i]       = null;

    }

  }

 

} // End of moveDualList()

//  End -->

</script>
<form ACTION="" METHOD="POST" name="myForm">

<table border="0">

<tr>

  <td>

    <!-- Multiple Select List with 20 rows size and 70 pixels wide -->

    <!-- Using   for SPACING and alignment -->

    <select multiple size="20" style="width:70" name="listLeft">

      <option value="10">      10 </option>

      <option value="20">      20 </option>

      <option value="30">      30 </option>

      <option value="40">      40 </option>

      <option value="50">      50 </option>

      <option value="A" >       A  </option>

      <option value="B" >       B  </option>

      <option value="F" >       F  </option>

      <option value="X" >       X  </option>

    </select>

  </td>

  <td><NOBR>  

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, false )" 

    name="Add     >>"  value="Add       >>">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  false )" 

    name="Add     <<"  value="Add       <<">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listLeft,  this.form.listRight, true  )" 

    name="Add All >>"  value="Add All >>">     <BR>

 

    <NOBR>      

    <input type="button" style="width:90" onclick="moveDualList( this.form.listRight, this.form.listLeft,  true  )" 

    name="Add All <<"  value="Add All <<">     <BR>

    </NOBR>

  </td>

  <td>

    <select multiple size="20" style="width:70" name="listRight">

      <option value="01">       1  </option>

      <option value="02">       2  </option>

      <option value="03">       3  </option>

      <option value="04">       4  </option>

      <option value="05">       5  </option>

      <option value="D" >       D  </option>

      <option value="G" >       G  </option>

      <option value="K" >       K  </option>

      <option value="Z" >       Z  </option>

      <option value="55">           55  </option>

    </select>

  </td>

</tr>

</table>

</form>

 

 

</textarea>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
  <hr width="770">
   <table width="770" border="0" cellspacing="0" cellpadding="0" height="21">
    <tr>
      <td bgcolor="#CCCCCC" valign="middle">
        <div align="center"><script language=javascript src=buttom.js></script></div>
      </td>
    </tr>
    <tr>
      <td>
        <div align="center"></div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息