20.11.2017, 16:53
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
void(),
Всё равно нет.
|
|
20.11.2017, 16:59
|
 |
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Rise,
тогда воспользуюсь старым добрым piccy.info. Спасибо, что обратили на это внимание, а то я бы так и постил картинки, а их никто бы не видел. Капец 
Да тут картинка - это сильно звучит) каракули, только чтобы понять смысл.
|
|
20.11.2017, 17:01
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
void(),
У меня в хроме вполне видны.
В ИЕ - тоже. Теперь все три.
|
|
20.11.2017, 17:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
Rise,
видно?
|
|
20.11.2017, 21:59
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Dilettante_Pro, рони, сейчас видно.
void(), это canvas, точки можно выбрать по теореме Пифагора, т.е. курсор это центр окружности, точки тоже окружности, получается пересечение окружностей, расстояние между центрами гипотенуза, такая формула:
function intersection(circle1, circle2) {
return circle1.radius + circle2.radius > Math.hypot(circle1.x - circle2.x, circle1.y - circle2.y);
}
Последний раз редактировалось Rise, 20.11.2017 в 22:16.
|
|
21.11.2017, 10:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
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>
|
|
21.11.2017, 13:16
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Все забрал - пошел разбираться и писать код.
Rise,
Спасибо за формулу, класс!
рони - все-таки нереально крутой. нет слов)  |
|
21.11.2017, 15:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
void(),
на всякий случай, сделано из прошлого варианта, некоторые строки лишние , нет оптимизации, можно попробовать убрать строку 26
|
|
21.11.2017, 18:51
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
|
рони,
ок.
|
|
21.11.2017, 20:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
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>
|
|
|
|
