Главная » 2011 » Сентябрь » 26 » Плеер как вконтакте. (Javascript)
26.09.2011, 12:59

Плеер как вконтакте.




При переходе на другую страницу, плеер продолжает работать.
Плеер можно перетаскивать.
Минусы:
Для большого кол-ва файлов не подходит.
Плохая одоптация для ucoz!
Если вы всё ещё хотите ставить плеер, то Вам прейдётся переделать структуру сайта.
Создаём страницу:
Code
<html>
<head>
<title>Плеер как Вконтакте от InfoDusha</title>
<script>
  function showContent(link) {

  var cont = document.getElementById('contentBody');
  var loading = document.getElementById('loading');

  cont.innerHTML = loading.innerHTML;

  var http = createRequestObject(); // создаем ajax-объект
  if( http ) {
  http.open('get', link); // инициируем загрузку страницы
  http.onreadystatechange = function () { // назначаем асинхронный обработчик события
  if(http.readyState == 4) {
  cont.innerHTML = http.responseText; // присваиваем содержимое
  }
  }
  http.send(null);  
  } else {
  document.location = link; // если ajax-объект не удается создать, просто перенаправляем на адрес
  }
  }

  // создание ajax объекта
  function createRequestObject() {
  try { return new XMLHttpRequest() }
  catch(e) {
  try { return new ActiveXObject('Msxml2.XMLHTTP') }
  catch(e) {
  try { return new ActiveXObject('Microsoft.XMLHTTP') }
  catch(e) { return null; }
  }
  }
  }
</script>
</head>
<body>
Меню: <a href="#" onclick="showContent('/page1.html')"; return false;">Page1.html</a>
<a href="#" onclick="showContent('/page2.html')"; return false;">Page2.html</a>  
  <div id="contentBody">
Первичный текст
</div>

  <div id="loading" style="display: none">
  Идет загрузка...
  </div><div style="position:absolute;" class="dragable">Тут скрипт плеера</div>  
<script>
function collectElems(){
  var b=document.all||document.getElementsByTagName('*');
  for(var i=0;i<b.length;i++){
  addEvt(b[i],'mousedown',function(a){
  if(mousePosition(a).t.className.match(/dragable/ig)){
  dragElems(mousePosition(a).t,a)
  }
  })
  }
  }
collectElems();
function dragElems(b,c){
  mousePosition(c,'p');
  var i,x,y,l,t;
  i=true;
  x=mousePosition(c).x;
  y=mousePosition(c).y;
  l=b.offsetLeft;
  t=b.offsetTop;
  addEvt(b,'mouseup',function(){i=false});
  addEvt(document,'mouseup',function(){i=false});
  addEvt(document,'mousemove',function(a){
  if(i){
  mousePosition(a,'p');
  b.style.left=l+mousePosition(a).x-x+'px';
  b.style.top=t+mousePosition(a).y-y+'px'
  }
  })
  }
function mousePosition(event,i){
  var d,x,y,t,b;
  d=document;
  b=/*@cc_on!@*/false;
  e=b?window.event:event;
  if(i){b?e.returnValue=false:e.preventDefault()}
  x=(b?d.documentElement.scrollTop:d.body.scrollTop)+e.clientX;
  y=(b?d.documentElement.scrollLeft:d.body.scrollLeft)+e.clientY;
  t=b?e.srcElement:e.target;
  return{x:x,y:y,t:t}
  }
function addEvt(a,b,i){
  if(a.addEventListener){a.addEventListener(b,i,false)}else
  if(a.attachEvent){a.attachEvent('on'+b,i)}else
  {a['on'+b]=i}
}
</script>
</body>
</html>

Замените в файле код плеера, и поставьте меню, офромите под себя..
Ссылки оформлять таким образом:
Code
<a href="#" onclick="showContent('/page1.html')"; return false;">Page1.html</a>

ПС. Сори, я тороплюся в Школу =)
Корявый пример: http://infodusha.narod2.ru/
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Я (infodusha)
Категория: JavaScript's | Просмотров: 6910 | Добавил: InfoDusha | Рейтинг: 5.0/2 |
Теги: Как, ВКонтакте, плеер
Всего комментариев: 17
1 2 »
+1  
1 HOST   (26.09.2011 21:37) [Материал]
Аватар пользователя
скрин добавь и будешь молодчулька)))) biggrin

0  
3 InfoDusha -Infoscript Team-  (27.09.2011 10:51) [Материал]
Аватар пользователя
Всё biggrin cool

0  
2 InfoDusha -Infoscript Team-  (27.09.2011 09:01) [Материал]
Аватар пользователя
ага, ща добавлю, и истукчию переделаю, и сайт- тестовик сделаю нормэ.

0  
4 Voker -Infoscript Team-  (27.09.2011 16:52) [Материал]
Аватар пользователя
Что то он мне вообще не напоминает проигрыватель вконтакте!

0  
5 InfoDusha -Infoscript Team-  (27.09.2011 17:33) [Материал]
Аватар пользователя
сам проигрыватель, какой хочешь ставь.
тут главное, это подгрузка страницы, а не сам плеер cool

0  
6 Voker -Infoscript Team-  (28.09.2011 17:37) [Материал]
Аватар пользователя
Что за реклама ёпт?

0  
7 InfoDusha -Infoscript Team-  (29.09.2011 09:04) [Материал]
Аватар пользователя
не реклама, а пример.

0  
8 sold93 -Infoscript Team-  (29.09.2011 09:20) [Материал]
Аватар пользователя
он не про то...тут в комментах реклама была....с твоим примером все впорядке

0  
9 Voker -Infoscript Team-  (29.09.2011 14:46) [Материал]
Аватар пользователя
yura122 - баньте его второй раз уже рекламирует!
Цитирую InfoDusha: не реклама, а пример.
Это не тебе это yura122

1-6 7-12
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]