1。动态更改背景的效果，点击你想要的背景图片，背景即改变
演示无
方法：
复制代码到head
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == "Microsoft Internet Explorer") {
image_directory = "../";
clear = new Image(); clear.src = image_directory + "clear.jpg";
pic1 = new Image(); pic1.src = image_directory + "chameleon.jpg";
pic2 = new Image(); pic2.src = image_directory + "gecko.jpg";
pic3 = new Image(); pic3.src = image_directory + "lizard.jpg";
pic4 = new Image(); pic4.src = image_directory + "toad.jpg";
}
function imagechange(imgName) {
if (navigator.appName == "Microsoft Internet Explorer") {
document.body.background = eval(imgName + ".src");
}
}
</script>
增加修改链接
<a href="#" onMouseOver="imagechange('pic1');" onMouseOut="imagechange('clear');"><img src="chameleon.jpg"></a>
<a href="#" onMouseOver="imagechange('pic2');" onMouseOut="imagechange('clear');"><img src="gecko.jpg"></a>
<a href="#" onMouseOver="imagechange('pic3');" onMouseOut="imagechange('clear');"><img src="lizard.jpg"></a>
<a href="#" onMouseOver="imagechange('pic4');" onMouseOut="imagechange('clear');"><img src="toad.jpg"></a>
注明：
image_directory = "../"; 设置背景图片目录
clear = new Image(); clear.src = image_directory + "clear.jpg";
pic1 = new Image(); pic1.src = image_directory + "chameleon.jpg";
pic2 = new Image(); pic2.src = image_directory + "gecko.jpg";
pic3 = new Image(); pic3.src = image_directory + "lizard.jpg";
pic4 = new Image(); pic4.src = image_directory + "toad.jpg";
背景图片地址
2，很多网页屏蔽了源代码，查看不了，怎么办？
用以下代码建立一个网页，即可查看
演示：无
复制代码到head
<SCRIPT LANGUAGE="JavaScript">
function viewSource() {
document.getSource.view.value="Please wait!";
setTimeout("document.getSource.view.value='View Source!'",6000);
window.location.href= "view-source:" + document.getSource.url.value;
return false;
}
</script>
复制代码到body
<form name=getSource onSubmit="return viewSource();">
<input type=text name=url value="http://">
<br>
<br>
<input type=submit name=view value="View Source">
</form>
鼠标划过链接时，发出声音
复制代码到body
<a href="#" onMouseOver="document.all.music.src='1.wav'">mouse mouseover me</a>
<bgsound src="#" id=music loop=1 autostart="true">
1.wav是声音文件
文字切换效果，非常漂亮，演示：[url]http://www.hot4.org/java/dynamic/pagescroll3/demo.htm[/url]
方法：
复制代码到head
<style type="text/css">
a {font-family:verdana,arial,helvetica,sans-serif; font-size:11px; color:#666666; text-decoration:none;}
a:hover {text-decoration:underline; color:#cccccc;}
body {background-color:#ffffff; color:#999999; font-size:11px; font-family:verdana,arial,helvetica,sans-serif; line-height:15px;}
#divScroller1 {position:absolute; overflow:hidden; z-index:9; left:100px; top:90px; 400px; height:300px; clip:rect(0px, 400px, 300px, 0px); visbility:visible; border-0px 0px 0px 1px; border-color:#666666; border-style:dashed;}
.dynPage {position:absolute; z-index:10; left:0px; top:0px; 385px; visibility:hidden; padding-left:15px; font-family:arial,helvetica,sans-serif; font-size:10px; line-height:14px; color:black}
#arrows {position:absolute; z-index:11; left:74px; top:355px; 20px;}
#links {position:absolute; z-index:11; left:77px; top:301px; 20px;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
var numScrollPages = 3
var transitionOut = 1;
var transitionIn = 2;
var slideAcceleration = 0.2;
var transitionOnload = 1
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
if(document.layers){ //NS4 resize fix...
scrX= innerWidth; scrY= innerHeight;
onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
//object constructor...
function scrollerobj(obj,nest){
nest = (!nest)?"":'document.'+nest+'.'
this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
this.css = bw.ns4?this.elm:this.elm.style
this.doc = bw.ns4?this.elm.document:document
this.obj = obj+'scrollerobj'; eval(this.obj+'=this')
this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.bw.opera5?this.css.pixelWidth:0
this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}
//object methods...
scrollerobj.prototype.moveTo = function(x,y){
if(x!=null){this.x=x; this.css.left=x+px}
if(y!=null){this.y=y; this.css.top=y+px}
}
scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}
var scrollTimer = null;
function scroll(step){
clearTimeout(scrollTimer);
if ( !busy && (step<0&&activePage.y+activePage.h>scroller1.h || step>0&&activePage.y<0) ){
activePage.moveBy(0,step);
scrollTimer = setTimeout('scroll('+step+')',40);
}
}
function stopScroll(){
clearTimeout(scrollTimer);
}
var activePage = null;
var busy = 0;
function activate(num){
if (activePage!=pages[num] && !busy){
busy = 1;
if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); }
else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')');
}
}
function activateContinue(num){
busy = 1;
activePage = pages[num];
activePage.moveTo(0,0);
if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; }
else if (transitionIn==1) activePage.blend('visible', 'busy=0');
else if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0');
}
scrollerobj.prototype.slide = function(target, acceleration, time, fn){
this.slideFn= fn?fn:null;
this.moveTo(0,scroller1.h);
if (bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)';
if (bw.ns6) this.css.MozOpacity = 1;
this.showIt();
this.doSlide(target, acceleration, time);
}
scrollerobj.prototype.doSlide = function(target, acceleration, time){
this.step = Math.round(this.y*acceleration);
if (this.step<1) this.step = 1;
if (this.step>this.y) this.step = this.y;
this.moveBy(0, -this.step);
if (this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')', time);
else {
eval(this.slideFn);
this.slideFn = null;
}
}
scrollerobj.prototype.blend= function(vis, fn){
if (bw.ie5||bw.ie6 && !bw.mac) {
if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';
else this.css.filter= 'blendTrans(duration=0.6)';
this.elm.onfilterchange = function(){ eval(fn); };
this.elm.filters.blendTrans.apply();
this.css.visibility= vis;
this.elm.filters.blendTrans.play();
}
else if (bw.ns6 || bw.ie&&!bw.mac){
this.css.visibility= 'visible';
vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);
}
else {
this.css.visibility= vis;
eval(fn);
}
};
scrollerobj.prototype.op= 100;
scrollerobj.prototype.opacityTim= null;
scrollerobj.prototype.setOpacity= function(num){
this.css.filter= 'alpha(opacity='+num+')';
this.css.MozOpacity= num/100;
this.op= num;
}
scrollerobj.prototype.fadeTo= function(target, step, time, fn){
clearTimeout(this.opacityTim);
this.opacityFn= fn?fn:null;
this.op = target==100 ? 0 : 100;
this.fade(target, step, time);
}
scrollerobj.prototype.fade= function(target, step, time){
if (Math.abs(target-this.op)>step){
target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step);
this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')', time);
}
else {
this.setOpacity(target);
eval(this.opacityFn);
this.opacityFn= null;
}
}
var pageslidefadeLoaded = 0;
function initPageSlideFade(){
scroller1 = new scrollerobj('divScroller1');
pages = new Array();
for (var i=0; i<numScrollPages; i++){
pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');
pages[i].moveTo(0,0);
}
bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6
if (bw.ie5||bw.ie6 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters.
if (transitionOnload) activateContinue(0);
else{
activePage = pages[0];
activePage.showIt();
}
if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;
pageslidefadeLoaded = 1;
}
//if the browser is ok, the script is started onload..
if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;
</script>
注明：
var numScrollPages = 3 //Set the number of pages (layers) here. Add and remove the pages in the body too. The first layer is called dynPage0, the second is dynPage1, and so on.
var transitionOut = 1; //The 'out' effect... 0= no effect, 1= fade
var transitionIn = 2; //The 'in' effect... 0= no effect, 1= fade, 2= slide
var slideAcceleration = 0.2; //If you use the slide animation, set this somewhere between 0 and 1.
var transitionOnload = 1 //Use the 'in' transition when the page first loads? If you want the transition fx only when the links are clicked, you can set it to 0.
这里是属性的配置，注意第一项决定了切换页面的数目
复制代码到body
<div id="divScroller1">
<div id="dynPage0" class="dynPage">
文字内容
</div>
<div id="dynPage1" class="dynPage">
文字内容
</div>
<div id="dynPage2" class="dynPage">
文字内容
</div>
</div>
<div id="arrows">
<a href="#" onmouseover="scroll(6);" onclick="scroll(6); return false;" onmousedown="scroll(25)" onmouseout="stopScroll();"><img src="arrows_rounded_up.gif" width="20" height="17" alt="" border="0"></a>
<a href="#" onmouseover="scroll(-6);" onclick="scroll(-6); return false;" onmousedown="scroll(-25)" onmouseout="stopScroll();"><img src="arrows_rounded_down.gif" width="20" height="17" alt="" border="0"></a>
</div>
<div id="links">
<a href="#" onclick="activate(0); return false;">I</a><br>
<a href="#" onclick="activate(1); return false;">II</a><br>
<a href="#" onclick="activate(2); return false;">III</a><br>
</div>
注意文字层中使用的id号与前面切换页面数目配置的搭配