[共享无限]54种网页特效代码 之(4)

2009年11月29日星期日 | | | 

34、左下角下拉菜单
把如下代码加入<body>区域中
<script>
if (!document.layers)
document.write(<div id="divStayTopLeft" style="position:absolute">)
</script>
<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">菜单</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.sina.com">新浪网</a><br>
<a href="http://www.163.com">网易</a><br>
<a href="http://www.yahoo.com">雅虎</a><br>
<a href="http://www.baron.com.cn">邦联宽带网</a><br>
<a href="http://www.njcatv.net">南京广电</a></td>
</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write(</div>)

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop
+ document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop
+ document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>


35、模似下寸的效果
把如下代码加入<body>区域中
<script language="JavaScript">
<!--
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"red\">");
document.write(",</font></layer>");
}
}
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 color=\"red\">");
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 color=\"red\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx = Math.random() * doc_width + 1;
cy = Math.random() * doc_height + 1;
x = r * sn + cx;
y = cy;
}
function makeRain() {
r = 1;
cx = Math.random() * doc_width + 1;
cy = 1;
x = r * sn + cx;
y = r * cs + cy;
}
function updateRain() {
r += s;
x = r * sn + cx;
y = r * cs + cy;
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x <= 1) || (x >= (doc_width - 20)) || (y >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y;
document.layers["dot"+i].left = x;
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x <= 1) || (x >= (doc_width - 20)) || (y >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y;
document.all["dot"+i].style.pixelLeft = x;
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}

-->
</script>


36、把鼠标放到图片上面，图片就不停的抖动
把如下代码加入<body>区域中
<script language="JavaScript1.2">
var rector=3
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>
<style>
.shakeimage{
position:relative
}
</style>
<img src="photo/1207.gif" class="shakeimage" onMouseOver="init(this);
rattleimage()" onMouseOut="stoprattle(this)">

37、图片在页面飞行中同时变换飞舞的图片
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
<!-- Naughty Windows Script by [email protected]

pics=new Array(photo/img.gif,photo/inindent.gif,photo/italic.gif,
photo/numlist.gif,photo/paste.gif,photo/redo.gif,photo/under.gif)
load=new Array();
function PreLoad(){
for(i=0; i < pics.length; i++)
{
load=new Image();
load.src=pics;
}
}
PreLoad();
BY=-22;
BX=-17;
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
L=null;
if (NS4){
document.write("<LAYER NAME=netscape LEFT=0 TOP=0><img name=n
src="+load[0].src+"></LAYER>");
}
if (NS6){
document.write("<img id=n6 src="+load[0].src+" style=position:
absolute;top:0px;left:0px>");
}
if (IE4){
document.write("<div style=position:absolute;top:0px;left:0px>
<div style=position:relative>");
document.write("<img id=explorer src="+load[0].src+" style=
position:absolute;top:0px;left:0px>");
document.write("</div></div>")
}
R=0,PB=0,RD=0,Y=0,X=0,D=0,VB=0,HB=0;
Y=10;X=10;D=Math.floor(Math.random()*60+10);
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1)
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve(),1800);
}
function MoveRandom(){
setTimeout(MoveRandom(),10);
var H=(NS6||NS4)?window.innerHeight:document.body.clientHeight;
var W=(NS6||NS4)?window.innerWidth:document.body.clientWidth;
var YS=(NS6||NS4)?window.pageYOffset:document.body.scrollTop;
var XS=(NS6||NS4)?window.pageXOffset:document.body.scrollLeft;
PB=D+=RD;
y = 3*Math.sin(PB*Math.PI/180);
x = 3*Math.cos(PB*Math.PI/180);
if (D < 0) D+=360;
Y+=y;
X+=x;
VB=180-D;
HB=0-D;
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
if (Y < 1) {Y=1;D=HB;}
if (Y > H+BY) {Y=H+BY;D=HB;}
if (X < 1) {X=1;D=VB;}
if (X > W+BX) {X=W+BX;D=VB;}
if (NS4)L=document.netscape;
if (NS6)L=document.getElementById("n6").style;
if (IE4)L=explorer.style;
L.top=Y+YS;
L.left=X+XS;
}
count=0;
move=1;
function picSwap(){
if (count >= pics.length)count=0;
if (NS4)
document.layers[netscape].document.images[n].src=pics[count];
if (NS6)
document.getElementById("n6").src=pics[count];
if (IE4)
explorer.src=pics[count];
count+=move;
setTimeout(picSwap(),2500);
}
function sTaRt(){Curve();MoveRandom();picSwap()}
window.onload=sTaRt;
//-->
</script>

　


第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="sTaRt()">


38、飞舞的蝴蝶，点击以后就自动消失
把如下代码加入<body>区域中
<script language="JavaScript1.2">

var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES


var floatimages=new Array();
floatimages[0]=photo/butterfly.gif;
floatimages[1]=photo/butterfly.gif;

//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(n
avigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appNam
e.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t=, IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?<layer name="pic+i+" visibility="hide" width="10" height=
"10"><a href="javascript:hidebutterfly()"> : <div id="pic+i+" styl
e="position:absolute; visibility:hidden;width:10px; height:10px"><a hr
ef="javascript:hidebutterfly()">;
t+=<img src="+floatimages+" name="p+i+" border="0">;
t+=(NS4)? </a></layer>:</a></div>;
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[nu
m].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num
].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[nu
m].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout(getnewprops(+num+), Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+px;
IDs[num].style.top=y+px;
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+px;
IDs[num].style.top=(getidtop(num)+dy)+px;
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs=getid(pic+i);
if(NS4){
IDs.W=IDs.document.images["p"+i].width;
IDs.H=IDs.document.images["p"+i].height;
}
if(NS6 || IE4){
IDs.W=document.images["p"+i].width;
IDs.H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs.W)), Math.floor(Mat
h.random()*(wind_h-IDs.H)));
if(NS4)IDs.visibility = "show";
if(IE4 || NS6)IDs.style.visibility = "visible";
startfly=setInterval(moveimage(+i+),Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility=hidden")
else if (NS6)
document.getElementById("pic"+i).style.visibility=hidden
else if (NS4)
eval("document.pic"+i+".visibility=hide")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

</script>
 
我的QQ空间
kmeleon.js及pref.js配置解释
K-MeleonCCF ME目录下的defaults\pref\kmeleon.js保存了K-Meleon...
 

0 评论:

发表评论

订阅： 博文评论 (Atom)

所有文章收集于网络，如果有牵扯到版权问题请与本站站长联系。谢谢合作！[email protected]

 
Glossy Blue by N.Design Studio
Blogger Templates by Blogcrowds | Glossy Blue Blogger Template