您的位置：首页 > Web前端 > JavaScript

Js_特效II

2015-07-22 18:54 591 查看

字号缩放
　　让文字大点，让更多的用户看的更清楚。(也可以把字体变为百分比来实现)
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span> 网页教学网http://www.webjx.com
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

　　跳转菜单新窗口
<select name="select" onchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.microsoft.com/ie"> Internet Explorer</option>
<option value="http://www.microsoft.com"> Microsoft Home</option>
<option value="http://msdn.microsoft.com"> Developer Network</option>
</select>

　　添加到收藏夹和设为首页

　　添加到收藏夹
<a href="javascript:window.external.addFavorite('http://链接','说明');">添加到收藏夹</a>

　　设为首页
<a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage ('http://链接');>设为首页</a>

　　打开窗口即最大化
<script language="JavaScript">

</script>

　　加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true">
对Netscape ,IE 都适用

　　防止点击空链接时，页面往往重置到页首端
　　代码“javascript:void(null)”代替原来的“#”标记，也可以用“#nogo”来代替啊？

　　自动换行
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
　　只对IE有用...FF的话用overflow:hidden来解决，不至于影响美观

1.不同时间段显示不同问候语

　　〈script Language="Javascript"〉　　〈!-- 　　var text=""; day = new Date( ); time = day.getHours( ); 　　if (( time〉=0) && (time 〈 7 )) 　　　　text="夜猫子，要注意身体哦! " 　　if (( time 〉= 7 ) && (time 〈 12)) 　　　　text="今天的阳光真灿烂啊，你那个朋友呢?" 　　if (( time 〉= 12) && (time 〈 14)) 　　　　text="午休时间。您要保持睡眠哦!" 　　if (( time 〉=14) && (time 〈 18)) 　　　　text="祝您下午工作愉快! " 　　if ((time 〉= 18) && (time 〈= 22)) 　　　　text="您又来了，可别和MM聊太久哦!" 　　if ((time 〉= 22) && (time 〈 24)) 　　　　text="您应该休息了!" 　　document.write(text) 　　//---〉　　〈/script〉

　　2.慢慢变大的窗口

　　〈script Language="Javascript"〉　　〈!-- 　　var Windowsheight=100 　　var Windowswidth=100 　　var numx=5 　　function openwindow(thelocation){ 　　temploc=thelocation 　　if 　　(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)) 　　{ 　　　　window.open(thelocation) 　　　　return 　　} 　　windowsize=window.open("","","scrollbars") 　　windowsize.moveTo(0,0) 　　windowsize.resizeTo(100,100) 　　tenumxt() 　　} 　　function tenumxt(){ 　　if (Windowsheight〉=screen.availHeight-3) 　　　　numx=0 　　windowsize.resizeBy(5,numx) 　　Windowsheight+=5 　　Windowswidth+=5 　　if (Windowswidth〉=screen.width-5) 　　{ 　　　　windowsize.location=temploc 　　　　Windowsheight=100 　　　　Windowswidth=100 　　　　numx=5 　　　　return 　　} 　　setTimeout("tenumxt()",50) 　　} 　　//--〉　　〈/script〉　　〈p〉〈a href="javascript:openwindow('http://www.ccjol.com')"〉进入〈/a〉

　　3.改变IE地址栏的IE图标

　　我们要先做一个16*16的icon(图标文件)，保存为index.ico。把这个图标文件上传到根目录下并在首页〈head〉〈/head〉之间加上如下代码：　　〈link REL = "Shortcut Icon" href="index.ico"〉

　　4.让网页随意后退

　　〈a href="javascript:history.go(-X)"〉X〈/a〉 //把X换成你想要后退在页数　　 //把“-”变成“+”就为前进

　　5.鼠标指向时弹出信息框

　　在〈body〉〈/body〉之间加上如下代码：　　〈a href onmouseover="alert('弹出信息!')"〉显示的链接文字〈/a〉

