Смайлик, улыбающийся при наведении курсора

@macr · Регистрация: 27.11.2017

Студворк — интернет-сервис помощи студентам

Привет, нужно разработать скрипт смайлика, улыбающегося при наведении курсора, как это сделать?

Qwerty_Wasd · 24.12.2017, 19:15

macr, обязательно скрипт? можно на css сделать. И лишний скрипт подключать не надо. К примеру - песочница

HTML5
1
2
3
4
5
<div class="face">
  <div class="eye one">.</div>
  <div class="eye two">.</div>
  <div class="mouth"></div>
</div>

CSS
1
2
3
4
5
6
7
.face{position:relative;height:100px;width:100px;border:1px solid;border-radius:50%;background:yellow;}
.eye,.mouth{position:absolute;}
.eye{height:15px;width:15px;border:1px solid;border-radius:50%;background:white;line-height:0.2;font-size:20px;font-weight:bolder;text-align:center;}
.one{top:25px;left:20px;}
.two{top:25px;right:20px;}
.mouth{height:50px;width:50px;left:50%;top:50%;transform:translate(-50%,-50%);border-bottom:3px solid;border-radius:10%;transition:1s;}
.face:hover>.mouth{border-radius:40%;}

@macr · 25.12.2017, 00:05 **[ТС]**

Да, сказали обязательно с использованием Canvas. Так бы я и сам сделал, но Canvas что-то пока не пойму...

Добавлено через 3 часа 50 минут
Я уже всё сделал, тему можно закрыть.

Qwerty_Wasd · 25.12.2017, 00:33

Темы здесь не закрывают. Это источник знаний для тех, кто придет сюда с тем же вопросом. Рад, что вы сами справились. Решение надо было оставить для следующих. На всякий случай оставлю это здесь. Песочница

HTML5
1
<canvas id="canvas" width="150px" height="150px"></canvas>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var ctx,cpx=75,cpy=90,smileOnTimer,smileOffTimer;
function drawSmile(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "yellow";
  ctx.beginPath();
  ctx.arc(75,75,50,0,Math.PI*2,true);
  ctx.fill();
  ctx.stroke();
  //------------------------
  ctx.moveTo(65,65);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(60,65,5,0,Math.PI*2,true);
  ctx.fill();
  ctx.stroke();
  //---------------------------------
  ctx.moveTo(95,65);
  ctx.beginPath();
  ctx.arc(90,65,5,0,Math.PI*2,true);
  ctx.fill();
  ctx.stroke();
  //-----------------------------
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.moveTo(95,90);
  ctx.quadraticCurveTo(cpx, cpy, 55, 90)
  ctx.stroke();
}
function smileOn(){
  clearTimeout(smileOffTimer);   
  drawSmile();
  if(cpy<111) cpy+= 1;
  smileOnTimer=setTimeout("smileOn()",20);
}
function smileOff(){
  clearTimeout(smileOnTimer);    
  drawSmile();
  if(cpy>90) cpy-= 1;
  smileOffTimer=setTimeout("smileOff()",20);
}
window.onload = function() {
  ctx = canvas.getContext('2d');
  drawSmile();
}
canvas.onmouseover=function(){
  setTimeout("smileOn()",20);
}
canvas.onmouseout=function(){
  setTimeout("smileOff()",20);
}

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@macr 0 / 0 / 0 Регистрация: 27.11.2017 Сообщений: 84

	Смайлик, улыбающийся при наведении курсора 24.12.2017, 18:18. Показов 1963. Ответов 3 Метки jquery, jquery javascript (Все метки) Привет, нужно разработать скрипт смайлика, улыбающегося при наведении курсора, как это сделать? 0

@macr 0 / 0 / 0 Регистрация: 27.11.2017 Сообщений: 84
	25.12.2017, 00:05 [ТС]
	Да, сказали обязательно с использованием Canvas. Так бы я и сам сделал, но Canvas что-то пока не пойму... Добавлено через 3 часа 50 минут Я уже всё сделал, тему можно закрыть. 0