📄 picswing.htm
字号:
<html>
<head>
<title>
图片的左右晃动
</title>
<style>
body picture{border:3 gold ridge}
</style>
</head>
<body>
<script LANGUAGE="JavaScript"><!--
var step = 0;
var obj = new Image();
//动画处理函数
function anim(xp,xk,smer) //xp是对象的左边界，xk是对象的右边界，smer是运动方向，smer==1代表向右运动，smer==-1代表向左运动
{
obj.style.left = x;//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);//循环定时器函数
}
//移动处理函数入口
//objID是图片名，movingarea_width是图片移动的范围，若它的值为0则表示未设初始值，c是图片的初始运动方向，c=0表示未设初始值
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对象
image_width = obj.width;//获得image对象的宽度
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; //设置右边界，保证运动空间的宽度是movingarea_width
if(movingarea_width < 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="start.gif" width=84 height=32 name="picture" style='position: absolute; top: 30px; left: 30px;' BORDER=0>
<script LANGUAGE="JavaScript">
<!--
setTimeout("moveLR('picture',150,1)",10);
//setTimeout("moveLR('picture',0,0)",10);
//-->
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -