function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>
24、把鼠标放到图片上面就清楚了，（本来是不清楚的）
把如下代码加入<body>区域中
<SCRIPT language="JavaScript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
<img src="photo/j2.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">
25、下拉菜单（可以先择内容的）
把如下代码加入<body>区域中
<Script Language="JavaScript">
<!-- Begin
function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhis
tory=0,width=360,height=440 left=0 top=0");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC=" + selection + ">");
PreView.document.write("<HR><FORM><INPUT TYPE=button VALUE=关闭窗口 " +
"onClick=window.close()></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
// End -->
</SCRIPT>
<FORM>
<select NAME="imagename" onChange="display_image(this.form)">
<option value="" SELECTED>请选择相片
<option value="photo/hhy1.jpg">相片一
<option value="photo/hhy2.jpg">相片二
<option value="photo/hhy3.jpg">相片三
<option value="photo/hhy4.jpg">相片四
<option value="photo/hhy5.jpg">相片五
<option value="photo/hhy6.jpg">相片六
<option value="photo/hhy7.jpg">相片七
</select>
</FORM>
26、图片渐显效果较好
第一步:把如下代码加入<body>区域中
<img src="photo/image1.gif" name="u" border=0
alt="Image" style="filter:alpha(opacity=0)">
<script language="JavaScript">
var b = 1;
var c = true;
function fade(){
if(docu****ll);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="fade()">
27、图片来回晃动特效
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout(anim(+xp+,+xk+,+smer+), 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//-->
</SCRIPT>
<img src="photo/image1.gif" width=205 height=56 name="picture" style=position: absolu
te; top: 10px; left: 30px; BORDER=0>
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout("moveLR(picture,300,1)",10);
//-->
</SCRIPT>
28、点击图片自动显示下一张图片
第一步:把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "photo/image1.gif";
images[2] = new Image();
images[2].src = "photo/image2.gif";
images[3] = new Image();
images[3].src = "photo/image3.gif";
images[4] = new Image();
images[4].src = "photo/image4.gif";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>
<a onClick="swapPic();"><img name="randimg" src="photo/image1.gif"></a><br>
<font face="Verdana" size="-2">请点击图片</font>
</center>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" OnLoad="swapPic()">
29、在网页里随意拖动的图片
第一步:把如下代码加入<body>区域中
<style type="text/css">
#plane1 {position:absolute; left:290; top:170; width:121; z-index:0}
#plane2 {position:absolute; left:400; top:250; width:118; z-index:0}
</style>
<SCRIPT LANGUAGE="JavaScript">
//Modified by the CoffeeCup HTML Editor++
//http://www.coffeecup.com
// Global variables for platform branching
var isNav, isIE
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
// ***Begin CSS custom API Functions***
// Set zIndex property
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
}
// ***End API Functions***
// Global holds reference to selected element
var selectedObj
// Globals hold location of click relative to element
var offsetX, offsetY
// Find out which element has been clicked on
function setSelectedElem(evt) {
if (isNav) {
// declare local var for use in upcoming loop
var testObj
// make copies of event coords for use in upcoming loop
var clickX = evt.pageX
var clickY = evt.pageY
// loop through all layers (starting with frontmost layer)
// to find if the event coordinates are in the layer
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
// if so, then set the global to the layer, bring it
// forward, and get outa here
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
// use IE event model to get the targeted element
var imgObj = window.event.srcElement
// make sure its one of our planes
if (imgObj.parentElement.id.indexOf("plane") != -1) {
// then set the global to the style property of the element,
// bring it forward, and say adios
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
// the user probably clicked on the background
selectedObj = null
return
}
// Drag an element
function dragIt(evt) {
// operate only if a plane is selected
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
// prevent further system response to dragging in IE
return false
}
}
}
// Set globals to connect with selected element
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
// set globals that remember where the click is in relation to the
// top left corner of the element so we can keep the element-to-cursor
// relationship constant throughout the drag
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
// block mouseDown event from forcing Mac to display
// contextual menu.
return false
}
// Restore elements and globals to initial values
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
// Turn on event capture for Navigator
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
// Assign event handlers used by both Navigator and IE (called by onLoad)
function init() {
if (isNav) {
setNavEventCapture()
}
// assign functions to each of the events (works for both Navigator and IE)
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
</SCRIPT>
<DIV ID=plane1><IMG NAME="planePic1" SRC="photo/dazui.gif" BORDER=0 alt="别烦我,忙着呢!"
width="100" height="100"></DIV>
<DIV ID=plane2><IMG NAME="planePic1" SRC="photo/dazui.gif" BORDER=0 alt="别烦我,忙着呢!"
width="100" height="100"></DIV>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="init()">
30、简单的水中倒影
把如下代码加入<body>区域中
<IMG height=189 id=reflect src="photo/119.gif"
width=237><BR>
<SCRIPT language=JavaScript1.2>
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
if (docu****ll){
document.write(<img id=mdiv src="+docu****ll.reflect.src+"
style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">)
window.onload=f1
}
</SCRIPT>
31、一个小图片把放大镜放在上面就可以看到一个放大后的图片
第一步:把如下代码加入<body>区域中
<STYLE type=text/css>#mglass {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#thumb {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#large {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
#framegif {
LEFT: -2000px; POSITION: absolute; TOP: 50px
}
.baseline {
COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT:
50px; POSITION: absolute; TOP: 260px
}
</STYLE>
<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
var isNav, isIE
var offsetX, offsetY
var selectedObj
var enlargefactor=5
var largewidth = 455
var largeheight = 523
var largeleft = 250
var largetop = 30
var thumbwidth = Math.floor(largewidth/enlargefactor)
var thumbheight = Math.floor(largeheight/enlargefactor)
var thumbleft = 50
var thumbtop = 30
var mglasswidth = 32
var mglassheight = 32
var mglassleft = 120
var mglasstop = 110
var difleft= largeleft-thumbleft
var diftop= largetop-thumbtop
var clippoints
var cliptop = (thumbheight-mglassheight)*enlargefactor
var clipbottom = cliptop+(mglassheight*enlargefactor)
var clipleft =(thumbwidth-mglasswidth)*enlargefactor
var clipright = clipleft+(mglasswidth*enlargefactor)
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}
function shiftTo(obj, x, y) {
if (isNav) {
obj.moveTo(x,y)
} else {
obj.pixelLeft = x
obj.pixelTop = y
}
cliptop = (y-thumbtop)*enlargefactor
clipbottom = cliptop+(mglassheight*enlargefactor)
clipleft = (x-thumbleft)*enlargefactor
clipright = clipleft+(mglasswidth*enlargefactor)
if (docu****ll) {
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
docu****ll.large.style.posTop=largetop-cliptop
docu****ll.large.style.posLeft=largeleft-clipleft
docu****ll.large.style.clip=clippoints
}
if (document.layers) {
document.large.top=largetop-cliptop
document.large.left=largeleft-clipleft
document.large.clip.left = clipleft
document.large.clip.right = clipright
document.large.clip.top = cliptop
document.large.clip.bottom = clipbottom
}
}
function setSelectedElem(evt) {
if (isNav) {
var testObj
var clickX = evt.pageX
var clickY = evt.pageY
for (var i = document.layers.length - 1; i >= 0; i--) {
testObj = document.layers
if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height)) {
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
} else {
var imgObj = window.event.srcElement
if (imgObj.parentElement.id.indexOf("mglass") != -1) {
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}
selectedObj = null
return
}
function dragIt(evt) {
if (selectedObj) {
if (isNav) {
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
} else {
shiftTo(selectedObj, (window.event.clientX - offsetX),
(window.event.clientY - offsetY))
return false
}
}
}
function engage(evt) {
setSelectedElem(evt)
if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
} else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}
function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}
function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}
function init() {
if (document.layers) {
document.large.left=largeleft
document.large.top=largetop
document.framegif.left=largeleft-3
document.framegif.top=largetop-3
document.thumb.left=thumbleft
document.thumb.top=thumbtop
document.mglass.left=mglassleft
document.mglass.top=mglasstop
document.large.clip.left = 0
document.large.clip.right = 0
document.large.clip.top = 0
document.large.clip.bottom = 0
setNavEventCapture()
}
if (docu****ll) {
docu****ll.large.style.posLeft=largeleft
docu****ll.large.style.posTop=largetop
docu****ll.framegif.style.posLeft=largeleft-3
docu****ll.framegif.style.posTop=largetop-3
docu****ll.thumb.style.posLeft=thumbleft
docu****ll.thumb.style.posTop=thumbtop
docu****ll.mglass.style.posLeft=mglassleft
docu****ll.mglass.style.posTop=mglasstop
docu****ll.large.style.clip="rect(0 0 0 0)"
}
document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release
}
// - End of JavaScript - -->
</SCRIPT>
<span id=thumb><IMG name=thumbpic src="photo/portrait2311.jpg" width=91>
</span>
<span id=framegif><IMG height=166 name=framepic src="photo/frame2311.gif"
width=166> </span>
<span id=large><IMG name=largepic src="photo/portrait2311.jpg" width=455>
</span>
<span id=mglass><IMG height=50 name=mglasspic src="photo/mglass.gif"
width=50> </span>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onload=init()>
32、图片随意在网页上飘动
把如下代码加入<body>区域中
<div id="img" style="position:absolute;">
<img src="photo/gq.gif" onClick="pause_resume();">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval(changePos(), delay);
}
function pause_resume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval(changePos(),delay);
pause = true;
}
}
start();
// End -->
</script>
33、下拉框显示时间
把如下代码加入<body>区域中
<script language="javascript">
function nowtime()
{
var da,ny,nm,nd;
da = new Date();
ny = da.getYear();
nm = da.getMonth();
nd = da.getDate();
document.form1.year2.value = ny;
document.form1.month2.value = nm+1;
document.form1.day2.value = nd;
}
</script>
<form name="form1" method="post" action="#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30">
<select name="year2" >
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
年
<select name="month2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<select name="day2">
<option value="1">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
<option value="28" >28</option>
<option value="29" >29</option>
<option value="30" >30</option>
<option value="31" >31</option>
</select>
日
<script language="Javascript">
if (this.form1.month2!="")
{nowtime()}
</script>
</td>
</tr>
</table>
</form>
34、左下角下拉菜单
把如下代码加入<body>区域中
<script>
if (!document.layers)
document.write(<div id="divStayTopLeft" style="position:absolute">)
</script>
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">菜单</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.sina.com">新浪网</a><br>
<a href="http://www.163.com">网易</a><br>
<a href="http://www.yahoo.com">雅虎</a><br>
<a href="http://www.baron.com.cn">邦联宽带网</a><br>
<a href="http://www.njcatv.net">南京广电</a></td>
</tr>
</table>
<!--END OF EDIT-->
</layer>
<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write(</div>)
function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop
+ document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop
+ document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
35、模似下寸的效果
把如下代码加入<body>区域中
<script language="JavaScript">
<!--
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (docu****ll) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"red\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"red\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx = Math.random() * doc_width + 1;
cy = Math.random() * doc_height + 1;
x = r * sn + cx;
y = cy;
}
function makeRain() {
r = 1;
cx = Math.random() * doc_width + 1;
cy = 1;
x = r * sn + cx;
y = r * cs + cy;
}
function updateRain() {
r += s;
x = r * sn + cx;
y = r * cs + cy;
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x <= 1) || (x >= (doc_width - 20)) || (y >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y;
document.layers["dot"+i].left = x;
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x <= 1) || (x >= (doc_width - 20)) || (y >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
docu****ll["dot"+i].style.pixelTop = y;
docu****ll["dot"+i].style.pixelLeft = x;
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}
-->
</script>
36、把鼠标放到图片上面，图片就不停的抖动
把如下代码加入<body>区域中
<script language="JavaScript1.2">
var rector=3
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!docu****ll&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
<style>
.shakeimage{
position:relative
}
</style>
<img src="photo/1207.gif" class="shakeimage" onMouseOver="init(this);
rattleimage()" onMouseOut="stoprattle(this)">
37、图片在页面飞行中同时变换飞舞的图片
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!-- Naughty Windows Script by kurt.grigg@virgin.net
pics=new Array(photo/img.gif,photo/inindent.gif,photo/italic.gif,
photo/numlist.gif,photo/paste.gif,photo/redo.gif,photo/under.gif)
load=new Array();
function PreLoad(){
for(i=0; i < pics.length; i++)
{
load=new Image();
load.src=pics;
}
}
PreLoad();
BY=-22;
BX=-17;
NS4=(document.layers);
NS6=(document.getElementById&&!docu****ll);
IE4=(docu****ll);
L=null;
if (NS4){
document.write("<LAYER NAME=netscape LEFT=0 TOP=0><img name=n
src="+load[0].src+"></LAYER>");
}
if (NS6){
document.write("<img id=n6 src="+load[0].src+" style=position:
absolute;top:0px;left:0px>");
}
if (IE4){
document.write("<div style=position:absolute;top:0px;left:0px>
<div style=position:relative>");
document.write("<img id=explorer src="+load[0].src+" style=
position:absolute;top:0px;left:0px>");
document.write("</div></div>")
}
R=0,PB=0,RD=0,Y=0,X=0,D=0,VB=0,HB=0;
Y=10;X=10;D=Math.floor(Math.random()*60+10);
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1)
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve(),1800);
}
function MoveRandom(){
setTimeout(MoveRandom(),10);
var H=(NS6||NS4)?window.innerHeight:document.body.clientHeight;
var W=(NS6||NS4)?window.innerWidth:document.body.clientWidth;
var YS=(NS6||NS4)?window.pageYOffset:document.body.scrollTop;
var XS=(NS6||NS4)?window.pageXOffset:document.body.scrollLeft;
PB=D+=RD;
y = 3*Math.sin(PB*Math.PI/180);
x = 3*Math.cos(PB*Math.PI/180);
if (D < 0) D+=360;
Y+=y;
X+=x;
VB=180-D;
HB=0-D;
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
if (Y < 1) {Y=1;D=HB;}
if (Y > H+BY) {Y=H+BY;D=HB;}
if (X < 1) {X=1;D=VB;}
if (X > W+BX) {X=W+BX;D=VB;}
if (NS4)L=document.netscape;
if (NS6)L=document.getElementById("n6").style;
if (IE4)L=explorer.style;
L.top=Y+YS;
L.left=X+XS;
}
count=0;
move=1;
function picSwap(){
if (count >= pics.length)count=0;
if (NS4)
document.layers[netscape].document.images[n].src=pics[count];
if (NS6)
document.getElementById("n6").src=pics[count];
if (IE4)
explorer.src=pics[count];
count+=move;
setTimeout(picSwap(),2500);
}
function sTaRt(){Curve();MoveRandom();picSwap()}
window.onload=sTaRt;
//-->
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="sTaRt()">
38、飞舞的蝴蝶，点击以后就自动消失
把如下代码加入<body>区域中
<script language="JavaScript1.2">
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES
var floatimages=new Array();
floatimages[0]=photo/butterfly.gif;
floatimages[1]=photo/butterfly.gif;
//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(n
avigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (docu****ll)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appNam
e.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t=, IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?<layer name="pic+i+" visibility="hide" width="10" height=
"10"><a href="javascript:hidebutterfly()"> : <div id="pic+i+" styl
e="position:absolute; visibility:hidden;width:10px; height:10px"><a hr
ef="javascript:hidebutterfly()">;
t+=<img src="+floatimages+" name="p+i+" border="0">;
t+=(NS4)? </a></layer>:</a></div>;
}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[nu
m].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num
].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[nu
m].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout(getnewprops(+num+), Math.floor(Math.random()*Tmax));
}
function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}
function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}
function getid(name){
if(NS4)return document.layers[name];
if(IE4)return docu****ll[name];
if(NS6)return document.getElementById(name);
}
function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+px;
IDs[num].style.top=y+px;
}}
function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}
function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}
function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+px;
IDs[num].style.top=(getidtop(num)+dy)+px;
}}
function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}
function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}
function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs=getid(pic+i);
if(NS4){
IDs.W=IDs.document.images["p"+i].width;
IDs.H=IDs.document.images["p"+i].height;
}
if(NS6 || IE4){
IDs.W=document.images["p"+i].width;
IDs.H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs.W)), Math.floor(Mat
h.random()*(wind_h-IDs.H)));
if(NS4)IDs.visibility = "show";
if(IE4 || NS6)IDs.style.visibility = "visible";
startfly=setInterval(moveimage(+i+),Math.floor(Math.random()*100)+100);
}}
function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("docu****ll.pic"+i+".style.visibility=hidden")
else if (NS6)
document.getElementById("pic"+i).style.visibility=hidden
else if (NS4)
eval("document.pic"+i+".visibility=hide")
clearInterval(startfly)
}
}
if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
</script>
39、在网页中漂动的多张图片
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!--
Pic=new Array(photo/04261.gif,photo/04262.gif,photo/04263.gif,p
hoto/04264.gif,photo/04265.gif)
//Smoothness of animation depends on the number of images and theyre file size.
MaxSpeed=5;
MinSpeed=2;
load = new Array()
for(i=0; i < Pic.length; i++)
{
load = new Image();
load.src = Pic;
}
amount=Pic.length;
ns=(document.layers)?1:0;
if (ns){
for (i=0; i < amount; i++){
document.write("<LAYER NAME=netscape"+i+" LEFT=0 TOP=0><img name=ne
tpics src="+load.src+"></LAYER>")}
}
else{
document.write("<div style=position:absolute;top:0px;left:0px><div st
yle=position:relative>");
for (i=0; i < amount; i++){
document.write("<img id=explorer src="+load.src+" style=positio
n:absolute;top:0px;left:0px>")}
document.write("</div></div>")
}
VB=0;
HB=0;
R=new Array();
PB=new Array();
RD=new Array();
Y=new Array();
X=new Array();
D=new Array();
SP=new Array();
BY=new Array();
BX=new Array();
for (i=0; i < amount; i++){
Y=10;
X=10;
D=Math.floor(Math.random()*70+10);
SP=Math.floor(Math.random()*MaxSpeed+MinSpeed);
}
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5)
for (i=0; i < amount; i++){
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
}
setTimeout(Curve(),1500);
}
function MoveRandom(){
var H=(document.layers)?window.innerHeight:document.body.clientHeight;
var W=(document.layers)?window.innerWidth:document.body.clientWidth;
var YS=(document.layers)?window.pageYOffset:document.body.scrollTop;
var XS=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < amount; i++){
BY=-load.height;
BX=-load.width;
PB=D+=RD;
y = SP*Math.sin(PB*Math.PI/180);
x = SP*Math.cos(PB*Math.PI/180);
if (D < 0) D+=360;
Y+=y;
X+=x;
VB=180-D;
HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}
if (Y > H+BY) {Y=H+BY;D=HB;}
if (X < 1) {X=1;D=VB;}
if (X > W+BX) {X=W+BX;D=VB;}
var layer=(document.layers)?document.layers[netscape+i]:explorer.style;
layer.top=Y+YS;
layer.left=X+XS;
}
setTimeout(MoveRandom(),10);
}
function sTaRt(){Curve();MoveRandom()}
//-->
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="if
(docu****ll||document.layers) sTaRt()">
40、从上往下漂动的雪花（自已可以改为图片噢）
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!--
Amount=20; //Smoothness! depends on image file size, the smaller the
size the more you can use!
//Pre-load your image below!
Image0=new Image();
Image0.src="photo/flake1.gif";
Image1=new Image();
Image1.src="photo/flake2.gif";
Image2=new Image();
Image2.src="photo/flake3.gif";
Image3=new Image();
Image3.src="photo/flake4.gif";
Image4=new Image();
Image4.src="photo/flake5.gif";
grphcs=new Array(5)
grphcs[0]="photo/flake1.gif"
grphcs[1]="photo/flake2.gif"
grphcs[2]="photo/flake3.gif"
grphcs[3]="photo/flake4.gif"
grphcs[4]="photo/flake5.gif"
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME=sn"+i+" LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write(<div style="position:absolute;top:0px;left:0px">
<div style="position:relative">);
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write(<img id="si" src="+rndPic+" style="position:abso
lute;top:0px;left:0px">);
}
document.write(</div></div>);
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos = Math.round(Math.random()*WinHeight);
Xpos = Math.round(Math.random()*WinWidth);
Speed= Math.random()*3+2;
Cstep=0;
Step=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed*Math.sin(90*Math.PI/180);
sx = Speed*Math.cos(Cstep);
Ypos+=sy;
Xpos+=sx;
if (Ypos > WinHeight){
Ypos=-60;
Xpos=Math.round(Math.random()*WinWidth);
Speed=Math.random()*5+2;
}
if (ns){
document.layers[sn+i].left=Xpos;
document.layers[sn+i].top=Ypos+hscrll;
}
else{
si.style.pixelLeft=Xpos;
si.style.pixelTop=Ypos+hscrll;
}
Cstep+=Step;
}
setTimeout(fall(),10);
}
//-->
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="fall()">
41、图片上面有光线在滚动效果
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
i=0;
function f_wave()
{i=i-4;
ShowCool.style.filter="Wave(Freq=1,LightStrength=20,Phase=" + i + ")";
setTimeout("f_wave()",100);
}
window.onload=f_wave;</SCRIPT>
<IMG SRC="photo/logo0509.gif" WIDTH="180" HEIGHT="60" ID=ShowCool>
42、日期效果（2003年10月25日星期三）
<script language=JavaScript>
<!-- Begin
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=##000000 style=font-size:9pt;font-family: 宋体> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()+1],
"</font>" );
// End -->
</script>
42、把下面的代码插入网页，就会在你打开网页的时候弹出一个窗口(*****.htm
是插入自已做要弹出的网页
width=468,height=60,left=200,top=50是你要必弹出网页大小的窗口)
<script language="javascript">
window.open("*****.htm","www_g168_net","toolbar=no, status=no,menubar=no,
scrollbars=no,resizable=no,width=468,height=60,left=200,top=50");
</script>
43、就是在网页里面试听歌曲，注意在DW链接的时候，路径一定要是绝对路径，例如我的路径是
要把下面rtsp://weico.3322.net/mp3/01.ram改成我服务器里的路径即http://zx
y023028.nease.net/***.wma
就可以了）
<a href=rtsp://weico.3322.net/mp3/01.ram>在线收听</a>
44、在线试听歌曲的连接，（没有试用呢？）
<a href=rtsp://weico.3322.net/mp3/01.ram>在线收听</a>
45、如何给网页里插入的水平线添加颜色？
这就是代码，希望对你有所帮助，<hr size="0" color="#cc6633">
上面的color="#cc6633表示此线条是红色自行可以更改。
上面的size="0"表示线条宽度为0。
46、HTML没有直接写竖线的专用标记，使用<hr>来做竖线有局限性，
所以竖线只能通过表格table来实现。有2种方法可以写竖线，你可任选一种，
例如要高90像素的竖线：
1.代码如：<table height=90
style=border-color:000000;border-left-style:solid;border-width:1px>
<tr><td valign=top>内容</table>
47、防止别人复制你的网页代码
<script language="JavaScript"><!--
if (navigator.appName.indexOf("Internet Explorer") != -1)
document.onmousedown = noSourceExplorer;
function noSourceExplorer(){if (event.button == 2 | event.button == 3)
{
alert("版权所有，严禁拷贝！");}}
// --></script>
48、禁止使用右键（把以下代码放入<body>在也就是<body ********>）
oncontextmenu=self.event.returnValue=false onselectstart="return false"
background=""
完成以后的效果为：<body oncontextmenu=self.event.returnValue=false
onselectstart="return false"
background="">
49、显示IP地址效果的代码，
你现在的IP是：<script src="http://code.helpor.net/mine/ip.php"></script>
50、网页里面简单的图片滚动效果
<marquee direction="right" scrollamount="8" scrolldelay="100">
<img src="图片路径"></img>
<img src="图片路径"></img>
</marquee>
51、文字物效软件，美中不足的是英文版本，只能做一些网址等英文内容，
不能做出中文的文字效果
软件地址为：软件王2003-1/配套软件/Flax1.52
52、如何去掉网页滚动条
代码如下：
<body scroll=no>
去掉水平滚动条：
<body style="overflow-x: hidden">
去掉竖直滚动条：
<body style="overflow-y: hidden">
隐藏横向滚动条，显示纵向滚动条:
<body style="overflow-x:hidden;overflow-y:scroll">
全部隐藏
<body style="overflow:hidden">
或者是
<body scroll="no">
53、以下代码是友情连接，适合任何人网站，此图片为测试图片，
<a href="http://zxy023028.nease.net" target="_blank">
<img src="http://zxy023028.nease.net/images/yforum25.gif" width="50" height="40"
border="0" alt="多情浪子"></a>
54、精美的下拉菜单（第八行的168PX是修改下拉菜单上部分长或短，
第十三行的-5PX是调整下部分长或短的。）
<!-- 样式部分 -->
<style type=text/css>
td,div { font: normal 12px 宋体; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
</style>
<!-- 实现部分 -->
<div style="background-color:#3366CC;width:168px;text-align:center;
padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"
onmouseover="myMenu.style.display=block"
onmouseout="myMenu.style.display=none">
<div style="position:absolute;width:0px;height:0px;overflow:visible;">
<div id=myMenu style="position:absolute;left:-5px;top:18px;display:none;
width:90px;background-color:#3366CC;padding:5px;text-align:left;">
<a href=#none>Link 1</a><br>
<a href=#none>Link 2</a><br>
<a href=#none>Link 3</a><br>
<a>...</a><br>
<a href=#none>Link N</a><br>
</div>
</div>
<a href=#none>菜单实例</a>
</div>
55、在网页里游动的小鱼（只要在表格里插入以下代码就可以了）源文件见D盘（精美小鱼）
<DIV id=Layer1
style="HEIGHT: 27px; LEFT: 143px; POSITION: absolute; TOP: 193px; WIDTH: 2px; Z-INDEX: 1">
<EMBED
src=http://www.2396.com/001flash/upload/imgwsf/20031041901531.swf
wmode="TRANSPARENT"></EMBED></DIV>
