用js完成屏保 (完整版)


<!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;
            border-radius: 20px;
        }
    </style>
</head>
<body>
   <img src="../b3ec24d039666a3613d34d074528796.jpg"  width="200" height="200">
    <script>
        // 找到插入的这个图片
        var img=document.getElementsByTagName("img")[0]
        // 获取到当前屏幕的宽度
        var ScreenWidth=screen.width
        var ScreenHeight=screen.height
        // 将插入的图片向左移动的距离进行数值转化
        var x=parseInt(img.style.left)
        var y=parseInt(img.style.top)
        // 用一个第三变量来控制他们的左右方向
        // 声明一个变量index
        // true 向右走  false 向左走
        var index=true 
        // true 向上走  false 向左走
        var index1=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
               }
            }
            if(index1){
                y++
                img.style.top=y+"px"
                if(y+img.height>ScreenHeight-100){
                index1=false
                }
            }else{
               y--
               img.style.top=y+"px"
                if(y<0){
                    index1=true
                }
            }
        },1)
    </script>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END