Новичок, научись у меня эффекту буферизации.

Автор：Eve Cole Время обновления：2009-06-20 16:54:28

Прежде всего, я хочу сказать, что да, и эти статьи посвящены тем, кто хочет учиться, как я. Несколько друзей на форуме опубликовали эффекты буферизации, но мне действительно больно читать их код. Поскольку они не находятся на одном уровне, я использую наиболее избыточный код для написания этого эффекта. Цель состоит в том, чтобы надеяться, что вы сможете это понять. Когда у нас это не получится, мы вернемся и посмотрим на вещи. Мастера, наконец, поверьте этому предложению:
Однажды ты станешь мастером (при условии, что будешь усердно работать, ха-ха^^)

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</ title> </head> <style> body {font-size:12px} #box {background:#FFFFCC; border:1px Solid #FFCC66; высота:100px;display:none; text-align:right; поле: 2 пикселя; переполнение: скрыто} #box2 {background: # CDEDEC; граница: 1 пиксель твердого #3399CC; высота: 100 пикселей; дисплей: нет; выравнивание текста: право; переполнение: скрыто} . bt_down {background: #DDDCE4 url(/u/info_img/2009-06/20/arrow_down.gif) без повтора 35 пикселей 46%; отступ: 5 пикселей 20 пикселей 5 пикселей 5 пикселей; text-align: left} #my {} #my . my_ {background:#DDDCE4; ширина: 200 пикселей; высота: 150 пикселей; переполнение: скрыто} #my .my_ ul {list-style: none; поля: 10 пикселей 0 10 пикселей 10 пикселей высота: 140 пикселей} #my .my_ ul li {width:48%; text-align:center; border-bottom:1px Solid #B6B6C0} #s_img {width:430px; y: скрытый; overflow-x: скрытый; граница: 1px Solid #ccc} #imgs ul { list-style: none; 3px;} </style> <script> //Я не буду комментировать аналогичные, повторенные ниже~~ //от быстрого к медленному //Объявляем функцию f_s() function f_s(){ var obj= document.getElementById( "box"); //Получить объект с идентификатором box obj.style.display="block" //Установить объект obj для отображения obj.style.width="1px" //Установить объект obj Ширина is 1px varchangeW=function(){ //(О функциях, замыканиях, классах и прототипах у меня голова закружилась. Я пойму это позже. Здесь я понимаю, что нужно создать литерал функции и сохранить его в переменнойchangeW) var obj_w=parseInt(obj.style.width);//Преобразовать ширину объекта в числовое значение и сохранить ее в переменной obj_w; if (obj_w<600){ //Оцените, если значение ширины меньше 600 obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//Вычисляем ширина объекта. . . По мере увеличения ширины приращение становится все меньше и меньше } else{clearInterval(bw);//Если оно больше или равно 600, setInterval больше не будет выполняться, а это означает, что ширина в этот момент перестанет увеличиваться . } } var bw=window.setInterval(changeW,1)//Вызов ChangeW каждые 0,001 секунды } //от медленного до быстрого //Объявляем функцию s_f() function s_f(){ var obj=document.getElementById("box2") ; var e_add=1;//Инкремент инициализации obj.style.display="block"; obj.style.width="1px"; varchangeW=function(){//Я понимаю, что функция принимает прямое значение value и сохраняет его в переменнойchangeW var obj_w;e_add obj_w=parseInt(obj.style.width); e_add*=1.05;//Значение, которое будет увеличиваться каждый раз после этого, равно if(obj_w<600){ obj .style. width=(obj_w+e_add)+"px";//По мере увеличения ширины приращение становится все больше и больше} else{clearInterval(bw); obj.style.width="600px";// Потому что метод расчета of (obj_w+e_add) превысит предопределенную ширину, поэтому его ширина сбрасывается после буферизации. Это создает иллюзию, ха-ха} } var bw=window.setInterval(changeW,1) } // Функция закрытия слоя closeW(id,w) { var obj=document.getElementById(id);//Получаем объект с идентификатором box obj.style.width=w; var closeDiv=function() { var obj_w=parseInt(obj. style.width); 1){ obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Вычисляем ширину объекта. . . По мере увеличения ширины приращение становится все меньше и меньше} else{clearInterval(bw); obj.style.display="none" } } var bw=window.setInterval(closeDiv,1)//Вызов каждые 0,001 секунды Один ChangeW } //Следующая функция должна открыть мою ↓ функцию open_my(){ var obj=document.getElementById("my_");//Получить объект с полем идентификатора obj.style.display="block";// Установить объект obj для отображения obj.style.width="1px" //Установим ширину объекта obj на 1 пиксель obj.style.height="1px"; varchangeW=function(){ //(О функции, какие замыкания, классы и прототипы меня сбивают с толку. Я пойму это позже. Здесь я понимаю, что нужно создать литерал функции и сохранить его в переменнойchangeW) var obj_w=parseInt(obj.style.width);//Convert ширину объекта в числовое значение и сохраните его в переменной obj_w; var obj_h=parseInt(obj.style.height); if(obj_w<200 && obj_h<150){ //Оцените, равна ли ширина значения меньше 600 obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//Вычисляем ширину объекта. . . По мере увеличения ширины приращение становится все меньше и меньше obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px" } else{clearInterval(bw);// If оно больше или равно 600, setInterval больше не будет выполняться, а это значит, что ширина в это время перестанет увеличиваться. } } var bw=window.setInterval(changeW,1)//Вызов ChangeW каждые 0,001 секунды } //Следующая функция предназначена для закрытия моего ↓ отображаемого слоя function close_my(id){ var obj=document.getElementById(id );/ /Получаем объект с полем идентификатора var closeDiv=function(){ var obj_w=parseInt(obj.style.width); var obj_h=parseInt(obj.style.height); if(obj_w>1 && obj_h >1 ){ obj .style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//Вычисляем ширину объекта. . . По мере увеличения ширины приращение становится все меньше и меньше obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px" } else{clearInterval(bw); obj.style.display= " none"; } } var bw=window.setInterval(closeDiv,1)//Вызов ChangeW каждые 0,001 секунды } </script> <body> Прежде всего хочу сказать, что эти статьи посвящены людям, которые хотят того же такие же вещи, как я. Те, кто учится.<br /><br /> Несколько друзей на форуме опубликовали эффекты буферизации, но мне очень больно смотреть на их коды, потому что они не на одном уровне.<br / ><br />Поэтому я использую наиболее избыточный код для написания этого эффекта, цель состоит в том, чтобы надеяться, что люди смогут его понять.<br /><br />Когда у нас это не получится, мы вернемся и посмотрим в вещах мастеров <br /><br /> Наконец, пожалуйста, поверьте этому предложению:<br /><br /> Однажды вы станете мастером (при условии, что вы будете усердно работать, ха-ха^^)<br / ><br /> <a href="#" onclick="f_s()">От быстрого к медленному</a>  <br /><br /> <a href="#" onclick=" s_f(); return false ">От медленного к быстрому</a>  <br /><br /> <div id="box" ><h3>Быстро->Медленно<a href="#" onclick="closeW(' box','600px')">[Закрыть]</a></h3></div> <div id="box2" ><h3>Медленно->Быстро<a href=" #" onclick="closeW ('box2','600px')">[Закрыть]</a></h3></div> <h3>Теперь, когда мы создали этот эффект, мы должны применить его на практике< /h3 > <h3>Теперь давайте посмотрим на фактическое применение эффекта буферизации</h3> <div id="my"> <a href="#" class="bt_down" onmouseover="open_my()" >Мои</a> <div class="my_" id="my_" > <ul> <li>Мои темы</li> <li>Мои коллекции</li> <li>Мои разрешения</li> < li>Мой голос</li> <li>Моя деятельность</li> <li>Мой город</li> <li>Мои работы</li> <li>Мой адрес</li> <li>Мой опыт< /li> <li>Мои друзья</li> <li>Мое пространство</li> <li><a href="#" onclick="close_my('my_')"> Закрыть</a></li > </ul> </div> </div> <br /> <br /> <div id="s_img" style="width:430px;"> <div id=" imgs" style="width:1700px ;"> <ul> <li><img src="/u/info_img/2009-06/20/work_577_8421_20080902_112516_6677857_t.jpg" /></li> <li><img src="/u/info_img/2009- 20.06/work_352426_8413_20080901_201448_1164245_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_291488_8330_20080829_151 402_6235352_t. jpg" /></li > <li><img src ="/u/info_img/2009-06/20/work_577_8423_20080902_115301_643310_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_23709_8344_2008083 0_123900_9 878235_t .jpg" />< /li> <li><img src="/u/info_img/2009-06/20/work_387129_8408_20080901_180829_5234680_t.png" /></li> <li><img src="/u/info_img /2009-06/20 /work_443685_8362_20080831_093043_8349305_t.jpg" /></li> <li><img src="/u/info_img/2009-06/20/work_202433_8401_20080901_163123_1710 510_t.jpg /></li > </ul> </div> < /div><br /> <a href="#" onclick="scrol(); return false">Прокрутить влево</a> <a href="#" onclick="scrol() ; return false">Прокрутить правильно</a><br /><br /> Конечно, описанный выше эффект используется мной только для демонстрации эффекта буферизации.<br /><br /> Он не подходит для такого рода эффектов. потому что функция, которую я здесь написал, будет передана только один раз.<br /><br /> Кажется, не очень легко использовать этот метод несколько раз.<br /><br /> Наконец, позвольте мне сказать: не меня обмануть. Код здесь меня пугает.<br /><br />Он выглядит очень большим, в основном из-за двух последних примеров, из-за чего код выглядит очень объемным.<br /><br /> Что действительно важно, это f_s(), s_f(), closeW()<br /><br /> Если вы это понимаете, то вы тоже можете сделать выводы.<br /><br /> На сегодня это все. надеюсь, что эти вещи могут быть вам чем-то полезны ^^<br /><br />               &nbsp. ;            <br /> <script type="text/javascript"> function scror(){ var obj=document.getElementById(" s_img"); var h=function(){ var obj_w=parseInt(obj.style.width); if(obj.scrollLeft<obj_w){ obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj. ScrollLeft)/15)); } else {clearInterval(bw); } } var bw=window.setInterval (h,1) } function Scroll(){ var obj=document.getElementById("s_img"); () { var obj_w = parseInt(obj.style.width); if(obj.scrollLeft>1) { obj.scrollLeft-=Math.ceil(obj_w)/50; } else {clearInterval(bw) } var bw; =window.setInterval(h,1) //obj.scrollLeft-=parseInt(obj.style.width } </script> </body> </html>;
[Ctrl+A. Все советы по выбору: сначала можно изменить часть кода, а затем нажать «Выполнить».]

Посмотрите на эти два кода клавиш:

//от медленного к быстрому, от медленного к быстрому
//Объявляем функцию s_f()
функция s_f(){
var obj=document.getElementById("box2");
var e_add=1;//Приращение инициализации
obj.style.display="блок";
obj.style.width="1px";
varchangeW=function(){//Я понимаю, что нужно создать литерал функции и сохранить его в переменной ChangeW.
вар obj_w;e_add
obj_w = parseInt (obj.style.width);
e_add*=1.05;//Значение каждого последующего приращения равно
если (obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//По мере увеличения ширины приращение становится все больше и больше
}
еще{
очиститьИнтервал (чб);
obj.style.width="600px";//Потому что (obj_w+e_add) этот метод расчета будет превышать предопределенную ширину, поэтому его ширина сбрасывается после буферизации. Это создает иллюзию, ха-ха.
}
}
вар bw=window.setInterval(changeW,1)
}