<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<style>
img{
width: 200px;
position: absolute;
background-color: #ffffff
}
</style>
</head>
<body>
<form action="${pageContext.request.contextPath}/test" method="post">
<input type="text" name="name">
<input type="text" name="addr">
<input type="submit">
</form>
<img src="${pageContext.request.contextPath}/imgg.gif" id="img1" >
<img src="${pageContext.request.contextPath}/timg.gif" id="img" >
<script>
var w ;//页面的宽度
var img;//图像对象
var img1;//图像对象
var imgLeft;//图像左边的位置
var imgWidth; //图像 的宽度
var delta =5 ;//每次移动的距离
var delay =30;//时间
window.onload = function(){
w = window.innerWidth;
img = document.getElementById("img");
img1 = document.getElementById("img1");
imgLeft = img.offsetLeft;
imgWidth = img.width;
move();
};
function move(){
//判断图像是否越界（超出页面的宽度）这里我以整个页面宽度为边界
if(imgLeft<0||imgLeft+imgWidth>w ){
delta=-delta;//变号
}
img.style.left = imgLeft+delta+"px";
img1.style.left = imgLeft+delta+"px";
if(delta==-5){
img1.style.zIndex=100;
}else{
img1.style.zIndex=0;
}
//移动位置后需要重新修改左边的位置
imgLeft = img.offsetLeft;
//重复不断调用函数
setTimeout(move,delay);
}
</script>
</body>
</html>
主要还是实现了。当然主要还是借鉴别人的方法。
但是别人的不完善，所以我完善了下