　　6.单击鼠标右键弹出添加收藏夹对话框

　　在〈body〉〈/body〉之间加上如下代码：　〈script Language=Javascript〉 if (document.all) 　　document.body.onmousedown=new Function("if (event.button==2||event.button==3) 　　window.external.addFavorite('您的网址','您的网站名称)") 　　〈/script〉

　　7.随机变换背景图象(一个可以刷新心情的特效)

　　在〈head〉〈/head〉之间加上如下代码：　　〈script Language="Javascript"〉　　image = new Array(4); //定义image为图片数量的数组　　image [0] = 'tu0.gif' //背景图象的路径　　image [1] = 'tu1.gif' 　　image [2] = 'tu2.gif' 　　image [3] = 'tu3.gif' 　　image [4] = 'tu4.gif' 　　number = Math.floor(Math.random() * image.length); 　　document.write("〈BODY BACKGROUND="+image[number]+"〉"); 　　〈/script〉

　　8.表格的半透明显示效果

　　〈head〉　　〈style〉　　.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度　　〈/style〉〈/head〉　　〈body〉　　〈table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" 〉　　〈tr〉　　〈td width="100%" height="62"〉　　〈div align="center"〉很酷吧!〈/div〉　　〈/td〉　　〈/tr〉　　〈/table〉〈/body〉

a. 拖动效果，16行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=gb2312" />
<title>Drag</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Drag me</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,s,x,y,d){
s = o.style;
d = document;
o.onselectstart = function(){ return false; }; //阻止选择
o.onmousedown = function(e){
e = e||event;
x = e.clientX-o.offsetLeft;
y = e.clientY-o.offsetTop;
d.onmousemove = function(e){
e = e||event;
s.left = e.clientX - x + "px";
s.top = e.clientY - y + "px";
}
d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
}
})(document.getElementById("w"))
</script>
</html>

b. 淡入淡出效果，8行
<!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=gb2312" />
<title>Fade</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Fade</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,i,s){
i=1;s=0.01;
setInterval(function(){
i+=s; s=i<0?0.01:(i>1?-0.01:s);
if(o.filters)o.filters[0].opacity=i*100;
else o.style.opacity=i;
},1);
})(document.getElementById("w"));
</script>
</html>

c. 固定位置浮动效果，9行
<!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=gb2312" />
<title>Fixed</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
.w { position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:218px; width:160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div class="w">
<div class="t">Demo Win - Fixed</div>
<div class="winBody">Hello world</div>
</div>
</body>
<script>
//测试用，随机产生一定的内容
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
//代码如下：
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
}
</script>
</html>

d. 滑动弹出效果，6行
<!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=gb2312" />
<title>Popup</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; }
#w { position:absolute; width:1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Popup</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,t,i,j,s){
i=j=1;s=o.style;
t=setInterval(function(){
o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));
},15);
})(document.getElementById("w"));
</script>
</html>

