免费AI编程助手
js特效代码大全
2021-04-08 14:01 更新
鼠标跟随十字JS特效代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>鼠标跟随十字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仿黑客帝国字母掉落效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS仿黑客帝国字母掉落效果 | 编程狮(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仿黑客帝国字母掉落效果</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显示年月日时间代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>javascript显示年月日时间代码 | 编程狮(w3cschool.cn)</title> <script language=Javascript>
function time(){
//获得显示时间的div
t_div = document.getElementById('showtime');
var now=new Date()
//替换div内容
t_div.innerHTML = "现在是"+now.getFullYear()
+"年"+(now.getMonth()+1)+"月"+now.getDate()
+"日"+now.getHours()+"时"+now.getMinutes()
+"分"+now.getSeconds()+"秒";
//等待一秒钟后调用time方法，由于settimeout在time方法内，所以可以无限调用
setTimeout(time,1000);
}
</script>
</head>
<body onload="time()">
<div id="showtime"></div>
</body>
</html>JS阻止链接跳转代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS阻止链接跳转 | 编程狮(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="https://www.w3cschool.cn/" id="testLink">点击此链接</a>
<script type="text/javascript">var test = document.getElementById('testLink');
test.onclick = function(e) {
alert('链接地址是：' + this.href + ', 不过不会直接跳转');
stopDefault(e);
}
</script></td>
</tr>
</table>
</div>
</body>
</html>JS测试显示器分辨率
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>JS测试显示器分辨率 | 编程狮(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="https://www.w3cschool.cn/"></script></p>
</body>
</html>用JS实现的radio图片选择按钮效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>用JS实现的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实现的radio图片选择按钮效果，可应用在dedecms的留言板程序上。</p>
<p>注意：input后面的空格。</p>>
</body>
</html>超酷JS拖拽翻页效果
<html>
<head>
<title>超酷JS拖拽翻页效果 | 编程狮(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+" 页 提示：左右拖拽翻页</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=https://www.w3cschool.cn/>东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>啊！停不住的爱人</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>宁静温泉</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>你的样子</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>恋曲1980</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>恋曲1990</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>恋曲2000</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>亚细亚的孤儿</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>伴侣</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>爱的箴言</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>爱人同志</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>思念</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>母亲</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>是否</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>牧童</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>青春舞曲</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>蒲公英</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>未来的主人翁</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>如今才是唯一</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>暗恋</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>弹唱词</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>飞车</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>滚滚红尘</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.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=https://www.w3cschool.cn/>现象七十二变</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>乡愁四韵</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>穿过你的黑发我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>大兵歌</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>歌</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>黄色面孔</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>台北红玫瑰</a></li>
<li><span>2009-4-9 12:35</span><a href=https://www.w3cschool.cn/>我所不能了解的事</a></li>
</ul>
</div>
</body>
</html>JS动态平滑滚动菜单效果
<html>
<head>
<title>JS动态平滑滚动菜单效果 | 编程狮(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城市联动菜单
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>城市联动菜单 | 编程狮(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/">阜阳市</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/">昌平区</a></dd>
<dd><a href="/a_020200/">朝阳区</a></dd>
<dd><a href="/a_020300/">崇文区</a></dd>
<dd><a href="/a_020400/">大兴区</a></dd>
<dd><a href="/a_020500/">东城区</a></dd>
<dd><a href="/a_020600/">房山区</a></dd>
<dd><a href="/a_020700/">丰台区</a></dd>
<dd><a href="/a_020800/">海淀区</a></dd>
<dd><a href="/a_020900/">怀柔区</a></dd>
<dd><a href="/a_021000/">门头沟区</a></dd>
<dd><a href="/a_021100/">密云县</a></dd>
<dd><a href="/a_021200/">平谷区</a></dd>
<dd><a href="/a_021300/">石景山区</a></dd>
<dd><a href="/a_021400/">顺义区</a></dd>
<dd><a href="/a_021500/">通州区</a></dd>
<dd><a href="/a_021600/">西城区</a></dd>
<dd><a href="/a_021700/">宣武区</a></dd>
<dd><a href="/a_021800/">延庆县</a></dd>
<dd><a href="/a_021900/">燕山区</a></dd>
</dl>
</li>
<li><a href="/a_03/">重庆</a>
<dl>
<dd><a href="/a_030100/">巴南区</a></dd>
<dd><a href="/a_030200/">北碚区</a></dd>
<dd><a href="/a_030300/">璧山县</a></dd>
<dd><a href="/a_030400/">长寿区</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/">渡口区</a></dd>
<dd><a href="/a_030900/">丰都县</a></dd>
<dd><a href="/a_031000/">奉节县</a></dd>
<dd><a href="/a_031100/">涪陵区</a></dd>
<dd><a href="/a_031200/">涪陵市</a></dd>
<dd><a href="/a_031300/">合川市</a></dd>
<dd><a href="/a_031400/">江北区</a></dd>
<dd><a href="/a_031500/">江津市</a></dd>
<dd><a href="/a_031600/">九龙坡区</a></dd>
<dd><a href="/a_031700/">开县</a></dd>
<dd><a href="/a_031800/">梁平县</a></dd>
<dd><a href="/a_031900/">南岸区</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/">黔江区</a></dd>
<dd><a href="/a_032400/">荣昌县</a></dd>
<dd><a href="/a_032500/">沙坪坝区</a></dd>
<dd><a href="/a_032600/">石柱</a></dd>
<dd><a href="/a_032700/">双桥区</a></dd>
<dd><a href="/a_032800/">铜梁县</a></dd>
<dd><a href="/a_032900/">潼南县</a></dd>
<dd><a href="/a_033000/">万盛区</a></dd>
<dd><a href="/a_033100/">万县市</a></dd>
<dd><a href="/a_033200/">万州区</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/">酉阳</a></dd>
<dd><a href="/a_033900/">渝北区</a></dd>
<dd><a href="/a_034000/">云阳县</a></dd>
<dd><a href="/a_034100/">忠县</a></dd>
<dd><a href="/a_034200/">渝中区</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/">嘉峪关市</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/">平凉市</a></dd>
<dd><a href="/a_051100/">庆阳市</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/">潮阳市</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/">揭阳</a></dd>
<dd><a href="/a_061000/">茂名市</a></dd>
<dd><a href="/a_061100/">梅州市</a></dd>
<dd><a href="/a_061200/">清远市</a></dd>
<dd><a href="/a_061300/">汕头市</a></dd>
<dd><a href="/a_061400/">汕尾市</a></dd>
<dd><a href="/a_061500/">韶关市</a></dd>
<dd><a href="/a_061600/">深圳市</a></dd>
<dd><a href="/a_061700/">顺德</a></dd>
<dd><a href="/a_061800/">阳江市</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/">来宾市</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/">毕节市</a></dd>
<dd><a href="/a_080300/">赤水市</a></dd>
<dd><a href="/a_080400/">都匀市</a></dd>
<dd><a href="/a_080500/">贵阳市</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/">海口市</a></dd>
<dd><a href="/a_090900/">乐东</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/">万宁</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/">邢台市</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/">安阳市</a></dd>
<dd><a href="/a_110200/">鹤壁市</a></dd>
<dd><a href="/a_110300/">济源</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/">洛阳市</a></dd>
<dd><a href="/a_110800/">南阳市</a></dd>
<dd><a href="/a_110900/">平顶山市</a></dd>
<dd><a href="/a_111000/">濮阳市</a></dd>
<dd><a href="/a_111100/">三门峡市</a></dd>
<dd><a href="/a_111200/">商丘市</a></dd>
<dd><a href="/a_111300/">新乡市</a></dd>
<dd><a href="/a_111400/">信阳市</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/">七台河市</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实现的幻灯上滚效果
<script>
var marqueeContent=new Array(); //滚动新闻
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">小泉称若自民党在议会选举中失败</a><br>';
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布什发表广播讲话</a><br>';
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">伊斯兰武装炸毁印控克什米尔铁路导致列车出轨</a><br>';
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">布雷默：即使抓住了萨达姆也难以结束抵抗行动</a><br>';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
//接下来的是定义一些要使用到的函数
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>以上内容是否对您有帮助：
← js常用工具大全
更多建议：