收集的JavaScript效果---酷

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 收集的JavaScript效果---酷

发布于2006-03-10 19:59 来源：blueidea

五接收键盘指令的脚本

以下代码片段：

<SCRIPT language="JavaScript">

</SCRIPT>

onkeydown="javascript:onenter();"

function onenter(){
if(event.keyCode==13){
alert("回车");
}
}

六让你的文本链接渐隐渐显

以下代码片段：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<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>

七类似与QQ的好友/黑名单之类的树型菜单_极品

以下代码片段：

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I'm too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
actuator.onclick = function() {
      var display = menu.style.display;
      this.parentNode.style.backgroundImage =
         (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
      menu.style.display = (display == "block") ? "none" : "block";

      return false;
}
}
window.onload = function() {
         initializeMenu("productsMenu", "productsActuator");
         initializeMenu("newPhonesMenu", "newPhonesActuator");
         initializeMenu("compareMenu", "compareActuator");
      }
</script>
<style>
body {
  font-family: verdana, helvetica, arial, sans-serif;
}

#mainMenu {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  width: 203px;
}

#menuList {
  margin: 0px;
  padding: 10px 0px 10px 15px;
}

li.menubar {
  background: url(/images/plus.gif) no-repeat 0em 0.3em;
  font-size: 12px;
  line-height: 1.5em;
  list-style: none outside;
}

.menu, .submenu {
  display: none;
  margin-left: 15px;
  padding: 0px;
}

.menu li, .submenu li {
  background: url(/images/square.gif) no-repeat 0em 0.3em;
  list-style: none outside;
}

a.actuator {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}

a.actuator:hover {
  text-decoration: underline;
}

.menu li a, .submenu li a {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}

.menu li a:hover, submenu li a:hover {
  /*border-bottom: 1px dashed #000;*/
  text-decoration: underline;
}

span.key {
  text-decoration: underline;
}
</style>
</head>
<body>
<div id="mainMenu">
   <ul id="menuList">
      <li class="menubar">
      <a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
      <ul id="productsMenu" class="menu">
         <li>
            <a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
            <ul id="newPhonesMenu" class="submenu">
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
            </ul>
         </li>
         <li>
            <a href="#" id="compareActuator" class="actuator">陌生人</a>
            <ul id="compareMenu" class="submenu">
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">张三[10000001]</a></li>
            <li><a href="http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001">李四[10000002]</a></li>
            </ul>
         </li>
      </ul>
      </li>
   </ul>
</div>
  </body>
</BODY>
</HTML>

中查找“收集的JavaScript效果---酷”更多相关内容

中查找“收集的JavaScript效果---酷”更多相关内容

上一篇：利用搜索引擎引用来高亮页面关键字
下一篇：收集的JavaScript效果---酷[1]