js图片屏保(利用第三变量来控制屏保移动方向)

最新推荐文章于 2023-02-04 09:23:53 发布

油、东西

最新推荐文章于 2023-02-04 09:23:53 发布

阅读量188

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/ZZY192921533/article/details/125322367

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        img{
            position: absolute;
        }
    </style>
</head>
<body>
   <img src="//插入自己的图片" alt="" style="top:0; left:0;" width="180">
    <script>
        // 找到插入的这个图片
        var img=document.getElementsByTagName("img")[0]
        // 获取到当前屏幕的宽度
        var ScreenWidth=screen.width
        // 将插入的图片向左移动的距离进行数值转化
        var x=parseInt(img.style.left)
        // 用一个第三变量来控制他们的左右方向
        // 声明一个变量index
        // true 向右走  false 向左走
        var index=true 
        // 创建一个定时器，每0.001秒自己调用一次
        var t=setInterval(function(){
        // 如果index==true向右走
            if(index){
               x++
               img.style.left=x+"px"
        // 当走到屏幕末端就停止
               if(x+img.width>ScreenWidth){
               index=false
               }
        // 然后向左走
            }else{
               x--
               img.style.left=x+"px"
        // 如果这个图片左边距离屏幕的距离小于零之后，难么继续反弹，向右走
        // 接着调用index=true
               if(x<0){
                index=true
               }
            }
        },)
    </script>
</body>
</html>