　3、让select控件可以自定义边框
<style>
.box2{border:1px solid #00ff00;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;}
select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;border:0px;color:#909993;}
</style>
<div class="box2"><select id=idselect1 onchange="select1();" hidefocus>
<option selected>网页名</option>
<option>网页制作</option>
<option>媒体动画</option>
<option>网站运营<option>
</select></div>

4、CSS圆角
<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<v:RoundRect style="position:relative;width:200;height:100px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
<v:textbox style="font-size:12px">css实现真正的圆角表格</v:textbox>
</v:RoundRect>
</body>
</html>

能够根据图片html代码自动生成右下角的数字导航按钮。

一句话函数调用，实现图片切换特效。

引用:

picChange("图片ul列表的id" , 切换图片的方法引用 , 图片切换时间 , 图片移动方向);

可扩展的封装方式，方便实现不同特效，源码中给出了淡出效果，和移出效果的实现方式。

使用方法示例：

引用:

//直接切换效果
picChange("picChange");
//淡出效果
picChange("picChange",fade,500);
//向上移出效果
picChange("picChange",move,500,"up");
//向下移出效果
picChange("picChange",move,500,"down");
//向左移出效果
picChange("picChange",move,500,"left");
//向右移出效果
picChange("picChange",move,500,"right");

收藏本站
<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.webjx.com','网页教学网')" title="网页教学网">收藏本站</span>

或：
<script Language="JavaScript">
　　function bookmarkit()
　　{
　　window.external.addFavorite('http://www.webjx.com','网页教学网')
　　}
　　if (document.all)document.write('<a href="#" onClick="bookmarkit()">加入收藏夹</a>')
　　</script>

通用的加入收藏夹
<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera && window.print ){
var mbm = document.createElement('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="javascript:bookmark()">加入收藏夹</a>

在IE6-7. FF2.0 OP9.0中测试通过

设为首页
<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webjx.com');" style="CURSOR: hand">设为首页</span>

返回页首
<img src="/imgs/top.gif" onClick="javascript:document.location='#top'" style="cursor:pointer;">

字号缩放

　　让文字大点，让更多的用户看的更清楚。(也可以把字体变为百分比来实现)

<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span> 网页教学网http://www.webjx.com
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

　　跳转菜单新窗口

<select name="select" onchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.microsoft.com/ie"> Internet Explorer</option>
<option value="http://www.microsoft.com"> Microsoft Home</option>
<option value="http://msdn.microsoft.com"> Developer Network</option>
</select>

　　添加到收藏夹和设为首页

　　添加到收藏夹

<a href="javascript:window.external.addFavorite('http://链接','说明');">添加到收藏夹</a>
　　设为首页

<a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage ('http://链接');>设为首页</a>

　　打开窗口即最大化

<script language="JavaScript">

</script>

　　加入背景音乐

<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true">
对Netscape ,IE 都适用

　　防止点击空链接时，页面往往重置到页首端

　　代码“javascript:void(null)”代替原来的“#”标记，也可以用“#nogo”来代替啊？

　　自动换行

style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
　　只对IE有用...FF的话用overflow:hidden来解决，不至于影响美观

<!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>炫光波动效果 - Zehee</title>
<script>
var lightWave = function(T,left,thick,sharp,speed,vibration,amplitude,opacity){
this.cont = T;//需要添加炫光的容器
this.left = left;//炫光出生时的向右偏移量
this.thick = thick;//粗细程度
this.sharp = sharp;//尖锐程度
this.speed = speed;//波动速度
this.vibration = vibration;//单位时间内的振动频率
this.amplitude = amplitude;//振幅
this.opacity = opacity;//透明度
this.cont.style.position = 'relative';
this.move();
}
lightWave.prototype = {
point:function(n,l,t,c,color){
var p = document.createElement('p');
p.innerHTML = ' ';
p.style.top = t + 'px';
p.style.left = l + 'px';
p.style.width = 1 + 'px';
p.style.height = n + 'px';
p.style.filter = 'alpha(opacity='+this.opacity+')';
p.style.lineHeight = 0;
p.style.position = 'absolute';
p.style.background = color;
c.appendChild(p);
return this;
},
color:function(){
var c = ['0','3','6','9','c','f'];
var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
t.sort(function(){return Math.random()>0.5?-1:1;});
return '#'+t.join('');
},
wave:function(){
var l = this.left,t = this.wavelength,color = this.color();
var c = document.createElement('div');
c.style.top = this.amplitude+20+'px';
c.style.position = 'absolute';
c.style.opacity = this.opacity/100;
for(var i=1;i<this.thick;i++){
for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
this.point(i,l,-9999,c,color);
}
}
for(var i=this.thick;i>0;i--){
for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
this.point(i,l,-9999,c,color);
}
}
this.cont.appendChild(c);
return c;
},
move:function(){
var wl = this.amplitude;
var vibration = this.vibration;
var w = this.wave().getElementsByTagName('p');
for(var i=0;i<w.length;i++){
w[i].i = i;
}
var m = function(){
for(var i=0,len=w.length;i<len;i++){
if(w[i].ori == true){
w[i].i-=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)<=-wl){
w[i].ori = false;
}
}else{
w[i].i+=vibration;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)>=wl){
w[i].ori = true;
}
}
}
}
setInterval(m,this.speed);
}
}
window.onload = function(){
var targetDom = document.body;
new lightWave(targetDom,0,3,36,120,6,20,40);
new lightWave(targetDom,50,2,70,120,10,30,30);
}
</script>
</head>
<body style="background:#000;margin-top:100px">
</body>
</html>

