Это выходные, пришло время подвести итог завтра. Я чувствую, что узнал кое -что, но я чувствую, что не многому научился. Давайте проанализируем это завтра. Давайте посмотрим на проблемы, которые я хочу проанализировать сегодня.
Все знакомы с этой картиной:
-
Сегодня мы проанализируем и создадим его. Давайте сначала представим характеристики этой всплывающей коробки:
* Всегда прикрепляется к границе страницы
* Не меняйте позицию, когда страница поднимается и падает
* Когда мышь пройдет мимо, появится подробная информация, и когда она уйдет, она вернется к своему первоначальному состоянию.
Таким образом, мы можем примерно думать о нескольких возможных функциях: абсолютное позиционирование поста; мониторинг и методы прохождения мыши; Они определенно будут использоваться, но какие другие используются, кроме этого, и как они реализованы?
1. Реализуйте все отображаемое состояние интерфейса
Сначала напишите HTML -код
Кода -копия выглядит следующим образом:
<span style = "font-size: 12px;"> <div id = "shareleft">
<div>
<p> <a href = "#"> tip </a> </p>
</div>
<p id = "mainmsg" onmouseover = "showtip ()">
Поделиться
</p>
</div> </span>
Затем кодировка стиля CSS
Кода -копия выглядит следующим образом:
<span style = "font-size: 12px;">*{margin: 0; Padding: 0;}
#shareleft {положение: фиксированное; фоновое цветовое: желтый; верх: 50px; ширина: 300px; высота: 600px; справа: 0px;}
#mainmsg {color: #fff; положение: абсолютное; курсор: указатель; текстовый альбом: Центр; фоновый цвет: красный; вверху: 60px; ширина: 100px; высота: 400px; прокладка: 20px 0 0 10px; маргина-лето: -100px; граница-радий: 50px 0 0 50px; }
.list {float: справа; фоновый цвет: #fff; width: 280px; высота: 580px; маржа: 10px 10px 10px 10px;} </span>
Давайте проанализируем ключевые моменты здесь: a. Пост: Фиксированная позиция очень хорошая; беременный Справа: 0PX, конкретное применение этого будет подробно объяснено позже, но здесь также очень важно; 3.
Ха-ха, это самая большая всплывающая коробка года. Давайте продолжим говорить о всплывающем эффекте JS
2. Скрыть подробную часть, побуждая к тому, что часть протекает снаружи
Это относительно просто. Чтобы изменить его, просто измените правильное значение Shareleft, right = -300px, что является шириной дивизий
3. JS для достижения всплывающего эффекта
Это не первый раз, когда мы использовали эффект этого таймера. Мы применили его, когда JS реализует эффект пишущей машинки. Здесь мы только что изменили объект времени.
Кода -копия выглядит следующим образом:
<span style = "font-size: 12px;"> <script type = "text/javascript">
var timer = null;
var count = 0;
var tip = function (положение, цель, скорость) {
ClearInterval (таймер);
timer = setInterval (function () {
if (count> position.offsetwidth) {
ClearInterval (таймер);
}еще{
position.style.right+= window.count+"px";
window.count ++;
};
}, скорость);
};
функция showtip () {
var position = document.getElementbyId ("shareleft");
TIP (позиция, Document.Body.ClientWidth, 1000);
};
</script> </span>
Наиболее важными моментами для обращения внимания в этом коде являются: OffsetWidth, .style.right и т. Д. Я пока не буду говорить об этом. Я представлю это специально. Давайте сначала используем его, просто знаем смысл.
После того, как вы это тщательно поймут, эффект будет достигнут сейчас, так что вы также можете попробовать его.