中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


左右移动的图片

效 果
源代码及使用说明 拷贝下面的代码到你的html文件的<head>和</head>之间;

<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>

拷贝下面的代码到你的html文件的<body>和</body>之间;

<img src="image1.gif" name="picture" style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40"> <script LANGUAGE="JavaScript">
<!--
setTimeout("moveLR('picture',300,1)",10);
//-->
</script>

说明:可以将image1.gif改为你需要的图片,修改top和left数值调整位置。

 

  《傲虎设计室》 阿捷/文


本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