JS控制图形左右晃动的实例代码

代码简介

JS控制图片的位置,然后在规定时间内在指定方向移动性吃呢个的,很不错的

代码内容

View Code
<html>
<head>
<title>JS控制图形左右晃动的实例代码 - www.webdm.cn</title>
<SCRIPT LANGUAGE="JavaScript">
<!--

step
= 0;
obj
= new Image();

function anim(xp,xk,smer) //smer = direction
{
obj.style.left
= x;

x
+= step*smer;

if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}

if (x >= xk) {
x
= xk;
smer
= -1;
}

if (x <= xp) {
x
= xp;
smer
= 1;
}
// if (smer > 2) smer = 3;
setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}


function moveLR(objID,movingarea_width,c)
{

if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;

obj
= document.images[objID];
image_width
= obj.width;

x1
= obj.style.left;
x
= Number(x1.substring(0,x1.length-2)); // 30px -> 30

if (c == 0) {

if (movingarea_width == 0) {
right_margin
= window_width - image_width;
anim(x,right_margin,
1);
}
else {
right_margin
= x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x
= Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,
1);
}
}


//-->
</SCRIPT>

</head>
<body>
<img src="http://www.webdm.cn/themes/pic/webdm_logo.gif" name="picture" style='position: absolute; top: 10px; left: 30px;'

BORDER
=0>
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout(
"moveLR('picture',300,1)",10);
//-->
</SCRIPT>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

 

代码来自http://www.webdm.cn/webcode/69cdba0d-1dca-4137-9bd6-044f3a089ee6.html

posted @ 2012-02-22 08:59  网页代码站  阅读(847)  评论(0编辑  收藏  举报