<?xml version="1.0" encoding="utf-8"?><rss version="2.0"><channel><title>Deerua about Coding: последние заметки с тегом &amp;laquo;address bar&amp;raquo;</title><link>http://deer.org.ua/keywords/address-bar/</link><description></description><language>ru</language><generator>e2 (http://blogengine.ru/)</generator><item><title>Javascript Image Carusel :D</title><guid isPermaLink="true">http://deer.org.ua/2009/06/18/2/</guid><link>http://deer.org.ua/2009/06/18/2/</link><comments>http://deer.org.ua/2009/06/18/2/comments/</comments><description>Зайдите на любую страницу, где много картинок, и вставьте эту строку в адресную строку &lt;textarea onclick="select();" style="width: 600px; height: 20px;"&gt;javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);&lt;/textarea&gt;&lt;br /&gt;&lt;br /&gt;Что же там происходит? ;) &lt;pre&gt;&lt;span class="hl-identifier"&gt;R&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;0&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;x1&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;.1&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;y1&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;.05&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;x2&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;.25&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;x3&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;1.6&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;y2&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-identifier"&gt;y3&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;.24&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;x4&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-identifier"&gt;x5&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;300&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;y4&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-identifier"&gt;y5&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;200&lt;/span&gt;&lt;span class="hl-default"&gt;;
&lt;/span&gt;&lt;span class="hl-comment"&gt;/* Собираем все картинки не старнице */
&lt;/span&gt;&lt;span class="hl-identifier"&gt;DI&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-builtin"&gt;document&lt;/span&gt;&lt;span class="hl-default"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;getElementsByTagName&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-string"&gt;img&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIL&lt;/span&gt;&lt;span class="hl-default"&gt;=&lt;/span&gt;&lt;span class="hl-identifier"&gt;DI&lt;/span&gt;&lt;span class="hl-default"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;length&lt;/span&gt;&lt;span class="hl-default"&gt;;  &lt;/span&gt;&lt;span class="hl-comment"&gt;/* считаем их */
&lt;/span&gt;&lt;span class="hl-reserved"&gt;function &lt;/span&gt;&lt;span class="hl-identifier"&gt;A&lt;/span&gt;&lt;span class="hl-brackets"&gt;(){
	&lt;/span&gt;&lt;span class="hl-reserved"&gt;for&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;i&lt;/span&gt;&lt;span class="hl-code"&gt;=&lt;/span&gt;&lt;span class="hl-number"&gt;0&lt;/span&gt;&lt;span class="hl-code"&gt;; &lt;/span&gt;&lt;span class="hl-identifier"&gt;i&lt;/span&gt;&lt;span class="hl-code"&gt;-&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIL&lt;/span&gt;&lt;span class="hl-code"&gt;; &lt;/span&gt;&lt;span class="hl-identifier"&gt;i&lt;/span&gt;&lt;span class="hl-code"&gt;++&lt;/span&gt;&lt;span class="hl-brackets"&gt;){
		&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIS&lt;/span&gt;&lt;span class="hl-code"&gt;=&lt;/span&gt;&lt;span class="hl-identifier"&gt;DI&lt;/span&gt;&lt;span class="hl-brackets"&gt;[ &lt;/span&gt;&lt;span class="hl-identifier"&gt;i &lt;/span&gt;&lt;span class="hl-brackets"&gt;]&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;style&lt;/span&gt;&lt;span class="hl-code"&gt;; 
		&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIS&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;position&lt;/span&gt;&lt;span class="hl-code"&gt;=&lt;/span&gt;&lt;span class="hl-quotes"&gt;'&lt;/span&gt;&lt;span class="hl-string"&gt;absolute&lt;/span&gt;&lt;span class="hl-quotes"&gt;'&lt;/span&gt;&lt;span class="hl-code"&gt;; &lt;/span&gt;&lt;span class="hl-comment"&gt;/* делаем позишон абсолюте */
		/* Дальше по тригонометрической формуле начинаем вращать */
		&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIS&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;left&lt;/span&gt;&lt;span class="hl-code"&gt;=&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-builtin"&gt;Math&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;sin&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;R&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;x1&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;i&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;x2&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;x3&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;x4&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;x5&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-string"&gt;px&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-code"&gt;; 
		&lt;/span&gt;&lt;span class="hl-identifier"&gt;DIS&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;top&lt;/span&gt;&lt;span class="hl-code"&gt;=&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-builtin"&gt;Math&lt;/span&gt;&lt;span class="hl-code"&gt;.&lt;/span&gt;&lt;span class="hl-identifier"&gt;cos&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-identifier"&gt;R&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;y1&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;i&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;y2&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;y3&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt;*&lt;/span&gt;&lt;span class="hl-identifier"&gt;y4&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-identifier"&gt;y5&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-code"&gt;+&lt;/span&gt;&lt;span class="hl-quotes"&gt;"&lt;/span&gt;&lt;span class="hl-string"&gt;px&lt;/span&gt;&lt;span class="hl-quotes"&gt;"
	&lt;/span&gt;&lt;span class="hl-brackets"&gt;}
	&lt;/span&gt;&lt;span class="hl-identifier"&gt;R&lt;/span&gt;&lt;span class="hl-code"&gt;++
&lt;/span&gt;&lt;span class="hl-brackets"&gt;}
&lt;/span&gt;&lt;span class="hl-comment"&gt;/* Вращать с задержкой в 50мл.сек */
&lt;/span&gt;&lt;span class="hl-identifier"&gt;setInterval&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-quotes"&gt;'&lt;/span&gt;&lt;span class="hl-string"&gt;A()&lt;/span&gt;&lt;span class="hl-quotes"&gt;'&lt;/span&gt;&lt;span class="hl-code"&gt;,&lt;/span&gt;&lt;span class="hl-number"&gt;50&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-default"&gt;; 
&lt;/span&gt;&lt;span class="hl-reserved"&gt;void&lt;/span&gt;&lt;span class="hl-brackets"&gt;(&lt;/span&gt;&lt;span class="hl-number"&gt;0&lt;/span&gt;&lt;span class="hl-brackets"&gt;)&lt;/span&gt;&lt;span class="hl-default"&gt;;&lt;/span&gt;&lt;/pre&gt;&lt;hr /&gt;&lt;a href="http://deer.org.ua/2009/06/18/2/comments/"&gt;Комментарии&lt;/a&gt; к заметке&lt;br /&gt;&lt;br /&gt;Теги:&lt;br /&gt;&lt;a href="http://deer.org.ua/tags/browsers/"&gt;browsers&lt;/a&gt; &amp;gt; &lt;a href="http://deer.org.ua/tags/browsers/address-bar/"&gt;address bar&lt;/a&gt;&lt;br /&gt;&lt;a href="http://www.deer.org.ua/tags/javascript/"&gt;javascript&lt;/a&gt;</description><pubDate>Thu, 18 Jun 2009 11:03:04 +0200</pubDate></item></channel></rss>