您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络课堂>>>网页代码教程>>>图象特效一
图象特效一
发表日期:2007/9/27 18:31:00 出处:未知 作者:馨馨梦幻收集整理 发布人:jxhp 已被访问 1168

图象特效一

一、图象大小自动变化
 
说明:  把一张图片变形扭曲成各种不同的长宽,非常好玩

<img src="domName/jxhp/20076720382560.jpg" name="u" border="1" alt="很好玩的">
<script language="JavaScript">

var b = 1;
var c = true;

function www_helpor_net(){
if(document.all);

if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}

if(b==10) {
b++;
c = true;
}

if(c == false) {
b--;
}
u.width=150 + b;
u.height=125 - b;
setTimeout("www_helpor_net()",50);
}
www_helpor_net();
</script>

 

 


二、漫天飞雪
 
说明:  漫天飞雪

 

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var no = 12;
var speed = 10;
var heart = "domName/jxhp/20076720382560.jpg";
var flag;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
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;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10;
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20;
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></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;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("helpor_net()", speed);
}

function www_helpor_net() {
for (i = 0; i < no; ++ i) {
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("www_helpor_net()", speed);
}

if (ns4up) {
helpor_net();
} else if (ie4up) {
www_helpor_net();
}
//-->
</script>

 


 
五、自由移动的图片
 
说明:  自由移动的图片

 

<div id="helpor_net" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:-1">
 <img src="domName/jxhp/20076720382560.jpg" border="0">
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isNS = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4));
var _all = '''';
var _style = '''';
var wwidth, wheight;
var ydir = ''++'';
var xdir = ''++'';
var id1, id2, id3;
var x = 1;
var y = 1;
var x1, y1;
if(!isNS) {
_all=''all.'';
_style=''.style'';
}
function www_helpor_net() {
clearTimeout(id1);
clearTimeout(id2);
clearTimeout(id3);
if (isNS) {
wwidth = window.innerWidth - 55;
wheight = window.innerHeight - 50;
} else {
wwidth = document.body.clientWidth - 55;
wheight = document.body.clientHeight - 50;
}
id3 = setTimeout(''randomdir()'', 20000);
animate();
}
function randomdir() {
if (Math.floor(Math.random()*2)) {
(Math.floor(Math.random()*2)) ? xdir=''--'': xdir=''++'';
} else {
(Math.floor(Math.random()*2)) ? ydir=''--'': ydir=''++'';
}
id2 = setTimeout(''randomdir()'', 20000);
}
function animate() {
eval(''x''+xdir);
eval(''y''+ydir);
if (isNS) {
helpor_net.moveTo((x+pageXOffset),(y+pageYOffset))
} else {
helpor_net.pixelLeft = x+document.body.scrollLeft;
helpor_net.pixelTop = y+document.body.scrollTop;
}
if (isNS) {
if (helpor_net.top <= 5+pageYOffset) ydir = ''++'';
if (helpor_net.top >= wheight+pageYOffset) ydir = ''--'';
if (helpor_net.left >= wwidth+pageXOffset) xdir = ''--'';
if (helpor_net.left <= 5+pageXOffset) xdir = ''++'';
} else {
if (helpor_net.pixelTop <= 5+document.body.scrollTop) ydir = ''++'';
if (helpor_net.pixelTop >= wheight+document.body.scrollTop) ydir = ''--'';
if (helpor_net.pixelLeft >= wwidth+document.body.scrollLeft) xdir = ''--'';
if (helpor_net.pixelLeft <= 5+document.body.scrollLeft) xdir = ''++'';
}
id1 = setTimeout(''animate()'', 30);
}
var helpor_net=eval(''document.''+_all+''helpor_net''+_style);
// -->
</script>
     

再把<body>改为:

<body OnLoad="www_helpor_net()" OnResize="www_helpor_net()">


       
 
 
六、由移动的图片
 
说明:  图片在页面内随意飘动,遇到边界还会反弹。

 


<div id="img" style="position:absolute;">
<a href="
http://jxhp.16789.net/" target="_blank">
<img src="domName/jxhp/20076720382560.jpg" border="0"></a>
</div>

<SCRIPT LANGUAGE="

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

烟雨亭-透明FLASH|QQ空间FLASH|音乐|动漫|图片|教程|娱乐| | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:804994046 E-mail:jxhp16789@163.com 联系人:梦幻