图片上下左右飘动（jQuery+JS）

作者: 小小蒜头 | 来源:发表于2017-09-22 21:55 被阅读51次

图片上下左右飘动（jQuery+JS）
下拉放大
css 图片上下左右居中
PPT设计|图片组合与快速居中对齐
HTML+CSS \01
css
swift 含有图片和文字的button的布局
Github之UI总结
插件的使用2
RelavtiveLayout梅花布局,margin与paddi

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        img {
            position: absolute;
            width: 410px;
            height: 256px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        //          //5.点击按钮,页面上图片开始飘动,但到屏幕边界时会弹向另一个方向
        //          window.onload = run;
        //          var myEvent = window.setInterval("run()", 6);
        //
        //          var x = 0;
        //          var y = 0;
        //          var xrun = true;
        //          var yrun = true;
        //          var pauseOrStart = true;
        //
        //          function run() {
        //
        //              var left_x = pageXOffset;
        //              var top_y = pageYOffset;
        //              var img = document.getElementById("img");
        //              var right_x = left_x + innerWidth - img.width;
        //              var bottom_y =  top_y + innerHeight - img.height;
        //              if(yrun) {
        //                  moveBottom();
        //              } else {
        //                  moveTop();
        //              }
        //              if(xrun) {
        //                  moveRight();
        //              } else {
        //                  moveLeft();
        //              }
        //              if(y == bottom_y) {
        //                  yrun = false;
        //              }
        //              if(y == top_y) {
        //                  yrun = true;
        //              }
        //              if(x == left_x) {
        //                  xrun = true;
        //              }
        //              if(x == right_x) {
        //                  xrun = false;
        //              }
        //              img.style.left = x + "px";
        //              img.style.top = y + "px";
        //          }
        //
        //          function moveRight() {
        //              x++;
        //
        //          }
        //
        //          function moveLeft() {
        //              x--;
        //          }
        //
        //          function moveTop() {
        //              y--;
        //          }
        //
        //          function moveBottom() {
        //              y++;
        //          }
        //
        //          function change_move() {
        //              if(pauseOrStart) {
        //                  window.clearInterval(myEvent);
        //                  pauseOrStart = false;
        //              } else {
        //                  myEvent = window.setInterval("run()", 6);
        //                  pauseOrStart = true;
        //              }
        //          }

        $(function () {
            //img的开始点
            var x = 0;
            var y = 0;
            //距离左边和上边的距离2个像素
            var x_left = 2;
            var y_top = 2;

            //获得窗体的边界
            var width = innerWidth;
            var height = innerHeight;

            var move = false;

            function clear() {
                if (x > (width - 410) || x < 0) {
                    x_left = -x_left;
                }
                if (y > (height - 256) || y < 0) {
                    y_top = -y_top;
                }
                x = x + x_left;
                y = y + y_top;
                var x_px = x + "px";
                var y_px = y + "px";
                $("#img").css("left", x_px);
                $("#img").css("top", y_px);
            }

            var remove = setInterval(clear, 10);
            $("#move").click(function () {
                if (move) {
                    alert("shhsh");
                    remove = setInterval(clear, 10);
                    move = true;
                } else {
                    clearInterval(remove);
                    move = false;
                }

            });

        });
    </script>
</head>

<body>
![](img/2.jpg)<br/>
<input type="button" id="move" value="暂停" style="width: 60px;background-color: orange;"/>
</body>
</html>