Форум

Dilettante_Pro · #11 (**permalink**) 20.11.2017, 17:01

void(),
У меня в хроме вполне видны.
В ИЕ - тоже. Теперь все три.

рони · #12 (**permalink**) 20.11.2017, 17:04

Rise,
видно?

рони · #13 (**permalink**) 21.11.2017, 10:23

void(),

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    position: relative;
    background-color: #FFD700;
  }

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #00008B;
    padding: 0;
    margin: 0;
    z-index: 2;
    transition: width .8s linear;
  }





  .one {
    background-color: #A0522D;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {
            to: $(window)
        };
        var settings = $.extend({}, defaults, options);
        return this.each(function() {
            var from = $(this);
            var x0, y0;
            var x, y, x1, y1, r;
            var to = $(settings.to);
            var hr = $("<hr/>", {
                "class": "connection",
                css: {
                    position: "absolute"
                }
            }).appendTo("body");
            hr.css("transform-origin", 0);
            hr.css("-moz-transform-origin", 0);
            hr.css("-webkit-transform-origin", 0);
            hr.css("-o-transform-origin", 0);

            function fn(event) {
                var pos = from.offset();
                x0 = pos.left - 6;
                y0 = pos.top - 6;
                x1 = event.pageX - 8;
                y1 = event.pageY - 8;
                x = x1 - x0;
                y = y1 - y0;
                var w = Math.sqrt(x * x + y * y);
                w > 150 && (w = 0);
                r = 180 - 180 / Math.PI * Math.atan2(y, x);
                hr.css({
                    left: x1,
                    top: y1,
                    width: w
                });
                hr.css("transform", "rotate(-" + r + "deg)");
                hr.css("-moz-transform", "rotate(-" + r + "deg)");
                hr.css("-webkit-transform", "rotate(-" + r + "deg)");
                hr.css("-o-transform", "rotate(-" + r + "deg)")
            }
            $(document).on({
               mousemove: fn
            })
        })
    }
})(jQuery);

$(function(){
function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }

$.each(Array(40),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem();//
});


  </script>
</head>

<body>

</body>

</html>

void() · #14 (**permalink**) 21.11.2017, 13:16

Все забрал - пошел разбираться и писать код.

Rise,
Спасибо за формулу, класс!

рони - все-таки нереально крутой. нет слов)

рони · #15 (**permalink**) 21.11.2017, 15:45

void(),
на всякий случай, сделано из прошлого варианта, некоторые строки лишние , нет оптимизации, можно попробовать убрать строку 26

void() · #16 (**permalink**) 21.11.2017, 18:51

рони,
ок.

рони · #17 (**permalink**) 21.11.2017, 20:03

void(),
количество ножек "паучка" можно указать в строке 121

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
    height: 100%;
  }

  body{
    position: relative;
    background-color: #FFD700;
  }

  hr.connection{
    position: absolute;
    width: 0px;
    height: 1px;
    background-color: #00008B;
    padding: 0;
    margin: 0;
    z-index: 2;

  }





  .one {
    background-color: #A0522D;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;

  }

  .two{
    border-radius: 8px;
    border: 6px solid #006400;
    position: absolute;
    top: 30%;
    left: 50%;
    background-color:  #228B22;
    z-index: 1;
    width: 128px;
    height: 128px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
(function($) {
    $.fn.connectionItem = function(options) {
        var defaults = {
            num: 5
        };
        var settings = $.extend({}, defaults, options);
        var elems = $(this).get();
        var num = Math.min(settings.num, elems.length);
        var line = $.map(Array(num), function(indx, element) {
            var hr = $("<hr/>", {
                "class": "connection",
                css: {
                    position: "absolute"
                }
            }).appendTo("body");
            hr.css("transform-origin", 0);
            hr.css("-moz-transform-origin", 0);
            hr.css("-webkit-transform-origin", 0);
            hr.css("-o-transform-origin", 0);
            return hr
        });

        function extraction(event) {
            var k = elems.map(function(el) {
                var x0,
                    y0, x, y, x1, y1, r, w, pos;
                pos = $(el).offset();
                x0 = pos.left - 6;
                y0 = pos.top - 6;
                x1 = event.pageX - 8;
                y1 = event.pageY - 8;
                x = x1 - x0;
                y = y1 - y0;
                w = Math.sqrt(x * x + y * y);
                r = 180 - 180 / Math.PI * Math.atan2(y, x);
                return {
                    left: x1,
                    top: y1,
                    width: w,
                    transform: "rotate(-" + r + "deg)"
                }
            }).sort(function(a, b) {
                return a.width - b.width
            }).slice(0, num).forEach(function(css, i) {
                line[i].css(css)
            })
        }
        $(document).on({
            mousemove: extraction
        });
        return this
    }
})(jQuery);

$(function(){
function rand(a) {
        return 5 + Math.floor(Math.random() * a)
    }

$.each(Array(47),function(indx, element){
$('<div>',{css : {top : rand(80)+"%",left : rand(80)+"%"} , "class" : "one"})
.appendTo('body')

      });
$(".one").connectionItem({num : 6});//
});


  </script>
</head>

<body>

</body>

</html>

void() · #18 (**permalink**) 21.11.2017, 20:45

рони,
я в шоке!! Как???

А за счет чего в прошлой версии падала производительность?

Я пытался оптимизировать, но до такого вообще и близко не дотянул)

А, все - я понял) Это "бомба"!

рони · #19 (**permalink**) 21.11.2017, 21:10

Сообщение от void()

А за счет чего в прошлой версии падала производительность?

там было сколько точек столько ножек, не все видно но они есть, сейчас ножки ограничены - меньше прорисовки.

рони · #20 (**permalink**) 23.11.2017, 01:29

Rise,
здорово!

Форум

Справочник

Discord чат

Курсы javascript