В апреле этого года я создал в своем общежитии эффект перелистывания страниц с помощью перетаскивания.
Первоначально он был разработан для моего собственного блога. Идея пришла мне во вторник. Я пропустил занятия на два дня в среду и четверг, чтобы посчитать координаты. В пятницу я пошел домой и написал первую версию, которую не написал. Ожидаю, что отзывы после его выпуска были довольно хорошими. Многие люди спрашивали меня, как мне изменить этот эффект, чтобы я мог использовать его на своем веб-сайте, поэтому я публикую этот пост, чтобы подробно объяснить принцип этого эффекта.
Я официально называю этот эффект ThrowPage, и я обязательно продолжу улучшать этот эффект и выпущу инкапсулированный код, чтобы каждый мог позвонить. Может быть, через месяц, может быть, через год, In Me God Trust.
Эта статья будет написана в виде трех отдельных уровней: структурного уровня, уровня представления и поведенческого уровня:
Окно запуска кода
<html>
<голова>
<title>ThrowPage</title>
<style type="text/css">
HTML, тело {
ширина: 100%;
высота: 100%;
граница: 0 пикселей;
поле: 0 пикселей;
переполнение: скрыто;
}
#меню{
ширина: 1000 пикселей;
высота: 500 пикселей;
переполнение: скрыто;
фон: светло-голубой;
}
.страница{
позиция: абсолютная;
ширина: 300 пикселей;
высота: 400 пикселей;
слева: 350 пикселей;
верх: 50 пикселей;
фон: #FFF;
граница: 1 пиксель, сплошной #999;
}
ул {
стиль списка: нет;
высота: 320 пикселей;
поле: 20 пикселей;
отступ: 0 пикселей;
фон: #EEE;
}
ли {
размер шрифта: 12 пикселей;
высота: 20 пикселей;
высота строки: 20 пикселей;
border-bottom:1px пунктирный #999;
}
ли спан {
плавать: вправо;
}
Ли а {
цвет:#000;
текстовое оформление: нет;
}
ли а:hover{
текстовое оформление: подчеркивание;
}
.кончик{
дисплей: блок;
высота: 20 пикселей;
поле: 0 пикселей 20 пикселей;
высота строки: 20 пикселей;
выравнивание текста: по центру;
размер шрифта: 12 пикселей;
фон:#999;
}
</стиль>
</голова>
<тело>
<тип сценария="текст/javascript">
идентификатор функции (объект) {
вернуть document.getElementById(obj);
}
страница вар;
вармкс;
вар мд = ложь;
вар ш=0;
вар ен = ложь;
window.onload=function(){
page=id("меню").getElementsByTagName("div");
если(страница.длина>0){
страница[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].innerHTML+="<span class="tip">"+(i+1)+"/"+page.length+"Перетаскивание страницы</span>";
страница[i].id="страница"+i;
страница[i].i=i;
страница[i].onmousedown=функция(e){
если(!ru){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
мх=350-ех;
this.style.cursor="переместить";
мд = истина;
если(документ.все){
это.setCapture();
}еще{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
страница[i].onmousemove=function(e){
если (мд) {
ен = правда;
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:ex;
this.style.left=ex+mx+"px";
если(this.offsetLeft<350){
var cu=(this.i==0)?page.length-1:this.i-1;
страница[sh].style.zIndex=0;
страница[cu].style.zIndex=1;
this.style.zIndex=2;
ш=ку;
}
если(this.offsetLeft>350){
var cu=(this.i==page.length-1)?0:this.i+1;
страница[sh].style.zIndex=0;
страница[cu].style.zIndex=1;
this.style.zIndex=2;
ш=ку;
}
}
}
страница[i].onmouseup=function(){
this.style.cursor="default";
мд = ложь;
если(this.offsetLeft==350){
ен = ложь;
}
если(документ.все){
this.releaseCapture();
}еще{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
всплывающее окно (это);
}
}
}
всплывающее окно функции(obj){
если (obj.offsetLeft <350) {
if( (obj.offsetLeft - 10) > 50 ){
obj.style.left=obj.offsetLeft - 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}еще{
obj.style.left= 50 +"px";
obj.style.zIndex=0;
летать (идентификатор (obj.id));
}
}
если (obj.offsetLeft > 350) {
if((obj.offsetLeft + 10) <650){
obj.style.left=obj.offsetLeft + 10 + "px";
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}еще{
obj.style.left= 650 + "px";
obj.style.zIndex=0;
летать (идентификатор (obj.id));
}
}
}
функция летать(obj){
если (obj.offsetLeft<350){
if((obj.offsetLeft + 10) <350){
obj.style.left=obj.offsetLeft + 10+"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}еще{
obj.style.left= 350 +"px";
ен = ложь;
}
}
если(obj.offsetLeft>350){
if((obj.offsetLeft - 10) > 350){
obj.style.left=obj.offsetLeft - 10 +"px";
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}еще{
obj.style.left=350+"px";
ен = ложь;
}
}
}
</скрипт>
<div id="меню">
<div класс="страница">
<ул>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Партнер</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Прекрасный остров</a></li>
<li style="background:coral;"><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Танцовщица</a>< /ли>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Рука об руку</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Дом первой любви</a></li>
</ul>
</div>
<div класс="страница">
<ул>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Ах! Неудержимый любовник</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Сеть</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Манящий дождь</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Прошлый 2000 год</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Зеленый террорист</a></li>
</ul>
</div>
<div класс="страница">
<ул>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Время медленно уходит</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Тихий горячий источник</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Цветущие цветы</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> А Хуэй вырастил собаку</a></li >
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Правда или ложь</a></li>
<li><span>25.11.09</span> <a href=" http://www.oern.cn " target="_blank"> Коммунистическая партия Южного Тайваня Цай</a></li>
</ul>
</div>
</div>
</тело>
</html>
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
структурный слой
Как развернуть содержимое каталога постранично? Возможно и так, по крайней мере я так написал
<div id="меню">
<div класс="страница">
<ул>
<li><span>25.11.09</span><a>Песня о любви 1980</a></li>
<li><span>25.11.09</span><a>Песня о любви 1990</a></li>
<li><span>25.11.09</span><a>Песня о любви 2000</a></li>
<li><span>25.11.09</span><a>Мать</a></li>
</ul>
<span class="tip">Перетаскивание на 1/2 страницы</span>
</div>
<div класс="страница">
<ул>
<li><span>25.11.09</span><a>Партнер</a></li>
<li><span>25.11.09</span><a>Пропал</a></li>
<li><span>25.11.09</span><a>Детство</a></li>
<li><span>25.11.09</span><a>Мальчик-пастух</a></li>
</ul>
<span class="tip">2/2 страницы перетаскиваются, чтобы перелистывать</span>
</div>
</div>
.jpg)
<ul> — список каждой страницы, светло-серая часть на картинке
<li> — элемент списка, коралловая часть на картинке
<span class="tip"> не должен отображаться в xhtml и должен быть добавлен js. Это индексный знак под каждой страницей, темно-серая часть на рисунке.
<div class="page"> — страница в каталоге, белая часть на картинке
<div id="menu"> — это каталог, содержащий все страницы (ярко-синяя часть на рисунке). Конечно, если на странице кроме этого эффекта больше ничего нет, то этот тег прописывать не нужно, тогда родительским тегом всех <div class="page"> является <body>
Возможно, вы скажете, что каталог тоже должен быть <ul>, поэтому его следует написать так
<ul id="меню">
<li класс="страница">
<ул>
<li><span>25.11.09</span><a>Песня о любви 1980</a></li>
<li><span>25.11.09</span><a>Песня о любви 1990</a></li>
<li><span>25.11.09</span><a>Песня о любви 2000</a></li>
<li><span>25.11.09</span><a>Мать</a></li>
</ul>
<span class="tip">Перетаскивание на 1/2 страницы</span>
</li>
<ул класс="страница">
<ул>
<li><span>25.11.09</span><a>Партнер</a></li>
<li><span>25.11.09</span><a>Пропал</a></li>
<li><span>25.11.09</span><a>Детство</a></li>
<li><span>25.11.09</span><a>Мальчик-пастух</a></li>
</ul>
<span class="tip">2/2 страницы перетаскиваются, чтобы перелистывать</span>
</li>
</li>
Это действительно более смыслово, но проблема возникнет сразу