Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/9: Рейтинг темы: голосов - 9, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 27.11.2017
Сообщений: 84

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

24.12.2017, 18:18. Показов 1963. Ответов 3

Студворк — интернет-сервис помощи студентам
Привет, нужно разработать скрипт смайлика, улыбающегося при наведении курсора, как это сделать?
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.12.2017, 18:18
Ответы с готовыми решениями:

Смена курсора при наведении
Есть код на jQuery, создающий простой спойлер на странице. Недостаток в том, что при наведении на текст, который раскрывает спойлер, курсор...

При наведении курсора на картинку
Добрый вечер! К сути: Хотелось сделать так, чтобы при наведении курсора на картинку подсвечивался рамкой текст расположенный в другом...

Почему не работает? запуск при наведении курсора и остановка при потере фокуса курсором
Почему не работает? <script type="text/javascript"> window.onload = function(){ function soundSTAR() { ...

3
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
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%;}
0
0 / 0 / 0
Регистрация: 27.11.2017
Сообщений: 84
25.12.2017, 00:05  [ТС]
Да, сказали обязательно с использованием Canvas. Так бы я и сам сделал, но Canvas что-то пока не пойму...

Добавлено через 3 часа 50 минут
Я уже всё сделал, тему можно закрыть.
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
25.12.2017, 00:33
Лучший ответ Сообщение было отмечено macr как решение

Решение

Темы здесь не закрывают. Это источник знаний для тех, кто придет сюда с тем же вопросом. Рад, что вы сами справились. Решение надо было оставить для следующих. На всякий случай оставлю это здесь. Песочница
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);
}
2
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
25.12.2017, 00:33
Помогаю со студенческими работами здесь

Горизонтальная прокрутка при наведении курсора
Добрый день. Подскажите пожалуйста, как реализовать горизонтальную прокрутку вправо(влево) при подведении курсора к правой(левой) части...

Появление блока при наведении курсора
&lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;ru-RU&quot;&gt; &lt;head&gt; &lt;title&gt;...&lt;/title&gt; &lt;/head&gt; &lt;style&gt; #cat-block {display: none;} ...

Выделение текста при наведении курсора
Здравствуйте. Я не совсем уверен, что пишу на нужную ветку форума (не уверен, что это js), поправьте, если я ошибся. Я хочу реализовать...

Подсказка при наведении курсора мыши
Смотрю видеоурок, и там переписал вот такой код. Должно при наведении на текст ,как там говорится повится должна подсказка. Вот...

Увеличение картинки при наведении курсора
помогите пожалуста . при наведение должно увеличитса картина . что я не правильно сделал &lt;html&gt; &lt;head&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Знаешь почему 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
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru