JS特效实例
IE测试成功
javascript图片文字向上滚动
一款标准的js写的兼容多浏览器的图片与文本向上滚动效果，可以滚动一屏停止一下再滚动，
这种效果非常的好，有需要的朋友可以参考一下。
<!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=utf-8" /> <title>无标题文档</title> <script language="javascript"> function Marquee() { this.ID = document.getElementById(arguments[0]); if(!this.ID) { alert("aaa" + arguments[0] + "bbbb!"); this.ID = -1; return; } this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.CTL = this.StartID = this.Stop = this.MouseOver = 0; this.Step = 1; this.Timer = 30; this.DirectionArray = {"top":0 , "up":0 , "bottom":1 , "down":1 , "left":2 , "right":3}; if(typeof arguments[1] == "number" || typeof arguments[1] == "string")this.Direction = arguments[1]; if(typeof arguments[2] == "number")this.Step = arguments[2]; if(typeof arguments[3] == "number")this.Width = arguments[3]; if(typeof arguments[4] == "number")this.Height = arguments[4]; if(typeof arguments[5] == "number")this.Timer = arguments[5]; if(typeof arguments[6] == "number")this.DelayTime = arguments[6]; if(typeof arguments[7] == "number")this.WaitTime = arguments[7]; if(typeof arguments[8] == "number")this.ScrollStep = arguments[8]; this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden"; this.ID.noWrap = true; this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1); if(arguments.length >= 7)this.Start(); } Marquee.prototype.Start = function() { if(this.ID == -1)return; if(this.WaitTime < 800)this.WaitTime = 800; if(this.Timer < 20)this.Timer = 20; if(this.Width == 0)this.Width = parseInt(this.ID.style.width); if(this.Height == 0)this.Height = parseInt(this.ID.style.height); if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()]; this.HalfWidth = Math.round(this.Width / 2); this.HalfHeight = Math.round(this.Height / 2); this.BakStep = this.Step; this.ID.style.width = this.Width + "px"; this.ID.style.height = this.Height + "px"; if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; var templateLeft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><td noWrap=true style='white-space: nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>"; var templateTop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>"; var msobj = this; msobj.tempHTML = msobj.ID.innerHTML; if(msobj.Direction <= 1) { msobj.ID.innerHTML = templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } else { if(msobj.ScrollStep == 0 && msobj.DelayTime == 0) { msobj.ID.innerHTML += msobj.ID.innerHTML; } else { msobj.ID.innerHTML = templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML); } } var timer = this.Timer; var delaytime = this.DelayTime; var waittime = this.WaitTime; msobj.StartID = function(){msobj.Scroll()} msobj.Continue = function() { if(msobj.MouseOver == 1) { setTimeout(msobj.Continue,delaytime); } else { clearInterval(msobj.TimerID); msobj.CTL = msobj.Stop = 0; msobj.TimerID = setInterval(msobj.StartID,timer); } } msobj.Pause = function() { msobj.Stop = 1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue,delaytime); } msobj.Begin = function() { msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth / 2 : msobj.ID.scrollHeight / 2; if((msobj.Direction <= 1 && msobj.ClientScroll <= msobj.Height + msobj.Step) || (msobj.Direction > 1 && msobj.ClientScroll <= msobj.Width + msobj.Step)) { msobj.ID.innerHTML = msobj.tempHTML; delete(msobj.tempHTML); return; } delete(msobj.tempHTML); msobj.TimerID = setInterval(msobj.StartID,timer); if(msobj.ScrollStep < 0)return; msobj.ID.onmousemove = function(event) { if(msobj.ScrollStep == 0 && msobj.Direction > 1) { var event = event || window.event; if(window.event) { if(msobj.IsNotOpera) { msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX; } else { msobj.ScrollStep = null; return; } } else { msobj.EventLeft = event.layerX - msobj.ID.scrollLeft; } msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2; msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft); msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth); } } msobj.ID.onmouseover = function() { if(msobj.ScrollStep == 0)return; msobj.MouseOver = 1; clearInterval(msobj.TimerID); } msobj.ID.onmouseout = function() { if(msobj.ScrollStep == 0) { if(msobj.Step == 0)msobj.Step = 1; return; } msobj.MouseOver = 0; if(msobj.Stop == 0) { clearInterval(msobj.TimerID); msobj.TimerID = setInterval(msobj.StartID,timer); } } } setTimeout(msobj.Begin,waittime); } Marquee.prototype.Scroll = function() { switch(this.Direction) { case 0: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 0) { this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } else { if(this.ID.scrollTop >= this.ClientScroll) { this.ID.scrollTop -= this.ClientScroll; } this.ID.scrollTop += this.Step; } break; case 1: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 0) { this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } else { if(this.ID.scrollTop <= 0) { this.ID.scrollTop += this.ClientScroll; } this.ID.scrollTop -= this.Step; } break; case 2: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 0) { this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } else { if(this.ID.scrollLeft >= this.ClientScroll) { this.ID.scrollLeft -= this.ClientScroll; } this.ID.scrollLeft += this.Step; } break; case 3: this.CTL += this.Step; if(this.CTL >= this.ScrollStep && this.DelayTime > 0) { this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; } else { if(this.ID.scrollLeft <= 0) { this.ID.scrollLeft += this.ClientScroll; } this.ID.scrollLeft -= this.Step; } break; } } //--> </script> <style> @charset "utf-8"; /*提示要保存为UTF-8格式*/ /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; } table{border-collapse:collapse;border-spacing:0;} a{color:#333;text-decoration:none;} a:hover{ text-decoration:none; color:#c00;} .area5a{ width:950px; margin:20px auto;} .top01-hot{ background:url(../images/d1-bg04.gif) no-repeat; padding-left:166px; width:784px; float:left; height:37px; overflow:hidden;} .part01-hot{ width:623px; float:left; padding-top:5px;display:inline; text-align:center;} .part01-hot a{ margin:0 6px; color:#fff;} .part02-hot{float:right; padding-right:11px; width:150px; padding-top:10px; text-align:right;} .part02-hot a{ color:#36c;} .part02-hot a.more{ padding-left:4px; margin-left:5px; background:url(../images/line03.gif) no-repeat left 0;} .mid01-hot{ background:url(../images/d1-bg05.gif) repeat-y; width:100%; height:176px; overflow:hidden; float:left;} .shopPH {MARGIN-TOP: 10px; POSITION: relative; HEIGHT: 217px} .bd {padding-left:15px; } .bd LI {float: left; width: 298px; padding-top: 8px; height: 72px; _display: inline} .bd LI .pic {FLOAT: left; WIDTH: 153px; TEXT-ALIGN: left} .bd LI .pic img { border: #e2e2e2 1px solid; padding: 3px; display: block; width: 135px; height: 60px; } .bd LI .info {float: left; width: 145px; text-align:left;} .bd LI .info h3{ padding-top:2px; height:19px; overflow: hidden;} .bd LI .info h3 a{ font-size:12px; font-weight:normal; color:#36c;} .bd LI .info p.star {color: #888; height:23px;} .bd LI .info p.menu a{ display:block; background:url(../images/bg01.gif) no-repeat; width:101px; height:23px; text-align:center; line-height:23px;color:#36c;} .bd LI .info p.menu a:hover{ color:#f30;} .bot01-hot{ background:url(../images/d1-bg06.gif) no-repeat; width:100%; height:5px; overflow:hidden; float:left;} </style> </head> <body> <div class="area5a"> <div class="top01-hot"> <div class="part01-hot"> <a>美女01</a> <a>美女02</a> <a>美女03</a> <a>美女04</a> <a>美女05</a> <a>美女06</a> <a>美女07</a> <a>美女08</a> <a>美女09</a> </div> <div class="part02-hot"> <a>右侧前面</a> <a class="more">右侧后面</a> </div> </div> <div class="mid01-hot"> <div class=shopPH> <div class="bd clearfix"> <div id=marqueediv1> <ul> <li> <div class=pic> <A target=_blank><img alt="" src="images/img01.jpg"></A> </div> <div class=info> <H3><A >数码专柜01</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img02.jpg"></A> </div> <div class=info> <H3><A >数码专柜02</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img03.jpg"></A> </div> <div class=info> <H3><A >数码专柜03</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img01.jpg"></A> </div> <div class=info> <H3><A >数码专柜04</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img02.jpg"></A> </div> <div class=info> <H3><A >数码专柜05</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img03.jpg"></A> </div> <div class=info> <H3><A >数码专柜06</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img01.jpg"></A> </div> <div class=info> <H3><A >数码专柜07</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img02.jpg"></A> </div> <div class=info> <H3><A >数码专柜08</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img03.jpg"></A> </div> <div class=info> <H3><A >数码专柜09</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img01.jpg"></A> </div> <div class=info> <H3><A >数码专柜10</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img02.jpg"></A> </div> <div class=info> <H3><A >数码专柜11</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> <li> <div class=pic> <A target=_blank><img alt="" src="images/img03.jpg"></A> </div> <div class=info> <H3><A >数码专柜12</A></H3> <P class=star>折扣：折上折</P> <P class=menu><A >进入我的店铺 »</A></P> </div> </li> </ul> </div> <SCRIPT type=text/javascript> new Marquee("marqueediv1",0,1,930,160,24,3000,500,80); </SCRIPT> </div> </div> </div> <div class="bot01-hot"> </div> </div> </td> </tr> </table> </body> </html>
完毕
——————————————————————————————————————————————————————
取消事件冒泡：在IE的事件机制中，触发事件会从子元素向父元素逐级上传，
就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true可以停止事件继续上传；
补充一点，IE的事件传递是从下到上的：
<!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" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo </title> <style type="text/css" media="screen"> div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; height:2em;} </style> <script type="text/javascript"> //<![CDATA[ function init() { var log = document.getElementsByTagName('textarea')[0]; var all = document.getElementsByTagName('div')[0].getElementsByTagName('*'); for (var i = 0, n = all.length; i < n; ++i) { all[i].onmouseover = function(e) { this.style.border = '1px solid red'; log.value = '鼠标现在进入的是： ' + this.nodeName; }; all[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*'); for (var i = 0, n = all2.length; i < n; ++i){ all2[i].onmouseover = function(e){ this.style.border = '1px solid red'; if (e) //停止事件冒泡 e.stopPropagation(); else window.event.cancelBubble = true; log.value = '鼠标现在进入的是： ' + this.nodeName; }; all2[i].onmouseout = function(e){ this.style.border = '1px solid white';}; } } window.onload = init; //]]> </script> </head> <body> <h1>Bubble in JavaScript DOM</h1> <p>DOM树的结构是：</p> <pre> <code> UL -LI -A -SPAN </code> </pre> <div> <ul> <li><a href="#"><span>Bubble</span></a></li> <li><a href="#"><span>Bubble</span></a></li> </ul> </div> <textarea></textarea> <p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p> <div> <ul> <li><a href="#"><span>Bubble</span></a></li> <li><a href="#"><span>Bubble</span></a></li> </ul> </div> <p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p> </body> </html>
——————————————————————————————————————————————————————
<!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=utf-8" />
<title>点击文字弹出层</title>
<style type="text/css">
<!--
*{font-size:12px;font-family:Verdana, Geneva, sans-serif;line-height:14px}
p{margin:0px; padding:0px;}
a{color:#039}
a:hover{color:#f60}
.pop{position:absolute;left:40px;top:20px;width:380px;height:240px;background:#fff;border:8px solid #DDD;}
.pop_head{position:relative; height:18px;}
.pop_head img{ border:none; margin:8px 0px 0 0;}
.pop_head a{position:absolute;right:8px;line-height:20px;color:#000;text-decoration:none}
.pop_head a:hover{color:#f60;text-decoration:none}
.pop_body{padding:0 12px 2px}
.popdiv{display:block; width:12px; height:20px;}
.popdiv img{ border:none;}
.popbox{ position:relative; height:360px; width:680px;}
.border{ border:solid 1px #8e8e8e;height:240px}
.miaosu{ line-height:16px; background:#fff6ea; border:solid 1px #ffecd5; padding:4px 8px; color:#666; margin-top:5px;}
.fomdiv{ margin-top:12px; }
.fomdiv span{ display:block; float:left;line-height:32px;font-size:14px; color:#444;}
.tcinp{ width:160px; height:26px; border: solid 1px #DDD; font-size:14px; padding-left:5px; line-height:26px;}
.pop_but{ background: url(images/tbg.jpg) no-repeat; width:69px; height:29px; border: none; color:#fff; text-align:center; line-height:29px; cursor:pointer}
.popbutdiv{ margin:8px 0 16px 74px;}
.pop_p{ line-height:16px; color:#888; padding-top:5px; border-top:dashed 1px #CCC;}
-->
</style>
</head>
<body>
<!--首先设置一个层:-->
<div class="popbox">
<div id="pop" class="pop" style="display: none">
<div class="border">
<div class="pop_head">
<a href="javascript:void(0);" onclick="hide()">
<img src="images/gb.jpg" width="11" height="10" /></a></div>
<div class="pop_body">
<p>
1111111111111111111111111</p>
<div class="miaosu">
春天地址为:</div>
<div class="fomdiv">
<span>手机号码：</span><input name="" class="tcinp" type="text" /></div>
<div class="popbutdiv">
<input name="button" type="submit" class="pop_but" id="button" value="提交" /></div>
<p class="pop_p">
1.网络繁忙时会有延迟，请不要在短时间内多次重复发送<br />
2.每个手机号码当日可接收5条楼盘信息
</p>
</div>
</div>
</div>
<!--弹出层的按钮:-->
<a href="javascript:void(0);" onclick="show();" class="popdiv">
<img src="美女/girl02.jpg" width="393px" height="581px" /></a>
</div>
<div class="popbox">
<div id="pop2" class="pop" style="display: none">
<div class="border">
<div class="pop_head">
<a href="javascript:void(0);" onclick="hide2()">
<img src="美女/girl03.jpg" width="393px" height="581px" /></a></div>
<div class="pop_body">
<p>
22222222222222222222</p>
<div class="miaosu">
春天地址为:</div>
<div class="fomdiv">
<span>手机号码：</span><input name="" class="tcinp" type="text" /></div>
<div class="popbutdiv">
<input name="button" type="submit" class="pop_but" id="button" value="提交" /></div>
<p class="pop_p">
1.网络繁忙时会有延迟，请不要在短时间内多次重复发送<br />
2.每个手机号码当日可接收5条楼盘信息
</p>
</div>
</div>
</div>
<!--弹出层的按钮:-->
<a href="javascript:void(0);" onclick="show2();" class="popdiv">
<img src="美女/girl01.jpg" width="393px" height="581px" /></a>
</div>
<script type="text/javascript">
var EX = {
addEvent: function (k, v) {
var me = this;
if (me.addEventListener)
me.addEventListener(k, v, false);
else if (me.attachEvent)
me.attachEvent("on" + k, v);
else
me["on" + k] = v;
},
removeEvent: function (k, v) {
var me = this;
if (me.removeEventListener)
me.removeEventListener(k, v, false);
else if (me.detachEvent)
me.detachEvent("on" + k, v);
else
me["on" + k] = null;
},
stop: function (evt) {
evt = evt || window.event;
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
};
document.getElementById('pop').onclick = EX.stop;
var url = '#';
function show() {
var o = document.getElementById('pop');
o.style.display = "";
setTimeout(function () { EX.addEvent.call(document, 'click', hide); });
}
function hide() {
var o = document.getElementById('pop');
o.style.display = "none";
EX.removeEvent.call(document, 'click', hide);
}
function show2() {
var o = document.getElementById('pop2');
o.style.display = "";
setTimeout(function () { EX.addEvent.call(document, 'click', hide2); });
}
function hide2() {
var o = document.getElementById('pop2');
o.style.display = "none";
EX.removeEvent.call(document, 'click', hide2);
}
</script>
</body>
</html>
——————————————————————————————————————————————————————
js中function(e)
e是什么意思，代表什么，请举例说明
e是事件，在firefox中只能在事件现场使用window.event，所以只有把event传给函数使用。为了兼容FF和其它浏览器，一般会在函数里重新给e赋值：
e = window.event || e;
也就是说，如果window.event存在，则该浏览器支持直接使用window.event，否在就是不支持，不支持就使用传进来的e。
如下代码：
<SCRIPT LANGUAGE="JavaScript"> <!-- window.onload = function(e){ //alert(window.event.type) // IE时调用，非IE注释掉否则报错 alert(e.type); // FF时调用，非FF注释掉否则报错 // 由于这里的事件是window.onload ，所以打印type两个都会显示”load“。 } //--> </SCRIPT>
——————————————————————————————————————————————————————
文本无限滚动
<!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>
<title>兼容各种浏览器的文字循环无缝滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
div{position:absolute;margin:0px;padding:0px;left:0px;top:0px;width:400px;overflow:hidden;height:20px;}
#gd{position:absolute;margin:0px;padding:0px;left:0px;top:0px;width:800px;height:20px;}
a{padding:5px;}
#gd li{list-style-type:none;white-space:nowrap;}
#gd li span{zoom:1}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div>
<ul id="gd">
<li>
<span>
<a href="#">站长乐园</a>
<a href="#">可乐随缘</a>
<a href="#">你就知道</a>
</span>
</li>
</ul>
</div>
<script language="javascript">
var oUl = document.getElementById('gd');
var oLi = oUl.getElementsByTagName('li')[0];
oLi.getElementsByTagName('span')[0].style.marginLeft = 0;
oLi.appendChild(oLi.getElementsByTagName('span')[0].cloneNode(true))
var timer = null,isMove=true;
timer = setInterval(move, 30);
function move() {
if(!isMove) return;
var spanDom = oLi.getElementsByTagName('span')[0];
spanDom.style.marginLeft = parseInt(spanDom.style.marginLeft,10) - 2 + "px";
if (Math.abs(parseInt(spanDom.style.marginLeft,10)) > parseInt(spanDom.offsetWidth,10)) {
spanDom.style.marginLeft = 0;
oLi.appendChild(spanDom)
}
}
oUl.onmouseover = function() {
isMove=false;
}
oUl.onmouseout = function() {
isMove=true;
}
</script>
</body>
</html>
——————————————————————————————————————————————————————
js跑马灯状态栏效果代码
<html> <head> <script language="JavaScript"> <!-- function makeArray(n) { this.length = n; for (i=0; i<n; i++) this[i]=""; } stcnt = 16; msg = "欢迎您的www.111cn.net!" wmsg = new makeArray(32); wmsg[0]=msg; blnk =" "; for (i=1; i<32; i++) { b = blnk.substring(0,i); for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b; } function wiper() { if (stcnt > -1) str = wmsg[stcnt]; else str = wmsg[0]; if (stcnt-- < -40) stcnt=31; window.status = str; timeID = window.setTimeout("wiper()",150); } // --> </script> </head> <body onLoad=wiper();> 1、弹来弹去跑马灯 <marquee width=400 behavior=alternate direction=left align=middle border=1><font color="#ff0099">弹来弹去跑马灯</font></marquee> 2、跑的很快的跑马灯 <marquee width=400 behavior=alternate direction=left align=middle border=1 scrollamount=30><font color="#ff6699">跑的很快的跑马灯</font></marquee> 3、带有超级链接的跑马灯 <marquee width=90%> <a href="http://111cn.net/" target=_blank><font color="#ff3399">^-^我是小林^-^带有超链接的跑马灯!点我试试^-^</font></a> </marquee> 4、似乎有弹性效果： <marquee behavior="alternate" direction="up" width="200" height="100">http://111cn.net/</marquee> 参数说明： behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动 direction=left,right 跑马方向：从左向右，从右向左 loop=100 跑马次数：循环100次，如不写默认为一直循环 width=100%,height=200 跑马范围：宽为100%，高为200像素 scrollamount=20 跑马速度：数越大越快 scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动 hspace=20，vspace=20 跑马区域与其它区域间的空白大小 bgcolor=#00FFCC 跑马区域的背景颜色 </body> </html>
——————————————————————————————————————————————————————
动态的引用一个JS文件，地址是一个变量
var loadJs = function(url, callback) { var script = document.createElement('script'); script.type = 'text/javascript'; if (callback)script.onload = script.onreadystatechange = function() { if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')return; script.onreadystatechange = script.onload = null; callback(); }; script.src = url; document.getElementsByTagName('head')[0].appendChild (script); }
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
JavaScript prototype 属性
定义和用法
prototype 属性使您有能力向对象添加属性和方法。
语法
object.prototype.name=value
实例
在本例中，我们将展示如何使用 prototype 属性来向对象添加属性：
<script type="text/javascript"> function employee(name,job,born) { this.name=name; this.job=job; this.born=born; } var bill=new employee("Bill Gates","Engineer",1985); employee.prototype.salary=null; bill.salary=20000; document.write(bill.salary); </script>
输出：
20000
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
——————————————————————————————————————————————————————
疑问：
网页里有大量图片要实现所有内容包括图片加载完成后调用这段代码
<script>
myform.submit();
</script>
不要用onload
解答：
<script> <!-- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法 function subSomething() { if(document.readyState == "complete"&&window.parent.frames["框架名"].document.readyState == "complete")//当页面加载状态为完全结束时进入 myform.submit(); //这是你的操作 } --> </script>
AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
注释：onreadystatechange 事件被触发 4 次，对应着 readyState 的每个变化。
实例
<html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/ajax/test1.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button> </body> </html>
