当前位置:编程学习 > JS >>

让图片左右移动的JS代码

让一幅图片在网页指定区域内左右移动,JS实现,类似走马灯的效果,但又不同于走马灯。
答案:<html>
<head>
<title>图片左右移动</title>
</head>
<BODY>
<script LANGUAGE="JavaScript">
<!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) 
{
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;
}

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));  
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>
<img src="/jscss/demoimg/logo_demo1.gif"
name="picture"
style="position: absolute; top: 70; left: 30;" BORDER="0" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)">
<script LANGUAGE="JavaScript">
<!--
setTimeout("moveLR('picture',300,1)",10);
//-->
</script>
</body>
</html>

上一个:CSS滤镜实现图片水印效果
下一个:无缝垂直图片滚动的JS代码

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,