Вот специальный эффект ухаживания JavaScript, эффект заключается в следующем:
Мало того, что эффект изображения ниже может появиться, но и рисунок также можно вращать мышью. Это просто простой и немодифицированный пример. Основываясь на этом примере, он может сделать ухаживание более увлекательным. Неохотные мужчины, можете ли вы опубликовать такую веб -страницу своей маленькой лоли? Большой.
Разместите код:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Вставьте заголовок здесь </title>
<стиль типа = "text/css">
тело{
Граница: 1px красное твердое вещество;
Ширина: 1000px;
Высота: 1000px;
Полевая: 0PX Auto;
Заполнение: 0px;
Цвет: зеленый;
}
/*
Перетаскивать объект из потока документов, используя свойства, такие как левый, справа, вверху, внизу и т. Д.
Его ближайший к наиболее позиционированному родительскому объекту для абсолютного позиционирования. Если такого родительского объекта не существует,
Объектом тела. И его каскад определяется атрибутом Z-Index
*/
div {
позиция: абсолютно;
}
</style>
<script type = "text/javascript">
// Почему я должен использовать Onload? Потому что, когда я инициализирую Div часов в коде JavaScript, страница отладки обнаружила, что не было реализации
// Позже я узнал причину, код HTML был проанализирован спереди к спине. Когда сначала анализируя код JavaScript, перейдите в тело
// При добавлении дочерних узлов неразрешенное тело не может быть найдено. Итак, вы должны сначала проанализировать тело. Есть два метода, один
Метод написания //, другой способ добавить метод нагрузки в тег тела.
window.onload = function () {
init ();
};
// Определите массив Div для хранения 12 Divs
// Из -за взаимосвязи между 12 -такими позициями DIV сначала определите точку и радиус для расчета положения DIV
var divs = [];
вар lovebaby = ["i", "love", "you", "you", "bao", "bei", "love", "love", "me", "wan", "wan", "wan", "wan" "wan" "wan" "wan" "w «wan» «wan» «wan» "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" w «wan» «wan» «wan» "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" wan "" "wan" "wan" "" wan "" wan "" "wan" "wan" "" wan "" "w "" "wan" "" wan "" "" wan "" "" wan "" "" wan "" "wan" "" wan "" "wan" "" "wan" "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "" wan "" "wan" "" "wan" "" "wan" "" "wan" ""
var cx = 300;
var CY=300;//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
var diventernode; // положение центральной точки следует контролировать, а глобальные переменные должны быть установлены
// Определите инициализированную функцию
function init () {
// Создать Div в позиции центральной точки (вы можете написать объект ухаживания)
diventernode = document.createElement ("div");
diventernode.innerhtml = "tingting, жениться на мне!";
document.body.appendchild (размер);
diventernode.style.left = (cx-50)+"px";
diventernode.style.top = (cy-30)+"px";
// Создать 12 DOV, чтобы сформировать запрещенные часы и поместите его в организм
for (var x = 1; x <= 12; x ++) {
// Создать Div
var divnode = document.createElement ("div");
divnode.innerhtml = lovebaby [x-1];
// Объект тела не должен быть получен, как другие объекты, и библиотека JS была инкапсулирована.
document.body.appendchild (divnode);
divs.push (divnode);
}
// Каждый раз, когда startClock () начинает перемещать элемент div
/*
Фактически, для достижения эффекта вращения необходимо постоянно компенсировать, или
Перемещение, но петля, вы не можете контролировать, сколько времени требуется, чтобы начать функцию, тогда
В настоящее время объект Window предоставляет метод.
*/
startClock ();
}
// Div's Offset
var offset = 0; // Степень смещения
// Определите функцию для положения и вращения положения отдельно
функция startClock () {
for (var x = 1; x <= 12; x ++) {
var div = divs [x-1];
// степень каждого номера
var dushu = 30*x+смещение;
// значение угла* Math.pi /180 = значение лучей
var divleft = cx+r*math.sin (dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos (dushu*math.pi/180);
div.style.top = divtop+"px";
}
смещение+= 50;
// определенный интервал, обратите внимание на эту функцию
// выражение рассчитывается после указанного миллисекундного значения. Первый параметр - это выражение, второй параметр - время
SetTimeout (StartClock, 80); // Метод объекта окна
}
// Определите эти часы в разные позиции, когда мышь движется
функция ClockMove (Event) {
Cx = event.clientx; // x-координата позиции мыши
Cy = event.clienty; // y-координата позиции мыши
diventernode.style.left = (cx-50)+"px";
diventernode.style.top = (cy-30)+"px";
}
</script>
</head>
<body onmouseMove = "clockmove (event)">
<!-
1. Показать 12 чисел по кругу
1/Create 12 Div, назначить значения 1--12 соответственно
2/Найдите 12 дел и сформируйте круг.
->
</body>
</html>
Первоначально я хотел сделать тактовой дисплей, который мог бы вращаться и работать. Таким образом, именование в коде связано с часами, поэтому я не буду смущен, дорогой. Новички в JavaScript, я чувствую, что JavaScript очень мощный.