参数：
var lightWave = function (T,left,thick,sharp,speed,vibration,amplitude,opacity)
{
this .cont = T; //需要添加炫光的容器
this .left = left; //炫光出生时的向右偏移量
this .thick = thick; //粗细程度
this .sharp = sharp; //尖锐程度
this .speed = speed; //波动速度
this.vibration = vibration; //单位时间内的振动频率
this .amplitude = amplitude; //振幅
this .opacity = opacity; //透明度
this .cont.style.position = 'relative';
this .move();
}

<!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>炫光波动效果 - Zehee</title>
<script>
var lightWave = function(T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){
this.cont = T;//需要添加炫光的容器
this.hz = parseFloat(hz);//刷新率
this.top = parseFloat(top);//炫光出生时的向下偏移量
this.left = parseFloat(left);//炫光出生时的向右偏移量
this.thick = parseFloat(thick);//粗细程度
this.sharp = parseFloat(sharp);//尖锐程度
this.particle = parseFloat(particle);//组成粒子的大小
this.velocity = parseFloat(velocity);//波速
this.amplitude = parseFloat(amplitude);//振幅
this.opacity = parseFloat(opacity);//透明度
this.cont.style.position = 'relative';
this.move();
}
lightWave.prototype = {
point:function(n,left,t,wavecont,color,particle){
var p = document.createElement('p');
p.i = left;
p.innerHTML = ' ';
p.style.top = t + 'px';
p.style.left = left + 'px';
p.style.width = particle + 'px';
p.style.height = n + 'px';
p.style.filter = 'alpha(opacity='+this.opacity+')';
p.style.lineHeight = 0;
p.style.fontSize = 0;
p.style.position = 'absolute';
p.style.background = color;
wavecont.appendChild(p);
return this;
},
color:function(){
var c = ['0','3','6','9','c','f'];
var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
t.sort(function(){return Math.random()>0.5?-1:1;});
return '#'+t.join('');
},
wave:function(){
var left = this.left,t = this.wavelength,color = this.color(),particle = this.particle,l = 0;
var wavecont = document.createElement('div');
wavecont.style.top = this.amplitude+this.top+'px';
wavecont.style.left = left+'px';
wavecont.style.position = 'absolute';
wavecont.style.opacity = this.opacity/100;
for(var i=1;i<this.thick;i++){
for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
this.point(i,l*particle,-9999,wavecont,color,particle);
}
}
for(var i=this.thick;i>0;i--){
for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
this.point(i,l*particle,-9999,wavecont,color,particle);
}
}
this.cont.appendChild(wavecont);
return wavecont;
},
move:function(){
var wl = this.amplitude;
var velocity = this.velocity;
var w = this.wave().getElementsByTagName('p');
var m = function(){
for(var i=0,len=w.length;i<len;i++){
if(w[i].ori == true){
w[i].i-=velocity;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)<=-wl){
w[i].ori = false;
}
}else{
w[i].i+=velocity;
var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
w[i].style.top = top+'px';
if(parseFloat(w[i].style.top)>=wl){
w[i].ori = true;
}
}
}
}
setInterval(m,this.hz);
}
}
</script>
</head>
<body>
<div id="bar" style="font-size:12px;float:left;border:1px solid #666;padding:10px;">
<p><input id="hz" type="text" value="120" /><label>- 刷新率</label></p>
<p><input id="top" type="text" value="20" /><label>- 向下偏移量</label></p>
<p><input id="left" type="text" value="10" /><label>- 向左偏移量</label></p>
<p><input id="thick" type="text" value="3" /><label>- 粗细程度</label></p>
<p><input id="sharp" type="text" value="9" /><label>- 尖锐程度</label></p>
<p><input id="particle" type="text" value="4" /><label>- 粒子长度</label></p>
<p><input id="velocity" type="text" value="6" /><label>- 波速</label></p>
<p><input id="amplitude" type="text" value="20" /><label>- 振幅</label></p>
<p><input id="opacity" type="text" value="40" /><label>- 透明度</label></p>
<p><input type="button" value="生成" id="born" /> <input type="button" value="清除" id="clear" /></p>
</div>
<div id="waves" style="background:#000;width:600px;height:600px;float:left;margin-left:20px;dispaly:inline"> </div>
<script>
var waves = document.getElementById('waves');
var born = document.getElementById('born');
var clear = document.getElementById('clear');
born.onclick = function(){
var hz = document.getElementById('hz').value;
var top = document.getElementById('top').value;
var left = document.getElementById('left').value;
var thick = document.getElementById('thick').value;
var sharp = document.getElementById('sharp').value;
var particle = document.getElementById('particle').value;
var velocity = document.getElementById('velocity').value;
var amplitude = document.getElementById('amplitude').value;
var opacity = document.getElementById('opacity').value;
new lightWave(waves,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity);
}
clear.onclick = function(){window.location.reload();}
</script>
</body>
</html>

