Js_特效II

字号缩放
　　让文字大点，让更多的用户看的更清楚。(也可以把字体变为百分比来实现)
<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

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;">

字号缩放

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

　　跳转菜单新窗口

<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>
　　设为首页

　　打开窗口即最大化

　　加入背景音乐

<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来解决，不至于影响美观

参数：
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. 拖动效果

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

Js_特效II的更多相关文章

Js_特效
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
Aviutl 视频处理软件
素材类:No.009 倒放(Video) http://www.bilibili.com/video/av3078207/ No.010 倒放(Object) http ...
js_常见特效——点击切换_背景颜色_收起与展开
<script src="../js/jquery-1.8.3.min.js"></script><script type="text/ja ...
有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
PS图像特效算法——镜像渐隐
这个特效的实现,可以先利用前面提到的渐变特效,做一个图像的渐变, 然后将原图与渐变图对称放置,将背景设置成黑色. clc; clear all; close all; Image=imread('4. ...
matlab练习程序（水波特效）
还记得原来写过一个对图像进行波纹扭曲操作的博文. 这次实现的是水波特效,其实就是通过正余弦函数表示波纹中心位置慢慢向外扩散,通过叠加衰减因子使振幅不断减小,进而产生水波的效果. 效果如下: 原图: 波 ...
WEB入门.八背景特效
学习内容 background属性 CSS Sprite 技术滑动门技术能力目标使用background设置网页背景使用Sprites制作平滑投票特效使用滑动门技术实现Tab菜单本章简介 ...
谁说码农不懂浪漫？js写的'老婆生日快乐'特效
一直被老婆抱怨不懂浪漫,老婆的生日又来了,老婆指着闺蜜空间上贴的老公做的胡萝卜心形浪漫晚餐告诉我:必须送她一份用心的礼物.我绞尽脑汁想出这么一法子,还是得用我们码农的独特方式,经过一天多的努力,终于做 ...
谁说码农不懂浪漫？（js写的'老婆生日快乐'特效）
一直被老婆抱怨不懂浪漫,老婆的生日又来了,老婆指着闺蜜空间上贴的老公做的胡萝卜心形浪漫晚餐告诉我:必须送她一份用心的礼物.我绞尽脑汁想出这么一法子,还是得用我们码农的独特方式,经过一天多的努力,终于做 ...

随机推荐

《SQL Server 2008从入门到精通》--20180716
1.锁当多个用户同时对同一个数据进行修改时会产生并发问题,使用事务就可以解决这个问题.但是为了防止其他用户修改另一个还没完成的事务中的数据,就需要在事务中用到锁. SQL Server 2008提供 ...
linux通配符含义
linux通配符含义: . 当前目录**** .. 当前目录的上一级目录**** * 通配符,代表任意0个或多个字符***** ? 通配符,代表重复0个或一个0前面的字符 : ...
ln 硬链接介绍
硬链接:在linux文件系统中多个文件名指向同一个索引节点(Inode)是正常允许的.硬链接文件就相当于文件的另一个入口. 硬链接的作用:允许一个文件拥有多个有效路径(多个入口),这样用户就可以建立硬 ...
Linux centos6.5 系统语言改成中文简体
有时候上传的文件在linux上ls显示的时乱码,原因可能是系统语言编码问题,以Linux centos6.5为例,解决方法如下: 1.在root(皇帝)权限下更改: 查看当前所有语言环境:locale ...
How to Be Assertive Asking for What You Want Firmly and Fairly
What Is Assertiveness? It's not always easy to identify truly assertive behavior. This is because th ...
转战JS(1) 初探与变量类型、运算符、常用函数与转换
转战JS(1)初探与变量类型.运算符.常用函数与转换做为一名.NET后台开发人员,正考滤向Web前端开发转型,之前也写过一代前端代码,可是当再回头看JS,并有转向它的意愿的时候,突然发现:原来JS不 ...
leetcode 3. Longest Substring Without Repeating Characters [java]
idea: 设置一个hashset存储非重复元素 j:遍历s i:最近的一个非重复指针注意点: 1.Set set = new HashSet<>(); add remove publi ...
BZOJ 1208 宠物收养所 set+二分
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1208 题目大意: 最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠 ...
ATP学姐的模拟赛
ATPの水题大赛声明:不是我觉得这题水,这就是本场模拟赛的名称. T1:求所有的$n$位数中有几个数满足:每一位要么是$A$要么是$B$,并且这个$n$位数的每一位加起来是$A$或$B$的倍数. $ ...
1207. [HNOI2004]打鼹鼠【线性DP】
Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...

Js_特效II

引用:

引用:

Js_特效II的更多相关文章

随机推荐

热门专题