我的书签
添加书签
移除书签
附 2 DHTML 小 技 巧
二 
动 态 加 亮 的 按 钮
原 文 请 参 考 http://www.insideDHTML.COM
原 文 作 者 Scott Isaacs
这
里 的 程 序 可 以 实 现 这 样 一 个 功 能 使 一 个 按 钮 具 有 动 态
效 果 当 鼠 标移 动 到 按 钮 上 的 时 候 按 钮 的 颜 色 会 变 化 按 下
按 钮 按 钮 上 的 文 字 就 会 改变
Demo
(仅适用于 IE4)
CODE
(javascript IE4)
定义
STYLE
<STYLE TYPE="text/css">
.over {color:yellow; background: navy}
.down {color:yellow; background: navy; font-style: italic}
</STYLE>
Javascript:
INPUT TYPE="Button" ONMOUSEOVER="this.className='over';" ONMOUSEOUT="this.className='';"
ONMOUSEDOWN="this.className='down';" ONMOUSEUP="this.className='over';" VALUE="Click Me" ONCLICK="this.value='Ouch - You Clicked Me!'">
附 3 DHTML 小 技 巧
三 
HTML Tooltips
原 文 请 参 考 http://www.insideDHTML.COM
原 文 作 者 Scott Isaacs
这 里 的
程 序 可 以 实 现 这 样 一 个 功 能 使 你 页 面 上 的 动 态 浮 动 提 示
具 有
HTML
的 效 果 如 颜 色 字 体 等 等
Demo
(适用于 IE4 NC4)
飞鸟之家
CODE
(javascript IE4)
<SCRIPT language=javascript>
<!--
/* Your are permitted to reuse this code as long as the following copyright notice is not removed:
This HTML tip handling is copyright 1998 by insideDHTML.com, LLC. More information about this code can be found at Inside Dynamic HTML: HTTP: //www.insideDHTML.com
*/
// Support for all collection
var allSupport = document.all!=null
function setupEventObject(e) {
// Map NS event object to IEs if (e==null) return // IE returns window.event = e
window.event.fromElement = e.target window.event.toElement = e.target window.event.srcElement = e.target window.event.x = e.x window.event.y = e.y
// Route the event to the original element
// Necessary to make sure _tip is set. window.event.srcElement.handleEvent(e);
}
function checkName(src) {
// Look for tooltip in IE
while ((src!=null) && (src._tip==null)) src = src.parentElement
return src
}
function getElement(elName) {
// Get an element from its ID if (allSupport)
return document.all[elName] else
return document.layers[elName]
}
function writeContents(el, tip) {
// Replace the contents of the tooltip if (allSupport)
el.innerHTML = tip else {
// In NS, insert a table to work around
// stylesheet rendering bug.
// NS fails to apply style sheets when writing
// contents into a positioned element. el.document.open()
el.document.write("<TABLE WIDTH=200 BORDER=1 bordercolor=black> <TR> <TD WIDTH=100% BGCOLOR=yellow>")
el.document.write(tip) el.document.write("</TD></TR></TABLE>")
el.document.close()
}
}
function getOffset(el, which) {
// Function for IE to calculate position
// of an element.
var amount = el["offset"+which] if (which=="Top") amount+=el.offsetHeight
el = el.offsetParent while (el!=null) {
amount+=el["offset"+which] el = el.offsetParent
}
return amount
}
function setPosition(el) {
// Set the position of an element src = window.event.srcElement if (allSupport) {
el.style.pixelTop = getOffset(src, "Top") el.style.pixelLeft = getOffset(src, "Left")
} else
{
el.top = src.y + 20 //window.event.y + 15 el.left = src.x //window.event.x
}
}
function setVisibility(el, bDisplay) {
// Hide or show to tip if (bDisplay)
if (allSupport) el.style.visibility = "visible" else
el.visibility = "show"; else
if (allSupport) el.style.visibility = "hidden" else
el.visibility = "hidden"
}
function displayContents(tip) {
// Display the tooltip.
var el = getElement("tipBox") writeContents(el, tip)
setPosition(el) setVisibility(el, true)
}
function doMouseOver(e) {
// Mouse moves over an element setupEventObject(e)
var el, tip
if ((el = checkName(window.event.srcElement))!=null) if (!el._display) {
displayContents(el._tip) el._display = true
}
}
function doMouseOut(e) {
// Mouse leaves an element setupEventObject(e)
el = checkName(window.event.srcElement) var el, tip
if ((el = checkName(window.event.srcElement))!=null) if (el._display)
if ((el.contains==null) || (!el.contains(window.event.toElement))
)
{
setVisibility(getElement("tipBox"), false) el._display = false
}
}
function doLoad() {
// Do Loading
if ((window.document.captureEvents==null) && (!allSupport)) return // Not IE4 or NS4
if (window.document.captureEvents!=null) // NS - capture events window.document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT) window.document.onmouseover = doMouseOver; window.document.onmouseout = doMouseOut;
}
window.onload = doLoad
// -->
</SCRIPT>
<STYLE>
<!--
#tipBox {position: absolute; width: 150px; z-index: 100;border: 1pt black solid; background: yellow; visibility: hidden}
-->
</STYLE>
<A HREF="http://flybird-home.yeah.net" ONMOUSEOVER="this._tip='Hi <FONT COLOR=red>
<B>飞鸟之家</B></FONT>
已经有 DHTML 的东东拉'"> 飞鸟之家
</A>
在<body>和</body>之间合适的位置上加上
<div ID="tipBox"></div>
附 4 DHTML 小 技 巧四
输入域自动移动
原 文 请
参 考 http://www.insideDHTML.COM
| 这 |
里 |
的 |
程 |
序 可 以 实 现 这 样 一 |
个 |
功 |
能 |
使 |
你 |
页 |
面 |
上 |
的 |
Form |
输 |
入 |
域 |
当 |
满 |
了 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
长 |
度 后 | 自 | 动 | 下 |
移 |
Demo
(适用于 IE4 NC4) City (5 char) : State(2 char):
Name (10 char) : Tel (8 char) :
CODE
(javascript IE4 NC4) JavaScript 1.2 脚本
<script LANGUAGE="JavaScript1.2">
//确定浏览器
ns4 = (document.layers) ie4 = (document.all)
if (ns4) // Netscape requires manually capturing the event document.captureEvents(Event.KEYPRESS);
document.onkeypress = checkLength;
//checkLength 处理按键事件
function checkLength(e){ if (ns4){ // In Netscape
var key = e.which var el = e.target;
var str = String(e.target);
// Extract the INPUT element tag and decompose it str = str.toLowerCase();
if (str.indexOf('input') != -1){ el.tagName = "INPUT"
}
else{
return;
}
// Input tag found, extract maxlength attribute
str = str.slice(str.indexOf('maxlength'), str.indexOf('maxlength')+14); str = str.slice(str.indexOf('=')+1, str.indexOf('=')+6);
// Store it on the element - thereby making it look the same as in IE el.maxLength = parseInt(str);
if (el.maxLength == -1){ el.maxLength = 2147483647;
}
}
else{
// Internet Explorer is easy - Just grab the element
// The tagName and the maxLength are built-in properties var key = 0;
var el = event.srcElement;
}
if (el.tagName=="INPUT" && key != 8){
// Check if the user hit the maximum length if (el.value.length+1>=el.maxLength){
var i;
// Find the next control on the form. for(i=0; i < el.form.elements.length; i++){
if (el==el.form.elements[i]){ break;
}
}
if (i != (el.form.elements.length-1)){ el.form.elements[i+1].focus();
}
else {
// Go to the first control if at the last control i=0;
el.form.elements[i].focus();
}
}
}
}
</script>
HTML 写输入域 MAXLENGTH 表示输入域最大长度
<form>
City (5 char) : <input MAXLENGTH="5" TYPE="text"
NAME="city" size="9"> State(2 char): <input TYPE="text" MAXLENGTH="2" NAME="state" size="5">
Name (10 char) : <input MAXLENGTH="10" NAME="NAME" TYPE="text" NAME="city1"
size="9"> Tel (8 char :<input TYPE="text" NAME="Tel" MAXLENGTH="8" NAME="state1" size="8">
</form>
附 5 DHTML 小 技 巧五
鼠标轨迹
原 文 请 参 考 http://www.insideDHTML.COM
这
里 的 程 序 可 以 实 现 这 样 一 个 功 能 使 你 页 面 上 的 鼠 标 带
轨 迹 很 酷的 效 果
Demo
(适用于 IE4 NC4)
请在本页面上移动鼠标
CODE
(javascript IE4 NC4)
<script language="Javascript1.2">
var isNS = (navigator.appName == "Netscape"); layerRef = (isNS) ? "document" : "document.all"; styleRef = (isNS) ? "" : ".style";
var queue = new Array();
var NUM_OF_TRAIL_PARTS = 5
for (x=1; x < 6; x++) { ///////////////Image Preload eval("trailSpriteFrame" + x + " = new Image(28,36);"); eval("trailSpriteFrame" + x + ".src = 'images/trailgif" + x + ".gif';");
}
////////////////////////////////////////////////The trail Object function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID; //as before
this.imgRef = "trailSprite" + anID + "img"; //reference to the sprites image name this.currentFrame = 1; //the varible for looking after the frame this.animateTrailSprite = animateTrailSprite; //declare the objects method cycle
}
function animateTrailSprite() {
if (this.currentFrame <6 ) { //if there are animation frames left, the change sprites the
current frame switch
if (isNS) { //Detect the browser and perform coresponding image eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src =
trailSpriteFrame" + this.currentFrame + ".src");
} else {
eval("document['" + this.imgRef + "'].src = trailSpriteFrame" +
this.currentFrame + ".src");
}
this.currentFrame ++; //and increase the objects current frame
} else { //the current frame has reached its limit so hide the sprite eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility = "hidden"');
}
}
/////////////////////////////////////////////////////////////////
function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}
function processMouse(e) { currentObj = shuffleQueue(); if (isNS) {
eval("document." + currentObj + ".left = e.pageX - 10 ;"); eval("document." + currentObj + ".top = e.pageY + 10;");
} else {
eval("document.all." + currentObj + ".style.pixelLeft = event.clientX
- document.body.scrollLeft - 10 ;");
eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop + 10;");
}
}
function shuffleQueue() { lastItemPos = queue.length - 1; lastItem = queue[lastItemPos]; for (i = lastItemPos; i>0; i--)
queue[i] = queue[i-1]; queue[0] = lastItem;
queue[0].currentFrame = 1; //reset the objects frame number & make the sprite visible again eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility = "visible"');
return queue[0].trailSpriteID;
}
function init() {
for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //fill array with trail objects queue[x] = new trailSpriteObj(x+1) ;
if (isNS) { document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = processMouse;
setInterval("processAnim();",25);
}
window.onload = init;
</script>
// 定义轨迹精灵
<div id="trailSprite1" data-style="position: absolute; height:28px; width:36px;z-index: 100">
<img src="../images/blank.gif" height="28" width="36" border="0" name="trailSprite1img">
</div>
<div id="trailSprite2"
data-style="position: absolute; height:28px; width:26px;z-index: 10">
<img src="../images/blank.gif" height="28" width="36" border="0" name="trailSprite2img">
</div>
<div id="trailSprite3"
data-style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="../images/blank.gif" height="28" width="36" border="0" name="trailSprite3img">
</div>
<div id="trailSprite4"
data-style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="../images/blank.gif" height="28" width="36" border="0" name="trailSprite4img">
</div>
<div id="trailSprite5"
data-style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="../images/blank.gif" height="28" width="36" border="0" name="trailSprite5img">
</div>
附 6 DHTML 小 技 巧 
六
巨 酷 菜 单
原 文 请 参 考 http://www.insideDHTML.COM
这 里 的
程 序 可 以 实 现 这 样 一 个 功 能 使 你 的 web 页 面 拥 有 一 个 巨 酷
的 菜
单
Demo
(仅适用于 IE4)
如果你使用
IE4 请注意上面的工具条下多出来的一条 可以拖出来
CODE
(javascript IE4)
<link rel="stylesheet" type="text/css" href="MENU.css">
<script type="text/javascript" src="menu.js"></script>
如须 Windows 98 的菜单风格请加
<script type="text/javascript" src="menu98.js"></script>
如须
Windows NT 5 Windows 2000
的菜单风格请加
<script type="text/javascript" src="menu2000.js"></script>
修改<BODY>
<body SCROLL="no" STYLE="border: 0pt">
在<BODY>后加上下列代码
<!--start menus here-->
<table id="menu" cellspacing="1" onselectstart="return false" onmouseover="menuOver()" onmouseout="menuOut()" onclick="menuClick()">
<tr id="menubar">
<!-- This is a handle. Grab this -->
<td class="disabled" data-style="padding-left: 0; padding-right: 1"><div class="disabled" id="handle" for="menu" data-style="left: 3; width: 3; height: 100%" title="Move me!"></div></td>
<!-- End of handle -->
<!-- Needed to fill out the menubar -->
<td class="root" nowrap>飞鸟之家
<table cellspacing="0" class="menu" data-style="visibility: hidden;">
<tr href="../resume/resume.htm">
<td nowrap><img src="../images/blank.gif" border="0" width="15" height="15"></td>
<td nowrap>飞鸟简历</td>
<td nowrap><img src="../images/blank.gif" border="0" width="15" height="15"></td>
</tr>
<tr href="../apps/apps.htm">
<td nowrap></td>
<td nowrap>软件乐园</td>
<td nowrap></td>
</td>
</tr>
</table>
<td class="root" nowrap>菜单示例
<table cellspacing="0" class="menu" data-style="visibility: hidden;">
<tr target="_blank" href="http://joyasp.yeah.net">
<td nowrap><img src="../images/blank.gif" border="0" width="15" height="15"></td>
<td nowrap>飞鸟论坛</td>
<td nowrap></td>
</tr>
<tr class="sub">
<td nowrap></td>
<td nowrap>打开子菜单</td>
<td><span class="more">4</span> <table class="menu" data-style="visibility: hidden"
cellspacing="0">
<tr href="http://www.onlinechina.net/friend/flybird/bbs/wwwboard.asp?id=1">
<td nowrap><img src="../images/blank.gif" border="0" width="15" height="15"></td>
<td nowrap>JOY ASP</td>
<td nowrap><img src="../images/blank.gif" border="0" width="15" height="15"></td>
</tr>
<tr href="http://www.onlinechina.net/friend/flybird/bbs/wwwboard.asp?id=2">
<td nowrap></td>
<td nowrap>论坛编程</td>
<td nowrap></td>
</tr>
<tr href="http://www.onlinechina.net/friend/flybird/bbs/wwwboard.asp?id=6">
</tr>
<td nowrap></td>
<td nowrap>灌水田地</td>
<td nowrap></td>
</td>
</tr>
</table>
</table>
</td>
<td width="100%" class="disabled"></td>
</tr>
</table>
<div id="outerDiv"></div><!--end menus here-->