参数：
var lightWave = function (T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){
this .cont = T; //需要添加炫光的容器
this .hz = hz; //刷新率
this .top = top; //炫光出生时的向下偏移量
this .left = left; //炫光出生时的向右偏移量
this .thick = thick; //粗细程度
this .sharp = sharp; //尖锐程度
this .particle= particle; //粒子长度
this.velocity= velocity; //波速
this .amplitude = amplitude; //振幅
this .opacity = opacity; //透明度
this .cont.style.position = 'relative';
this .move();
}

a. 拖动效果

<!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=gb2312" />
<title>Drag</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Drag me</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,s,x,y,d){
s = o.style;
d = document;
o.onselectstart = function(){ return false; }; //阻止选择
o.onmousedown = function(e){
e = e||event;
x = e.clientX-o.offsetLeft;
y = e.clientY-o.offsetTop;
d.onmousemove = function(e){
e = e||event;
s.left = e.clientX - x + "px";
s.top = e.clientY - y + "px";
}
d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
}
})(document.getElementById("w"))
</script>
</html>

b. 淡入淡出效果
<!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=gb2312" />
<title>Fade</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Fade</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,i,s){
i=1;s=0.01;
setInterval(function(){
i+=s; s=i<0?0.01:(i>1?-0.01:s);
if(o.filters)o.filters[0].opacity=i*100;
else o.style.opacity=i;
},1);
})(document.getElementById("w"));
</script>
</html>

c. 固定位置浮动效果
<!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=gb2312" />
<title>Fixed</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
.w { position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:218px; width:160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div class="w">
<div class="t">Demo Win - Fixed</div>
<div class="winBody">Hello world</div>
</div>
</body>
<script>
//测试用，随机产生一定的内容
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
//代码如下：
new function(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="className";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
}
</script>
</html>

d. 滑动弹出效果
<!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=gb2312" />
<title>Popup</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; }
#w { position:absolute; width:1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
<div id="t">Demo Win - Popup</div>
<div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,t,i,j,s){
i=j=1;s=o.style;
t=setInterval(function(){
o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));
},15);
})(document.getElementById("w"));
</script>
</html>

图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示，当你进入一个网站时它的banner总是不同的，或者总有内容不同的提示（tips)，大家在网上浏览时会经常发现这样的例子。使用这种技术，不但能在一定的空间里放入更多的内容，还可以给人一种经常更新的假象喔。

