让图片左右移动

最新推荐文章于 2024-07-12 15:51:39 发布

weixin_30879169

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量981

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/LixiaoFeng1650062546/p/11238035.html

版权

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

主要还是实现了。当然主要还是借鉴别人的方法。

但是别人的不完善，所以我完善了下

转载于:https://www.cnblogs.com/LixiaoFeng1650062546/p/11238035.html

weixin_30879169

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
让图片左右移动

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>$Title$</title> <style> img{ width: ...
复制链接

扫一扫