关于Javascript 特效代码
script language="JavaScript"
!-- Hide the script from old browsers --
function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj
{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同
var one = '1' //定义一个字符型的1
var two = '2' //定义一个字符型的2
var three = '3' //定义一个字符型的3
var four = '4'知卜 //定义一个字符型的4
var five = '5' //定义一个字符型的5
var six = '6' //定义一个字符型的6
var seven = '7' //定义一个字符型的7
var eight = '8' //定义一个字符型的8
var nine = '9' //定义蠢猛塌一个字符型的9
var zero = '0' //定义一个字符型的0
var plus = '+' //定义一个字符型的+
var minus = '-' //定义一个字符型的*
var multiply = '*' //定义一个字符型的*
var divide = '/' //定义一个字符型的/
var decimal = '.' //定义一个字符型的.
function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj
{obj.expr.value += string} //让 obj的值加上 '+'后面的值
function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj
{obj.expr.value = ''} //让obj的值等于空
// --End Hiding Here --
/script
form name="calc"
table border=1
td colspan=4input type="text" name="expr" size=30 action="compute(this.form)" tr
!--提交表单--
tdinput type="button" value=" 7 " onClick="enter(this.form, seven)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 8 " onClick="enter(this.form, eight)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 9 " onClick="enter(this.form, nine)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button"带圆 value=" / " onClick="enter(this.form, divide)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
trtdinput type="button" value=" 4 " onClick="enter(this.form, four)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 5 " onClick="enter(this.form, five)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 6 " onClick="enter(this.form, six)"!--当鼠标点击按
钮的时候提交给函数按钮中的值--
tdinput type="button" value=" * " onClick="enter(this.form, multiply)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
trtdinput type="button" value=" 1 " onClick="enter(this.form, one)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 2 " onClick="enter(this.form, two)"!--当鼠标点击按
钮的时候提交给函数按钮中的值--
tdinput type="button" value=" 3 " onClick="enter(this.form, three)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" - " onClick="enter(this.form, minus)"!--当鼠标点
击按钮的时候提交给函数按钮中的值--
trtd colspan=2input type="button" value=" 0 " onClick="enter
(this.form, zero)"!--当鼠标点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" . " onClick="enter(this.form, decimal)"!--当鼠标
点击按钮的时候提交给函数按钮中的值--
tdinput type="button" value=" + " onClick="enter(this.form, plus)"!--当鼠标点击
按钮的时候提交给函数按钮中的值--
trtd colspan=2input type="button" value=" = " onClick="compute(this.form)"!
--提交表单在javascript中进行运算--
td colspan=2input type="button" value="AC" size= 3 onClick="clear(this.form)" !--
点击此按钮调用此函数--
/table
/form
JS特效代码--一个很Cool的JS菜单效果
script
function CoolMenuControl(){
// 常规变量 this lastScrollX= ; this lastScrollY= ; this lastScrollW= ; this lastScrollH= ; this td_X= ; this td_Y= ; this td_W= ; this td_H= ; this td= ; this mouseon= ; this current=null this _name; this table_name; this menudiv_name; this menutable_name; this ml= ; this menuarray=new Array(); this speed; this href="";
// 菜单项目 function menuitem(type value url target){ this type=type this value=value this url=url this target=target }
// 插唤拍入菜单 this insertmenu=function(type value url target){ this menuarray[this menuarray length]=new menuitem(type value url target) }
// 程序初试化 this init=function(name bdc bgc speed Alpha){ var in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed
for (i= ;ithis menuarray length;i++) { if (this menuarray[i] type==" ") cellcount=cellcount+ if (this menuarray[i] type==" " || this menuarray[i] type==" ") {cellcount= } if (lastcellcountcellcount) {lastcellcount++} }
和尘羡//alert(cellcount)
stylecode="cursor:hand;filter:Alpha(style= opacity="+Alpha+");background color:"+bgc
suspendcode="DIV id="+this _name+" style= POSITION:absolute; onclick= "+name+" doClick() " +"table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" " +"trtd height= style= "+stylecode+" /td/tr/table/div"; document write(suspendcode); var fcell=true for (i= ;ithis menuarray length;i++) { switch(this menuarray[i] type) { case " ": t=cellcount* if (t= ) { in+= trtd colspan= class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value } else 兄改{ in+= trtd colspan= +t+ class=ht onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value } fcell=true break; case " ": t=(cellcount )* if (t= ) { in+= trtd width= td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value } else { in+= trtd width= td colspan= +t+ onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value } fcell=true break; case " ": if (fcell) { in+= trtd width= td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value; fcell=false } else { in+= td width= td onmouseover= +name+ href=" +this menuarray[i] url+ +this menuarray[i] target+ " +this menuarray[i] value; } break; } } in= div id= +this menudiv_name+ onmousemove=" +name+ doOver()" + table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" " +in + /table/div ; //alert(in) document write(in);
this lastScrollX= ; this lastScrollY= ; this posXY(eval(this menutable_name) cells[ ]) this td_W=eval(this menutable_name) cells[ ] scrollWidth+ this td_H=eval(this menutable_name) cells[ ] scrollHeight setInterval(name+" scrollback()" ) }
// 单击超连接 this doClick=function(){ //alert(this url) var url=this href split(" ") //alert(url[ ]) //alert(url[ ]) if (url[ ]=="") return
if (url[ ]=="_blank") {window open(url[ ])} else {location href=url[ ]} }
// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y diffW=this td_W diffH=this td_H percentX=this speed*(diffX this lastScrollX); percentY=this speed*(diffY this lastScrollY); percentW=this speed*(diffW this lastScrollW); percentH=this speed*(diffH this lastScrollH);
if(percentX )percentX=Math ceil(percentX); else percentX=Math floor(percentX); if(percentY )percentY=Math ceil(percentY); else percentY=Math floor(percentY); if(percentW )percentW=Math ceil(percentW); else percentW=Math floor(percentW); if(percentH )percentH=Math ceil(percentH); else percentH=Math floor(percentH);
eval(this _name) style pixelTop+=percentY; eval(this _name) style pixelLeft+=percentX; eval(this table_name) style pixelWidth+=percentW; eval(this table_name) style pixelHeight+=percentH;
this lastScrollX=this lastScrollX+percentX; this lastScrollY=this lastScrollY+percentY; this lastScrollW=this lastScrollW+percentW; this lastScrollH=this lastScrollH+percentH; }
// 滑出 this doOver=function() { if (event srcElement tagName=="TD") { if (event srcElement innerText length== || event srcElement innerText=="|") return this posXY(event srcElement) this td_W=event srcElement scrollWidth+ this td_H=event srcElement scrollHeight } }
// 绝对定位 this posXY=function(obj){ _left=obj offsetLeft _top=obj offsetTop vParent = obj offsetParent; while (vParent tagName toUpperCase() != "BODY") { _left += vParent offsetLeft; _top += vParent offsetTop; vParent = vParent offsetParent; } this td_X=_left this td_Y=_top }
// 关于 this about=function(){ alert("OK") }
} /script
head meta equiv="Content Language" content="zh cn" style b{color=# ;cursor:hand} menu { font family:Arial; cursor:Default; font size: px; border: px # solid; border collapse: collapse; filter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd) progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= ); } ht{ font weight:bold } /style ! 第一步 实体化X Menu类 用法: var 实体变量 new CoolMenuControl() script language="javascript" var CoolMenu =new CoolMenuControl() var about=new Array() about[ ]="关于X Menu菜单nnAuthor:PuterJamnCopyright n转载请通知本人" about[ ]="关于作者nn"这家伙很懒 什么也没留下！！"
/script /head body ! 第二步 建立菜单项目 用法: 实体变量 insertmenu(类型 Html代码 链接网址 目标) 类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目 Html代码 显示在菜单上的Html代码 链接网址 不用多说了 网址或Javascript脚本 目标 默认为空 既不在本页打开 "_blank"代表在新的页面打开 例如: CoolMenu insertmenu(" " "img src=// blueidea /img/icon/arrow gif 新浪网" " "_blank") script CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") /script
lishixinzhi/Article/program/Java/JSP/201311/19958
寻JavaScript特效代码~
html!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns="" lang="gb2312"
head
titleJS图片切换 ::/title
meta http-equiv="Content-Type" content="text/返者脊html; charset=gb2312" /
meta name="generator" content="editplus" /
meta name="author" content="eLore" /
meta name="keywords" content="" /
meta name="description" content="" /
style type="text/css"
* { margin:0; padding:0; }
body {
margin:0;
color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {
position:relative;
overflow:hidden;
width:306px;
height:190px;
background:#33c;
background-color: #CCCCCC;
}
.div_img {
position:absolute;
top:0;
width:295px;
height:100px;
cursor:pointer;
}
#div_img_0 { z-index:5; top:0; }
#div_img_1 { z-index:4; top:22px; }
#div_img_2 { z-index:3; top:44px; }
#div_img_3 { z-index:2; top:66px; }
#div_img_4 { z-index:1; top:88px; }
/style
/head
body
div id="js_F"
div id="div_img_0" class="div_img"a href="javascript:if(confirm(' \n\漏渗n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location=''" tppabs="" target="_blank"嫌团img src="fbm.gif" tppabs=""//abr /
img src="g1.gif" tppabs="" onmouseover="jsf_mmove(0)" //div
div id="div_img_1" class="div_img"a href="javascript:if(confirm(' \n\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location=''" tppabs="" target="_blank"img src="lw.gif" tppabs=""//abr /
img src="g2.gif" tppabs="" onmouseover="jsf_mmove(1)" //div
div id="div_img_2" class="div_img"a href="javascript:if(confirm(' \n\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location=''" tppabs="" target="_blank"img src="dg.gif" tppabs="" //abr /
img src="g3.gif" tppabs="" onmouseover="jsf_mmove(2)" //div
div id="div_img_3" class="div_img"a href="javascript:if(confirm(' \n\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location=''" tppabs="" target="_blank"img src="zs.gif" tppabs=""//abr /
img src="g4.gif" tppabs="" onmouseover="jsf_mmove(3)" //div
div id="div_img_4" class="div_img"a href="javascript:if(confirm(' \n\n文件并未依 Teleport Pro 取回，因为 它的域或路径超过开始网址中设置的范围。 \n\n你要从服务器上打开它吗？'))window.location=''" tppabs="" target="_blank"img src="lq.gif" tppabs="" //abr /
img src="g5.gif" tppabs="" onmouseover="jsf_mmove(4)" //div
/div
script type="text/javascript"
!--///*--![CDATA[/*!--*/
var div_imgs = document.getElementById("js_F").getElementsByTagName("div");
var imgTop = [0, 22, 44, 66, 88]; //5个图片的初始left值
var imgHeight = 77; //图片的宽度
var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边
var speed1 = 10, speed2 = 2000, mo = 15; //速度
var sTo;
function jsf_move(n){
clearTimeout(sTo);
var thisT; //图片left值
if (atf[n]) { //要移动的图片在右边
//需移动的图片（包括该图片左边的所有图片）向左边移动)
for (var i=0; i=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度
thisT = parseInt(getStyle(div_imgs[i],"top"));
div_imgs[i].style.top = thisT - Math.ceil((imgHeight-(imgTop[i]-thisT))/mo) + "px";
if (in) atf[i] = false; //更改图片的位置状态
}
} else { //要移动的图片在左边
//需移动的图片（包括该图片右边的所有图片）向右边移动)
for (var i=4; i=n; i--) { //当前值+(当前值-初始值)/速度
thisT = parseInt(getStyle(div_imgs[i],"top"));
div_imgs[i].style.top = thisT + Math.ceil(Math.abs(thisT-imgTop[i])/mo) + "px";
if (in) atf[i] = true; //更改图片的位置状态
}
}
thisT = parseInt(getStyle(div_imgs[n],"top"));
if ((atf[n] thisT(imgTop[n]-imgHeight)) || (!atf[n] thisTimgTop[n])) {
//当前图片移动未结束，继续移动当前图片
sTo = setTimeout(function(){jsf_move(n);}, speed1);
} else {
//当前图片移动结束，准备移动下一张图片
if (n=3 atf[n]) {
atf[n] = false;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (n==0 !atf[n]) {
atf[n] = true;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (atf[n]){
atf[n] = false;
sTo = setTimeout(function(){jsf_move(++n);}, speed2);
} else {
sTo = setTimeout(function(){jsf_move(--n);}, speed2);
}
}
}
//判断图片的位置
function jsf_mmove(n){
clearTimeout(sTo);
switch (n){
case 0 :
atf[0] = false;
jsf_move(0);
break;
case 1 :
case 2 :
case 3 :
if (atf[n-1]) {
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else if (atf[n]) {
atf[n-1] = true;
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else {
sTo = setTimeout(function(){jsf_move(n);}, speed1);
}
break;
case 4 :
atf = [false, false, false, true, true];
jsf_move(3);
break;
}
}
window.onload = function(){
sTo = setTimeout("jsf_move(0)",speed2);
}
function getStyle( elem, name ) {
if (elem.style[name]) { return elem.style[name]; }
else if (elem.currentStyle) { return elem.currentStyle[name]; }
else if (document.defaultView document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s s.getPropertyValue(name);
}
else { return null; }
}
/*]]*///--
/script
/body
/html