|
| 网页特效<七>图像特效 |
|
|
|
|
来源： 作者： 阅读： 次 字体：大 中 小 |
|
|
1.图片大小随鼠标触碰而变化
鼠标接触或者离开图片时，图片大小会相应变化
代码: <span id="s1" style = "width : 150">
<a href="http://www.cf66.net" target="_blank"
onmouseover="www_cf66_net.style.width=’200’;"
onmouseout="www_cf66_net.style.width= ’150’;">
<Img src="http://code.cf66.net/picture/swimming.gif"
id="www_cf66_net"></a></span>
2.自由移动的图片(一)
<div id="cf66_net" style="position:absolute;
visibility:visible; left:0px; top:0px; z-index:-1">
<img src="http://code.cf66.net/picture/swimming.gif"
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_cf66_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) {
cf66_net.moveTo((x+pageXOffset),(y+pageYOffset))
} else {
cf66_net.pixelLeft = x+document.body.scrollLeft;
cf66_net.pixelTop = y+document.body.scrollTop;
}
if (isNS) {
if (cf66_net.top <= 5+pageYOffset) ydir = ’++’;
if (cf66_net.top >= wheight+pageYOffset) ydir = ’--’;
if (cf66_net.left >= wwidth+pageXOffset) xdir = ’--’;
if (cf66_net.left <= 5+pageXOffset) xdir = ’++’;
} else {
if (cf66_net.pixelTop <= 5+document.body.scrollTop) ydir = ’++’;
if (cf66_net.pixelTop >= wheight+document.body.scrollTop) ydir = ’--’;
if (cf66_net.pixelLeft >= wwidth+document.body.scrollLeft) xdir = ’--’;
if (cf66_net.pixelLeft <= 5+document.body.scrollLeft) xdir = ’++’;
}
id1 = setTimeout(’animate()’, 30);
}
var cf66_net=eval(’document.’+_all+’cf66_net’+_style);
// -->
</script>
3.图片在页面内随意飘动，遇到边界还会反弹。
代码:
<div id="img" style="position:absolute;">
<a href="http://www.cf66.net" target="_blank">
<img src="http://code.cf66.net/picture/swimming.gif" border="0"></a>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function www_cf66_net() {
img.visibility = "visible";
interval = setInterval(’changePos()’, delay);
}
www_cf66_net();
//For more,visit:www.cf66.net
-->
</script>
4.图片渐渐显示
<img src="http://code.cf66.net/picture/swimming.gif"
border="1" id="cf66_net" style="visibility:hidden;
FILTER:revealTrans(Duration=4.0, Transition=23);">
<SCRIPT FOR="window" EVENT="onLoad" LANGUAGE="vbscript">
cf66_net.filters.item(0).apply()
cf66_net.filters.item(0).transition = 12
cf66_net.Style.visibility = ""
cf66_net.filters(0).play(2.0)
</SCRIPT>
5.图片渐渐显隐
<img src="http://code.cf66.net/picture/swimming.gif"
name="u" border="1" style="filter:alpha(opacity=0)">
<script language="JavaScript">
var b = 1;
var c = true;
function cf66_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.filters.alpha.opacity=0 + b;
setTimeout("cf66_net()",50);
}
cf66_net();
</script>
6.漫天飞雪
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var no = 12;
var speed = 10;
var heart = "http://code.cf66.net/picture/snow.gif";
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 cf66_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("cf66_net()", speed);
}
function www_cf66_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_cf66_net()", speed);
}
if (ns4up) {
cf66_net();
} else if (ie4up) {
www_cf66_net();
}
//-->
</script>
6.图象大小自动变化
<img src="http://code.cf66.net/picture/swimming.gif"
name="u" border="1" alt="很好玩的">
<script language="JavaScript">
var b = 1;
var c = true;
function www_cf66_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_cf66_net()",50);
}
www_cf66_net();
</script>
|
|
转载本站文章请注明 来源:长风在线 http://www.CF66.Net
|
|
|
|
|
上一篇: 网页特效<六>状态特效
下一篇: 网页特效<八>cookie |
|
|
【投稿日期：2006-11-17 19:42:54】【责任编辑：】【会员投稿】【收藏本页】
|
|
|
|
|
|
|
|
| |
|
|
| |
|
|
| |
|
|
|
