免費(fèi)AI編程助手
js特效代碼大全
2021-04-08 14:01 更新
鼠標(biāo)跟隨十字JS特效代碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>鼠標(biāo)跟隨十字JS特效代碼 | 編程獅(w3cschool.cn)</title></head>
<body style="margin: 0;">
<div id="html"></div>
<script type="text/javascript">
//
var ox = document.createElement('div');
var oy = document.createElement('div');
ox.style.width = '100%';
ox.style.height = '1px';
ox.style.backgroundColor = '#ddd';
ox.style.position = 'fixed';
ox.style.left = 0;
document.body.appendChild(ox);
oy.style.height = '100%';
oy.style.width = '1px';
oy.style.backgroundColor = '#ddd';
oy.style.position = 'fixed';
oy.style.top = 0;
document.body.appendChild(oy);
document.onmousemove = function(e){
var e = e || event;
var x = e.pageX;
var y = e.pageY;
ox.style.top = y + 'px';
oy.style.left = x + 'px';
document.getElementById('html'). innerHTML = 'x : ' + x + '<br/>y : ' + y;
};
</script>
</body>
</html>JS仿黑客帝國(guó)字母掉落效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS仿黑客帝國(guó)字母掉落效果 | 編程獅(w3cschool.cn)</title><style type=text/css>
.matrix{padding-right: 0px; padding-left: 0px; font-size: 10pt; padding-bottom: 0px; margin: 0px; width: 10px; padding-top: 0px; font-family: lucida console, courier, monotype; text-align: center}
</style>
</head>
<body bgColor=#fef4d9>
<center>JS仿黑客帝國(guó)字母掉落效果</center><br><center>
<SCRIPT language=JavaScript type=text/javascript>
var rows=11; // must be an odd number
var speed=50; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);
ma_tab.style.backgroundColor="#000000";
ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval("mytricks()", speed);
}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color="#33ff66";
matemp.style.fontWeight="bold";
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout("zoomer("+ycol+")", speed);
}
}
// -->
</SCRIPT>
</center>
</body>
</html>javascript顯示年月日時(shí)間代碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>javascript顯示年月日時(shí)間代碼 | 編程獅(w3cschool.cn)</title> <script language=Javascript>
function time(){
//獲得顯示時(shí)間的div
t_div = document.getElementById('showtime');
var now=new Date()
//替換div內(nèi)容
t_div.innerHTML = "現(xiàn)在是"+now.getFullYear()
+"年"+(now.getMonth()+1)+"月"+now.getDate()
+"日"+now.getHours()+"時(shí)"+now.getMinutes()
+"分"+now.getSeconds()+"秒";
//等待一秒鐘后調(diào)用time方法，由于settimeout在time方法內(nèi)，所以可以無(wú)限調(diào)用
setTimeout(time,1000);
}
</script>
</head>
<body onload="time()">
<div id="showtime"></div>
</body>
</html>JS阻止鏈接跳轉(zhuǎn)代碼
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS阻止鏈接跳轉(zhuǎn) | 編程獅(w3cschool.cn)</title></head>
<body>
<div align="center">
<table width="300" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#66CCFF">
<tr>
<td align="center"><a href="http://hgci.cn/" id="testLink">點(diǎn)擊此鏈接</a>
<script type="text/javascript">var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('鏈接地址是：' + this.href + ', 不過(guò)不會(huì)直接跳轉(zhuǎn)');
stopDefault(e);
}
</script></td>
</tr>
</table>
</div>
</body>
</html>JS測(cè)試顯示器分辨率
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS測(cè)試顯示器分辨率 | 編程獅(w3cschool.cn)</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write('您的顯示器分辨率為:\n' + screen.width + '*' + screen.height + ' pixels');
// End -->
</SCRIPT>
<p><script type="text/javascript" src="http://hgci.cn/"></script></p>
</body>
</html>用JS實(shí)現(xiàn)的radio圖片選擇按鈕效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>用JS實(shí)現(xiàn)的radio圖片選擇按鈕效果 | 編程獅(w3cschool.cn)</title>
<style>
.w3cschool img{border:1px solid #008800;}
</style>
</head>
<body>
<script>
function myFun(sId) {
var oImg = document.getElementsByTagName('img');
for (var i = 0; i < oImg.length; i++) {
if (oImg[i].id == sId) {
oImg[i].previousSibling.previousSibling.checked = true;
oImg[i].style.border = '1px solid #FF6600';
} else {
oImg[i].style.border = '1px solid #008800';
}
}
}
</script>
<div class="w3cschool">
<input type="radio" value= "w3cschool" id= "111" name="aaa" style="display:none"> <img id="aa" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" onclick="myFun(this.id)">
<input type="radio" value= "w3cschool" id= "222" name="aaa" style="display:none"> <img id="bb" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" onclick="myFun(this.id)">
<input type="radio" value= "w3cschool" id= "333" name="aaa" style="display:none"> <img id="cc" src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" onclick="myFun(this.id)">
</div>
<p>用JS實(shí)現(xiàn)的radio圖片選擇按鈕效果，可應(yīng)用在dedecms的留言板程序上。</p>
<p>注意：input后面的空格。</p>>
</body>
</html>超酷JS拖拽翻頁(yè)效果
<html>
<head>
<title>超酷JS拖拽翻頁(yè)效果 | 編程獅(w3cschool.cn)</title><meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
body{
border:0px;
margin:0px;
overflow:hidden;
background-color:transparent;
font-family:宋體;
}
.page{
position:absolute;
width:700px;
border:1px solid #999;
background-color:#000;
left:425px;
margin-left:-350px;
cursor:default;
z-index:0;
}
ul{
height:320px;
list-style:none;
margin:40px 50px 0px;
padding:0px;
}
li{
width:100%;
height:30px;
line-height:30px;
font-size:14px;
text-align:left;
border-bottom:1px dashed #999;
}
a{
text-decoration:none;
color:#999;
}
a:hover{
font-weight:bold;
}
li span{
float:right;
color:#999;
}
.tip{
display:block;
width:100%;
font-size:12px;
color:#999;
text-align:center;
margin:10px 0px 20px;
}
</style>
</head>
<body onselectstart="return false;">
<script>
function id(obj){
return document.getElementById(obj);
}
var page;
var lm,mx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=document.getElementsByTagName("div");
if(page.length>0){
page[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].className="page";
page[i].innerHTML+="<span class=tip>第 "+(i+1)+"/"+page.length+" 頁(yè) 提示：左右拖拽翻頁(yè)</span>";
page[i].id="page"+i;
page[i].i=i;
page[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
lm=this.offsetLeft;
mx=(e.pageX)?e.pageX:e.x;
this.style.cursor="w-resize";
md=true;
if(document.all){
this.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=function(e){
if(md){
en=true;
if(!e){e=e||window.event;}
var ex=(e.pageX)?e.pageX:e.x;
this.style.left=ex-(mx-lm)+350;
if(this.offsetLeft<75){
var cu=(this.i==0)?page.length-1:this.i-1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
if(this.offsetLeft>75){
var cu=(this.i==page.length-1)?0:this.i+1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="default";
md=false;
if(document.all){
this.releaseCapture();
}else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
flyout(this);
}
}
}
function flyout(obj){
if(obj.offsetLeft<75){
if( (obj.offsetLeft + 350 - 20) > -275 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}else{
obj.style.left=-275;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
if(obj.offsetLeft>75){
if( (obj.offsetLeft + 350 + 20) < 1125 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}else{
obj.style.left=1125;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
function flyin(obj){
if(obj.offsetLeft<75){
if( (obj.offsetLeft + 350 + 20) < 425 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=425;
en=false;
}
}
if(obj.offsetLeft>75){
if( (obj.offsetLeft + 350 - 20) > 425 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=425;
en=false;
}
}
}
</script>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>東方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>啊！停不住的愛(ài)人</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>寧?kù)o溫泉</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>你的樣子</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>戀曲1980</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>戀曲1990</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>戀曲2000</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>亞細(xì)亞的孤兒</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>伴侶</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>愛(ài)的箴言</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>愛(ài)人同志</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>思念</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>母親</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>是否</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>牧童</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>青春舞曲</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>蒲公英</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>未來(lái)的主人翁</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>如今才是唯一</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>暗戀</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>彈唱詞</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>飛車</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>東方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>滾滾紅塵</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>光陰的故事</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>之乎者也</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>現(xiàn)象七十二變</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>鄉(xiāng)愁四韻</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>穿過(guò)你的黑發(fā)我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>大兵歌</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>歌</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>黃色面孔</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>臺(tái)北紅玫瑰</a></li>
<li><span>2009-4-9 12:35</span><a href=http://hgci.cn/>我所不能了解的事</a></li>
</ul>
</div>
</body>
</html>JS動(dòng)態(tài)平滑滾動(dòng)菜單效果
<html>
<head>
<title>JS動(dòng)態(tài)平滑滾動(dòng)菜單效果 | 編程獅(w3cschool.cn)</title><style type="text/css">
body {cursor:crosshair; background:#111; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;}
.link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;}
.title {position:relative;cursor:pointer;background:#333;width:100%;color:#fff;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;}
.text {position:relative;text-align:justify;margin:10px;font-family:verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}
</style>
<script type="text/javascript"><!--
var object = new Array();
function Slide(N,oCont){
this.N = N;
this.S = 1.1;
this.object = new Array();
this.CObj = function (parent,N){
this.parent = parent;
this.N = N;
this.obj = parent.frm[N];
this.tit = this.obj.firstChild;
this.div = this.obj.getElementsByTagName("div")[1];
this.div.style.visibility = "hidden";
this.y0 = N * 18;
this.Y1 = this.y0;
this.obj.style.top = this.y0;
this.obj.style.height = parent.H - (parent.NF-1) * 18 - 3;
this.obj.style.visibility = "visible";
this.obj.parent = this;
this.run = false;
this.move = function(){
with(this){
dy = (y1-y0)/parent.S;
if(Math.abs(dy)>.1){
y0+=dy;
obj.style.top = Math.round(y0);
setTimeout("object["+parent.N+"].object["+N+"].move();", 16);
} else {
run = false;
if(dy>0)div.style.visibility="hidden";
else if(N>0)parent.object[N-1].div.style.visibility="hidden";
}
}
}
this.obj.onmouseover = function(){
with(this.parent){
if(!run){
run = true;
div.style.visibility="visible";
for(i=0;i<parent.NF;i++)parent.object[i].tit.className = "title";
tit.className = "title_o";
for(i=0;i<=N;i++){
parent.object[i].y1 = i*18;
parent.object[i].move();
}
for(i=N+1;i<parent.NF;i++){
parent.object[i].y1 = parent.H-(parent.NF-i)*18;
parent.object[i].move();
}
}
}
}
}
this.frm = document.getElementById(oCont);
this.H = parseInt(this.frm.style.height);
this.frm = this.frm.getElementsByTagName("span");
this.NF = this.frm.length;
for(i=0;i<this.NF;i++) this.object[i] = new this.CObj(this, i);
this.object[0].obj.onmouseover();
this.S = 10;
}
onload = function() {
object[0] = new Slide(0, "frames");
}
//-->
</script></head><body>
<div style="position: absolute; left: 50%; top: 50%;">
<div id="frames" style="overflow: hidden; position: absolute; width: 200px; height: 340px; left: -100px; top: -170px;">
<span style="top: 0pt; height: 211px; visibility: visible;" class="link"><div class="title_o"></div>
<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: visible;">
The Circle of Life
</div>
</span>
<span style="top: 213px; height: 211px; visibility: visible;" class="link"><div class="title">Programmer to Module Leader:</div>
<div style="visibility: hidden;" class="text">
"This is not possible. **Impossible**. It will involve design change
and no body in our team knows the design of the system. And above that
nobody in our company knows the language in which this software has
been written. So even if somebody wants to work on it, they can't. If
you ask my personal opinion the company should never take these type of
projects." </div>
</span>
<span style="top: 231px; height: 211px; visibility: visible;" class="link"><div class="title">Module Leader to Project Manager:</div>
<div style="visibility: hidden;" class="text">
"This project will involve design change. Currently we don't have
people who have experience in this type of work. Also the language is
unknown so we will have to arrange for some training if we take this
project. In my personal opinion, we should avoid taking this project." </div>
</span>
<span style="top: 249px; height: 211px; visibility: visible;" class="link"><div class="title">Project Manager to 1st Level Manager:</div>
<div style="visibility: hidden;" class="text">
"This project involves design change in the system and we don't have
much experience in that area. Also not many people are trained in this
area. In my personal opinion we can take the project but we should ask
for some more time." </div>
</span>
<span style="top: 267px; height: 211px; visibility: visible;" class="link"><div class="title">1st Level Manager to 2nd Level Manager:</div>
<div style="visibility: hidden;" class="text">
"This project involves design re-engineering. We have some people who
have worked in this area and some who know the language. So they can
train other people. In my personal opinion we should take this project
but with caution." </div>
</span>
<span style="top: 285px; height: 211px; visibility: visible;" class="link"><div class="title">2nd Level Manager to CEO:</div>
<div style="visibility: hidden;" class="text">
"This project will show the industry our capabilities in remodeling the
design of a complete system. We have all the necessary skills and
people to execute this project successfully. Some people have already
given in-house training in this area to other people. In my personal
opinion we should not let this project go by under any circumstance." </div>
</span>
<span style="top: 303px; height: 211px; visibility: visible;" class="link"><div class="title">CEO to Client:</div>
<div style="visibility: hidden;" class="text">
"These are the type of projects in which our company specialize. We
have executed many project of the same nature for many big clients.
Trust me when I say that you are in the safest hand in the Industry. In
my personal opinion we can execute this project successfully and that
too well with in the given time frame." </div>
</span>
<span style="top: 321px; height: 211px; visibility: visible;" class="link"><div class="title"></div>
<div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: hidden;">
The End
</div>
</span>
</div>
</div>
</body></html>JS城市聯(lián)動(dòng)菜單
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>城市聯(lián)動(dòng)菜單 | 編程獅(w3cschool.cn)</title>
<style type="text/css">
ul,li,dl,dd {
padding:0;
margin:0;
list-style-type:none;
}
.menu1{
width:182px;
border:1px solid #feb951;
background:#fef4ea;
padding-top:3px;
font-size:12px;
}
.area li{
height:22px;
line-height:22px;
text-align:left;
position:relative;
}
.area li a {
display:block;
padding-left:20px;
}
.area li dl {
width:180px;
overflow:hidden;
display:none;
position:absolute;
top:-1px;
right:-182px;
z-index:35533;
border:1px solid #feb951;
background:#fef4ea;
padding:5px 0;
}
.area li dl a:hover {
border:1px solid #feb951;
background:#fff;
margin:0 5px;
padding-left:14px;
}
.area li.lion {
height:20px;
line-height:20px;
text-align:left;
border-top:1px solid #ffb850;
border-bottom:1px solid #ffb850;
background:#ffe7cc;
}
.area li.lion dl {display:block;}
</style>
</head>
<body>
<div id="rtab2_box" class="menu1">
<ul id="area" class="area">
<li><a href="/a_01/">安徽省</a>
<dl>
<dd><a href="/a_010100/">安慶市</a></dd>
<dd><a href="/a_010200/">蚌埠市</a></dd>
<dd><a href="/a_010300/">亳州市</a></dd>
<dd><a href="/a_010400/">巢湖市</a></dd>
<dd><a href="/a_010500/">滁州市</a></dd>
<dd><a href="/a_010600/">阜陽(yáng)市</a></dd>
<dd><a href="/a_010700/">合肥市</a></dd>
<dd><a href="/a_010800/">淮北市</a></dd>
<dd><a href="/a_010900/">淮南市</a></dd>
<dd><a href="/a_011000/">黃山市</a></dd>
<dd><a href="/a_011100/">六安市</a></dd>
<dd><a href="/a_011200/">馬鞍山市</a></dd>
<dd><a href="/a_011300/">宿州市</a></dd>
<dd><a href="/a_011400/">太湖市</a></dd>
<dd><a href="/a_011500/">蕪湖市</a></dd>
<dd><a href="/a_011600/">歙縣</a></dd>
<dd><a href="/a_011700/">宣城市</a></dd>
<dd><a href="/a_011800/">池城市</a></dd>
<dd><a href="/a_011900/">銅陵市</a></dd>
</dl>
</li>
<li><a href="/a_02/">北京</a>
<dl>
<dd><a href="/a_020100/">昌平區(qū)</a></dd>
<dd><a href="/a_020200/">朝陽(yáng)區(qū)</a></dd>
<dd><a href="/a_020300/">崇文區(qū)</a></dd>
<dd><a href="/a_020400/">大興區(qū)</a></dd>
<dd><a href="/a_020500/">東城區(qū)</a></dd>
<dd><a href="/a_020600/">房山區(qū)</a></dd>
<dd><a href="/a_020700/">豐臺(tái)區(qū)</a></dd>
<dd><a href="/a_020800/">海淀區(qū)</a></dd>
<dd><a href="/a_020900/">懷柔區(qū)</a></dd>
<dd><a href="/a_021000/">門頭溝區(qū)</a></dd>
<dd><a href="/a_021100/">密云縣</a></dd>
<dd><a href="/a_021200/">平谷區(qū)</a></dd>
<dd><a href="/a_021300/">石景山區(qū)</a></dd>
<dd><a href="/a_021400/">順義區(qū)</a></dd>
<dd><a href="/a_021500/">通州區(qū)</a></dd>
<dd><a href="/a_021600/">西城區(qū)</a></dd>
<dd><a href="/a_021700/">宣武區(qū)</a></dd>
<dd><a href="/a_021800/">延慶縣</a></dd>
<dd><a href="/a_021900/">燕山區(qū)</a></dd>
</dl>
</li>
<li><a href="/a_03/">重慶</a>
<dl>
<dd><a href="/a_030100/">巴南區(qū)</a></dd>
<dd><a href="/a_030200/">北碚區(qū)</a></dd>
<dd><a href="/a_030300/">璧山縣</a></dd>
<dd><a href="/a_030400/">長(zhǎng)壽區(qū)</a></dd>
<dd><a href="/a_030500/">城口縣</a></dd>
<dd><a href="/a_030600/">大足縣</a></dd>
<dd><a href="/a_030700/">墊江縣</a></dd>
<dd><a href="/a_030800/">渡口區(qū)</a></dd>
<dd><a href="/a_030900/">豐都縣</a></dd>
<dd><a href="/a_031000/">奉節(jié)縣</a></dd>
<dd><a href="/a_031100/">涪陵區(qū)</a></dd>
<dd><a href="/a_031200/">涪陵市</a></dd>
<dd><a href="/a_031300/">合川市</a></dd>
<dd><a href="/a_031400/">江北區(qū)</a></dd>
<dd><a href="/a_031500/">江津市</a></dd>
<dd><a href="/a_031600/">九龍坡區(qū)</a></dd>
<dd><a href="/a_031700/">開縣</a></dd>
<dd><a href="/a_031800/">梁平縣</a></dd>
<dd><a href="/a_031900/">南岸區(qū)</a></dd>
<dd><a href="/a_032000/">南川市</a></dd>
<dd><a href="/a_032100/">彭水</a></dd>
<dd><a href="/a_032200/">綦江縣</a></dd>
<dd><a href="/a_032300/">黔江區(qū)</a></dd>
<dd><a href="/a_032400/">榮昌縣</a></dd>
<dd><a href="/a_032500/">沙坪壩區(qū)</a></dd>
<dd><a href="/a_032600/">石柱</a></dd>
<dd><a href="/a_032700/">雙橋區(qū)</a></dd>
<dd><a href="/a_032800/">銅梁縣</a></dd>
<dd><a href="/a_032900/">潼南縣</a></dd>
<dd><a href="/a_033000/">萬(wàn)盛區(qū)</a></dd>
<dd><a href="/a_033100/">萬(wàn)縣市</a></dd>
<dd><a href="/a_033200/">萬(wàn)州區(qū)</a></dd>
<dd><a href="/a_033300/">巫山縣</a></dd>
<dd><a href="/a_033400/">巫溪縣</a></dd>
<dd><a href="/a_033500/">武隆縣</a></dd>
<dd><a href="/a_033600/">秀山</a></dd>
<dd><a href="/a_033700/">永川市</a></dd>
<dd><a href="/a_033800/">酉陽(yáng)</a></dd>
<dd><a href="/a_033900/">渝北區(qū)</a></dd>
<dd><a href="/a_034000/">云陽(yáng)縣</a></dd>
<dd><a href="/a_034100/">忠縣</a></dd>
<dd><a href="/a_034200/">渝中區(qū)</a></dd>
</dl>
</li>
<li><a href="/a_04/">福建省</a>
<dl>
<dd><a href="/a_040100/">福州市</a></dd>
<dd><a href="/a_040200/">龍巖市</a></dd>
<dd><a href="/a_040300/">南平市</a></dd>
<dd><a href="/a_040400/">寧德市</a></dd>
<dd><a href="/a_040500/">莆田市</a></dd>
<dd><a href="/a_040600/">泉州市</a></dd>
<dd><a href="/a_040700/">三明市</a></dd>
<dd><a href="/a_040800/">邵武市</a></dd>
<dd><a href="/a_040900/">石獅市</a></dd>
<dd><a href="/a_041000/">廈門市</a></dd>
<dd><a href="/a_041100/">永安市</a></dd>
<dd><a href="/a_041200/">漳州市</a></dd>
</dl>
</li>
<li><a href="/a_05/">甘肅省</a>
<dl>
<dd><a href="/a_050100/">白銀市</a></dd>
<dd><a href="/a_050200/">定西市</a></dd>
<dd><a href="/a_050300/">甘南</a></dd>
<dd><a href="/a_050400/">嘉峪關(guān)市</a></dd>
<dd><a href="/a_050500/">金昌市</a></dd>
<dd><a href="/a_050600/">酒泉市</a></dd>
<dd><a href="/a_050700/">蘭州市</a></dd>
<dd><a href="/a_050800/">臨夏市</a></dd>
<dd><a href="/a_050900/">隴南市</a></dd>
<dd><a href="/a_051000/">平?jīng)鍪?lt;/a></dd>
<dd><a href="/a_051100/">慶陽(yáng)市</a></dd>
<dd><a href="/a_051200/">天水市</a></dd>
<dd><a href="/a_051300/">武威市</a></dd>
<dd><a href="/a_051400/">西峰市</a></dd>
<dd><a href="/a_051500/">玉門市</a></dd>
<dd><a href="/a_051600/">張掖市</a></dd>
</dl>
</li>
<li><a href="/a_06/">廣東省</a>
<dl>
<dd><a href="/a_060100/">潮州市</a></dd>
<dd><a href="/a_060200/">潮陽(yáng)市</a></dd>
<dd><a href="/a_060300/">東莞市</a></dd>
<dd><a href="/a_060400/">佛山市</a></dd>
<dd><a href="/a_060500/">廣州市</a></dd>
<dd><a href="/a_060600/">河源市</a></dd>
<dd><a href="/a_060700/">惠州市</a></dd>
<dd><a href="/a_060800/">江門市</a></dd>
<dd><a href="/a_060900/">揭陽(yáng)</a></dd>
<dd><a href="/a_061000/">茂名市</a></dd>
<dd><a href="/a_061100/">梅州市</a></dd>
<dd><a href="/a_061200/">清遠(yuǎn)市</a></dd>
<dd><a href="/a_061300/">汕頭市</a></dd>
<dd><a href="/a_061400/">汕尾市</a></dd>
<dd><a href="/a_061500/">韶關(guān)市</a></dd>
<dd><a href="/a_061600/">深圳市</a></dd>
<dd><a href="/a_061700/">順德</a></dd>
<dd><a href="/a_061800/">陽(yáng)江市</a></dd>
<dd><a href="/a_061900/">云浮</a></dd>
<dd><a href="/a_062000/">湛江市</a></dd>
<dd><a href="/a_062100/">肇慶市</a></dd>
<dd><a href="/a_062200/">中山市</a></dd>
<dd><a href="/a_062300/">珠海</a></dd>
<dd><a href="/a_062400/">恩平市</a></dd>
</dl>
</li>
<li><a href="/a_07/">廣西省</a>
<dl>
<dd><a href="/a_070100/">百色市</a></dd>
<dd><a href="/a_070200/">北海市</a></dd>
<dd><a href="/a_070300/">崇左市</a></dd>
<dd><a href="/a_070400/">防城港市</a></dd>
<dd><a href="/a_070500/">貴港市</a></dd>
<dd><a href="/a_070600/">桂林市</a></dd>
<dd><a href="/a_070700/">合山市</a></dd>
<dd><a href="/a_070800/">河池市</a></dd>
<dd><a href="/a_070900/">賀州市</a></dd>
<dd><a href="/a_071000/">來(lái)賓市</a></dd>
<dd><a href="/a_071100/">柳州市</a></dd>
<dd><a href="/a_071200/">南寧市</a></dd>
<dd><a href="/a_071300/">憑祥市</a></dd>
<dd><a href="/a_071400/">欽州市</a></dd>
<dd><a href="/a_071500/">梧州市</a></dd>
<dd><a href="/a_071600/">玉林市</a></dd>
</dl>
</li>
<li><a href="/a_08/">貴州省</a>
<dl>
<dd><a href="/a_080100/">安順市</a></dd>
<dd><a href="/a_080200/">畢節(jié)市</a></dd>
<dd><a href="/a_080300/">赤水市</a></dd>
<dd><a href="/a_080400/">都勻市</a></dd>
<dd><a href="/a_080500/">貴陽(yáng)市</a></dd>
<dd><a href="/a_080600/">凱里市</a></dd>
<dd><a href="/a_080700/">六盤水市</a></dd>
<dd><a href="/a_080800/">銅仁市</a></dd>
<dd><a href="/a_080900/">興義市</a></dd>
<dd><a href="/a_081000/">遵義市</a></dd>
</dl>
</li>
<li><a href="/a_09/">海南省</a>
<dl>
<dd><a href="/a_090100/">白沙</a></dd>
<dd><a href="/a_090200/">保亭</a></dd>
<dd><a href="/a_090300/">昌江</a></dd>
<dd><a href="/a_090400/">澄邁縣</a></dd>
<dd><a href="/a_090500/">儋州市</a></dd>
<dd><a href="/a_090600/">定安縣</a></dd>
<dd><a href="/a_090700/">東方</a></dd>
<dd><a href="/a_090800/">?？谑?lt;/a></dd>
<dd><a href="/a_090900/">樂(lè)東</a></dd>
<dd><a href="/a_091000/">臨高縣</a></dd>
<dd><a href="/a_091100/">陵水</a></dd>
<dd><a href="/a_091200/">瓊海</a></dd>
<dd><a href="/a_091300/">瓊中</a></dd>
<dd><a href="/a_091400/">三亞市</a></dd>
<dd><a href="/a_091500/">通什市</a></dd>
<dd><a href="/a_091600/">屯昌縣</a></dd>
<dd><a href="/a_091700/">萬(wàn)寧</a></dd>
<dd><a href="/a_091800/">文昌</a></dd>
<dd><a href="/a_091900/">五指山</a></dd>
</dl>
</li>
<li><a href="/a_10/">河北省</a>
<dl>
<dd><a href="/a_100100/">保定市</a></dd>
<dd><a href="/a_100200/">泊頭市</a></dd>
<dd><a href="/a_100300/">滄州市</a></dd>
<dd><a href="/a_100400/">承德市</a></dd>
<dd><a href="/a_100500/">定州市</a></dd>
<dd><a href="/a_100600/">邯鄲市</a></dd>
<dd><a href="/a_100700/">衡水市</a></dd>
<dd><a href="/a_100800/">廊坊市</a></dd>
<dd><a href="/a_100900/">南宮市</a></dd>
<dd><a href="/a_101000/">秦皇島市</a></dd>
<dd><a href="/a_101100/">任丘市</a></dd>
<dd><a href="/a_101200/">沙河市</a></dd>
<dd><a href="/a_101300/">石家莊市</a></dd>
<dd><a href="/a_101400/">唐山市</a></dd>
<dd><a href="/a_101500/">辛集市</a></dd>
<dd><a href="/a_101600/">邢臺(tái)市</a></dd>
<dd><a href="/a_101700/">張家口市</a></dd>
<dd><a href="/a_101800/">涿州市</a></dd>
</dl>
</li>
<li><a href="/a_11/">河南省</a>
<dl>
<dd><a href="/a_110100/">安陽(yáng)市</a></dd>
<dd><a href="/a_110200/">鶴壁市</a></dd>
<dd><a href="/a_110300/">濟(jì)源</a></dd>
<dd><a href="/a_110400/">焦作市</a></dd>
<dd><a href="/a_110500/">開封市</a></dd>
<dd><a href="/a_110600/">漯河市</a></dd>
<dd><a href="/a_110700/">洛陽(yáng)市</a></dd>
<dd><a href="/a_110800/">南陽(yáng)市</a></dd>
<dd><a href="/a_110900/">平頂山市</a></dd>
<dd><a href="/a_111000/">濮陽(yáng)市</a></dd>
<dd><a href="/a_111100/">三門峽市</a></dd>
<dd><a href="/a_111200/">商丘市</a></dd>
<dd><a href="/a_111300/">新鄉(xiāng)市</a></dd>
<dd><a href="/a_111400/">信陽(yáng)市</a></dd>
<dd><a href="/a_111500/">許昌市</a></dd>
<dd><a href="/a_111600/">義馬市</a></dd>
<dd><a href="/a_111700/">鄭州市</a></dd>
<dd><a href="/a_111800/">周口市</a></dd>
<dd><a href="/a_111900/">駐馬店市</a></dd>
</dl>
</li>
<li><a href="/a_12/">黑龍江省</a>
<dl>
<dd><a href="/a_120100/">阿城市</a></dd>
<dd><a href="/a_120200/">北安市</a></dd>
<dd><a href="/a_120300/">大慶市</a></dd>
<dd><a href="/a_120400/">大興安嶺</a></dd>
<dd><a href="/a_120500/">哈爾濱市</a></dd>
<dd><a href="/a_120600/">鶴崗市</a></dd>
<dd><a href="/a_120700/">黑河市</a></dd>
<dd><a href="/a_120800/">雞西市</a></dd>
<dd><a href="/a_120900/">佳木斯市</a></dd>
<dd><a href="/a_121000/">牡丹江市</a></dd>
<dd><a href="/a_121100/">七臺(tái)河市</a></dd>
<dd><a href="/a_121200/">齊齊哈爾市</a></dd>
<dd><a href="/a_121300/">雙鴨山市</a></dd>
<dd><a href="/a_121400/">綏汾河市</a></dd>
<dd><a href="/a_121500/">綏化市</a></dd>
<dd><a href="/a_121600/">同江市</a></dd>
<dd><a href="/a_121700/">五大連池市</a></dd>
<dd><a href="/a_121800/">伊春市</a></dd>
<dd><a href="/a_121900/">肇東市</a></dd>
</dl>
</li>
</ul>
</div>
<script type=text/javascript>
function onload() {
try{
var lies = document.getElementById("area").getElementsByTagName("li");
for (var i=0; i< lies.length; i++) {
lies[i].onmouseover= function() {
this.className="lion";
}
lies[i].onmouseout= function() {
this.className="";
}
}
}
catch(e){}
}
onload();
</script>
</body>
</html>JS實(shí)現(xiàn)的幻燈上滾效果
<script>
var marqueeContent=new Array(); //滾動(dòng)新聞
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">小泉稱若自民黨在議會(huì)選舉中失敗</a><br>';
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布什發(fā)表廣播講話</a><br>';
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">伊斯蘭武裝炸毀印控克什米爾鐵路導(dǎo)致列車出軌</a><br>';
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布雷默：即使抓住了薩達(dá)姆也難以結(jié)束抵抗行動(dòng)</a><br>';
var marqueeInterval=new Array(); //定義一些常用而且要經(jīng)常用到的變量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
//接下來(lái)的是定義一些要使用到的函數(shù)
function initMarquee() {
var str=marqueeContent[0];
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>JS文字球狀放大效果
<html>
<head>
<title>JS文字球狀放大效果 | 編程獅(w3cschool.cn)</title><meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
span {position:absolute;font-family: verdana; font-weight: bold;}
</style>
<script type="text/javascript"><!--
T = "What is real?How do you define real? Ifyou're talkingabout what youcan feel whatyou can smellwhat you cantaste and seethen real issimply electrical signalsinterpreted byyour brain! ";
I = 0;
o = new Array();
xm = -1000;
ym = -1000;
///////////////
rad = 80;
dim = 200;
///////////////
W = 0;
H = 0;
NX = 14;
NY = 14;
var nx;
var ny;
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = (e.x || e.clientX) - (nx * .5) + dim * .5;
ym = (e.y || e.clientY) - (ny * .5) + dim * .5;
}
function resize() {
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
}
onresize = resize;
function CObj(N,i,j,c){
this.obj = document.createElement("span");
this.obj.innerHTML = c;
DOOT.appendChild(this.obj);
this.N = N;
this.To = 16;
this.x0 = i*2*W;
this.y0 = j*2*H;
this.anim = true;
this.mainloop = function(){
with (this) {
dx = xm - x0;
dy = ym - y0;
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < rad) {
anim = true;
M = Math.cos(.5 * Math.PI * Math.abs(dist / rad));
c = Math.round(84 + M * 171);
with(obj.style){
left = x0 - dx * M;
top = y0 - dy * M;
zIndex = Math.round(100 + M);
fontSize = 8 + M * W * 2;
color = "RGB("+c+","+c+","+c+")";
}
} else {
if(anim){
with(obj.style){
left = x0;
top = y0;
zIndex = 0;
fontSize = 8;
color = "RGB(88,88,88)";
}
anim = false;
}
}
}
}
}
function run(){
for(i in o)o[i].mainloop();
setTimeout(run,16);
}
onload = function (){
DOOT = document.getElementById("doot");
with(DOOT.style){
left = -dim/2;
top = -dim/2;
width = dim;
height = dim;
}
resize();
W = (dim / NX) / 2;
H = (dim / NY) / 2;
K = 0;
for(var j=0;j<NY;j++){
for(var i=0;i<NX;i++){
c=T.charAt((I++)%T.length).toUpperCase();
if(c==" ")c="·";
o[K] = new CObj(K++,i,j,c);
}
}
run();
}
//-->
</script>
</head>
<body>
<span style="position:absolute;left:50%;top:50%">
<span id="doot"></span>
</span>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
← js常用工具大全
更多建議：