这篇文章介绍了几种JS的动态效果实例
有需要的朋友可以参考一下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD HTML
Transitional//EN" "
<html>
<head>
<meta http
equiv="Content
Type" content="text/html; charset=UTF
">
<title>浮动图片</title>
<script type="text/javascript">
var step =
; // 移动的像素
var y =
; // 垂直移动的方向
表示向上
表示向下
var x =
; // 水平移动的方向
表示向左
表示向右
function myFloat()
{
var img = document
getElementById("myImg");
// 获取图片和当前浏览器窗口上边距
由于img
style
top获取的值带px单位
var top = img
style
top
replace("px"
"");
// top = top
;
// img
style
top = top + "px";
// 获取图片和当前浏览器窗口左边距
var left = img
style
left
replace("px"
"");
// left = left
;
// img
style
left = left + "px";
// 上下移动
if(top <=
)
{
y =
;
}
if(top >= document
body
clientHeight)
{
y =
;
}
top = (top*
) + (step * y);
img
style
top = top + "px";
// 左右移动
if(left <=
)
{
x =
;
}
// alert(img
clientWidth);
if(left >= (document
body
clientWidth
img
clientWidth))
{
x =
;
}
left = (left*
) + (step * x);
img
style
left = left + "px";
setTimeout("myFloat()"
);
}
</script>
</head>
<body onload="myFloat();" style="height:
px;">
<img id="myImg" src="
style="position: absolute; left:
px; top:
px; border: solid
px black;" />
</body>
</html>
另一种的实现方式
复制代码 代码如下:
<html>
<head>
<meta http
equiv="Content
Type" content="text/html; charset=gb
" />
<title>浮动广告实例</title>
<script type="text/javascript">
var pos =
;
function toueme() {
document
getElementById("toubiao")
style
display = "none";
}
function initArray() {
this
length = initArray
arguments
length;
for (var i =
; i < this
length; i++) {
this[i] = initArray
arguments[i];
}
}
var col = new initArray("
b"
"
b"
"
b"
"
b");
col[
] = "yellow";
col[
] = "coral";
col[
] = "orange";
col[
] = "red";
col[
] = "greenyellow";
col[
] = "lime";
col[
] = "turquoise";
col[
] = "coral";
col[
] = "blueviolet";
col[
] = "violet";
function chgCol() {
pos++;
if (pos <
|| pos >
) {
pos =
;
}
document
bgColor = col[pos];
setTimeout("chgCol()"
);
}
</script>
</head>
<body bgColor="#ffffff" onload="chgCol();pingpong();">
<DIV id=img
style="Z
INDEX:
;
LEFT:
px;
WIDTH:
px;
POSITION: absolute;
TOP:
px;
HEIGHT:
px;
visibility: visible;">
<div id=toubiao>
<a style="CURSOR: hand" onClick=toueme()>
<img
src="close
gif"
width=
height=
hspace="
" border=
></a>
</div>
<a href="#" target="_blank">
<img src="
jpg" width="
" height="
" border="
">
</a>
</DIV>
<SCRIPT>
var xPos =
;
var yPos =
;
var step =
;
var delay =
;
var height =
;
var Hoffset =
;
var Woffset =
;
var yon =
;
var xon =
;
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 <
)
{yon =
;yPos =
;}
if (yPos >= (height
Hoffset))
{yon =
;yPos = (height
Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos
step;}
if (xPos <
)
{xon =
;xPos =
;}
if (xPos >= (width
Woffset))
{xon =
;xPos = (width
Woffset); }
}
function start()
{
img
visibility = "visible";
interval = setInterval(
changePos()
delay);
//interval = setTimeout("changePos()"
delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval(
changePos()
delay);
pause = true;
}
}
start();
</SCRIPT>
</body>
</html>
JS实现气泡从水中急速上升效果
复制代码 代码如下:
<html>
<head>
<title>JS实现气泡从水中急速上升效果</title>
<style type="text/css">
body {cursor:crosshair;margin:
; padding:
; position:absolute; overflow:hidden; background:#FFF; left:
; top:
; width:
%; height:
%;}
</style>
<script type="text/javascript">
var object = new Array();
nbfm =
;
var xm =
;
var ym =
;
var nx =
;
var ny =
;
function movbulb(){
with (this) {
if(ec <
){
if(Math
abs(x
xm) <
&& Math
abs(y
ym) <
){
xx = (xm
x
) /
;
yy = (ym
y
) /
;
ec++;
}
}
xx *=
;
yy *=
;
x
= Math
round(x
+ Math
cos(y
/
) * p) + xx;
y
+= yy
v;
if(y
<
h *
|| x
<
w *
|| x
> nx + w *
){
y
= ny + N + h *
;
x
= nx/
+ Math
random() *
;
ec =
;
}
obj
style
top = y
h;
obj
style
left = x
w;
}
}
function CObj(N
img
w
h){
this
obj = document
createElement("img");
this
obj
src = img
src;
this
obj
style
position = "absolute";
this
obj
style
left =
;
document
body
appendChild(this
obj);
this
N = N;
this
x
=
;
this
y
=
;
this
v =
+ Math
round((
/ h) * Math
random());
this
p =
+ Math
round((w /
) * Math
random());
this
xx =
;
this
yy =
;
this
ec =
;
this
w = w;
this
h = h;
this
movbulb = movbulb;
}
function resize(){
nx = document
body
offsetWidth;
ny = document
body
offsetHeight;
}
onresize = resize;
document
onmousemove = function(e){
if (window
event) e = window
event;
xm = document
body
scrollLeft+(e
x || e
clientX);
ym = document
body
scrollTop+(e
y || e
clientY);
}
function run(){
for(i in object)object[i]
movbulb();
setTimeout(run
);
}
onload = function() {
PIC = document
getElementById("bubbles")
getElementsByTagName("img");
resize();
for(nbf=
;nbf<nbfm;nbf++){
sf = PIC[nbf%PIC
length];
object[nbf] = new CObj(nbf
sf
sf
width/
sf
height/
);
}
run();
}
</script>
</head>
<body>
<div id="bubbles" style="visibility:hidden">
<img src="smile
gif">
<img src="biggrin
gif">
<img src="eek
gif">
<img src="rolleyes
gif">
</div>
</body>
</html>
浮动广告
复制代码 代码如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF">
<title>浮动广告</title>
</head>
<body style="backgroundcolor:pink">
<div id="ad" style="position:absolute">
<a href=http://wwwbaiducom target="_blank">
<img src="gif" border="" width="" heigth="">
<input type="button" value="关闭窗口" onclick="closeWindow()"/><! 适用于IE浏览器 >
</a>
</div>
<script type="text/javascript">
var x = y =
var xin = true yin = true
var step =
var delay =
var obj=documentgetElementById("ad")
function floatAD()
{
var L=T=
var R= documentbodyclientWidthobjoffsetWidth
var B = documentbodyclientHeightobjoffsetHeight
objstyleleft = x + documentbodyscrollLeft
objstyletop = y + documentbodyscrollTop
x = x + step*(xin?:)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?:)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()" delay)
function closeWindow()
{
windowclose();
}
</script>
<style type="text/css">
input{
backgroundimage:url(jpg);
border:px;
margin:px;
padding:px;
height:px;
width:px;
fontsize:px;
}
</style>
</body>
</html>