怎么样心动了吧？其实只要你有一点点html和javascript 的基础，一切都是这么简单。follow me,让我们来看看她随机的奥密。

让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用<img src="图片">来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改，首先加入<script>标记：

以下是引用片段：
<script language=javascript></script>
然后在这段标记内把<img src="图片">用document.write("")的型式放进去，就成了
document.write("<img src=图片>")

现在我们来完成最关建的一段：

以下是引用片段：
id=Math.round(Math.random()*2)+1

这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif，ok！最后的代码是：

以下是引用片段：
<script language=javascript>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</script>

试一下，是不是不错？那如果我的每一张图片都对应了一个超链接该怎么办呢？
我们还是来假设一下有3张图片，1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
为了让图片和链接一一对应，我们要设置一个数组image来放置链接的地址，如下：

以下是引用片段：
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3"

为了将与图片对应的链接取出来，我们还要定义一个数组imageurl=image[id]
原理是这样的：
当页面被读入时，取一个随机数，假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到：imageurl=image[2]而image[2]="url2"，剩下的事就好办了。完整的代码如下：

以下是引用片段：
<script language=javascript>
var image=new Array(3)
image.length=3
image[1]="url1"
image[2]="url2"
image[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=image[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</script>

朋友，“天上掉陷饼”都听说过吧？呵呵，陷饼它算个么，今天教你一个天上掉￥的招儿，并且～～哗啦啦地掉！哈～哈～哈，来吧^_*

　　首先看效果

将下面的JavaScript代码加到< head >区就成了:

< Script Language="JavaScript" >
< !-- Begin
var no = 30;
//设定下落字符数量
var speed = 5;
//设定字符下落的速度
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
//NETSCAP和IE两种不同浏览器各自进行定义
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
//设定字符下落区域为800*600
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
//NETSCAP和IE两种浏览器有别
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
//定义变量数组x, y, cx, cy, s
if (ns4up) {
if (i == 0) {
document.write("< layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\" >< font color=\"white\" >");
document.write(",￥< /font >< /layer >");
}
else {
document.write("< layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\" >< font color=\"white\" >");
document.write(", $ < /font >< /layer >");
}
}
//当i==0满足与否时，NETSCAP中的表现
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 size=\"10\" color=\"white\" >");
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 size=\"10\" color=\"white\" >");
document.write(" $ < /font >< /div >"); //设定要下落的的字符（￥、$）及位置
}
}
//当i==0满足与不满足时，IE浏览器中的表现
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
//定义变量数组 a , sn , cs , cx, cy, s
if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
//在NETSCAP浏览器中的付值过程
if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {raindropNS(); }
else
if (ie4up) {raindropIE(); }
//在IE浏览器中的付值过程
// End -- >
< /Script >

实现跑马灯的方法很多，本文详细介绍JavaScript/JS实现标题栏跑马灯。

　　将下代码copy入你网页的和中的合适地方即可。

以下是引用片段：
<SCRIPT LANGUAGE=JAVASCRIPT>

</SCRIPT>

　　将你Html文件的改为如下：

以下是引用片段：
<BODY onload="window.setTimeout('titleScroll()', 500)">

　　注：如果您象我一样把它放在窗口中，请将document.title改为parent.document.title

function cls_marquee(id,id1,id2,sp){
this.obj_id=id;
this.obj_id1=id1;
this.obj_id2=id2;
this.speed=sp;
eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML");

function Marquee(){
if(eval(id2).offsetTop-eval(id).scrollTop<=0)
eval(id).scrollTop-=eval(id1).offsetHeight
else{
eval(id).scrollTop++
}
}
var MyMar=setInterval(Marquee,sp)
eval(this.obj_id).onmouseover=function() {clearInterval(MyMar)}
eval(this.obj_id).onmouseout=function() {MyMar=setInterval(Marquee,sp)}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航