Галерея
Галерея
Смотреть в действии
В качестве образца была взята одна тема форума, надеюсь автор на меня не обидится, если обидится, то удалю.
Вообще получилась не то, что хотелось, если дадите совет буду очень благодарен .
<html>
<head>
<title>Галлерея</title>
<style>
div.gallery{
width:300;
height:100;
border:2px dashed #888888;
overflow:hidden;
}
#tooltip{
display:none;
background:url("images/tooltip.png") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
font-size:12px;
height:66px;
width:180px;
padding:10px 10px 40px;
font:14px/24px Calibri,"Trebuchet MS",Tahoma,sans-serif;
}
.roundCornerAll{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius: 4px;
}
ul.gallery{
margin:0;
padding:0;
position:relative;
}
ul.gallery li{
display:inline;
}
ul.gallery img{
border:medium none;
}
</style>
<script>
function _$(id)
{
this.id=id;
return document.getElementById(id);
}
function domNTags(id,tag)
{
var elem=_$(id);
var list=elem.childNodes;
var n=0;
tag=tag.toUpperCase();
for(var i=0;i<list.length;i++){
if(list[i].tagName==tag){n++}
}
return n;
}
_$.timer = function(secToRepeat,timerId,func)
{
window[timerId] = setInterval(func,secToRepeat);
}
_$.timerStop = function(timerId)
{
if(window[timerId]) {clearInterval(window[timerId]);delete window[timerId];}
}
_$.waitAndRun = function(sec,func)
{
setTimeout(func, sec*1000);
}
function int(value)
{
return parseInt(value);
}
function abs(value)
{
return Math.abs(value);
}
function move(value,secToRepeat)
{
if(!window['timerGallery'])
{
var imgPrev=_$('galleryPrev');
var imgNext=_$('galleryNext');
_$('ulGallery').style.opacity="0.5";
_$.timer(secToRepeat,'timerGallery',function()
{
if(!window.galleryTimesToRepeat) {galleryTimesToRepeat=int(92/abs(value));}
else{galleryTimesToRepeat--;}
if(galleryTimesToRepeat<1){delete window.galleryTimesToRepeat;stop();}
var elem=_$('ulGallery');
var left=int(elem.style.left);
if(left>=10) {imgPrev.style.opacity='0.5';imgNext.style.opacity='1';}
else if(left<=-450) {imgNext.style.opacity='0.5';imgPrev.style.opacity='1';}
else {imgPrev.style.opacity='1';imgNext.style.opacity='1';}
if(left<10 && value>0){elem.style.left=left+value;}
else if(left>-450 && value<0){elem.style.left=left+value;}
else {delete window.galleryTimesToRepeat;stop();};
});
}
}
function stop()
{
_$('ulGallery').style.opacity="1";
_$.timerStop('timerGallery');
}
function mouseover(e,number)
{
var e=e || event;
var elem=_$('tooltip');
var secToRepeat=1;
var value=3;
var tolX=int(elem.style.left);
var tolY=int(elem.style.top);
if(window['timerTooltip']==undefined && abs(window.x-tolX)>value)
{
_$.timer(secToRepeat,'timerTooltip',function()
{
var elem=_$('tooltip');
elem.innerHTML="Среботал элемент номер "+number;
var tolX=int(elem.style.left);
var tolY=int(elem.style.top);
if(abs(window.x-tolX)<value+3) {value=1;}
if(window.x<tolX){_$('tooltip').style.left=tolX-value;}
if(window.x>tolX){_$('tooltip').style.left=tolX+value;}
//if(y<tolY){_$('tooltip').style.top=--tolY;}
//if(y>tolY){_$('tooltip').style.top=++tolY;}
//if(x==tolX && y==tolY) {_$.timerStop('timerTooltip');}
_$('test').innerHTML=abs(x-tolX)+" "+value;
if(abs(window.x-tolX)<value) {_$.timerStop('timerTooltip');}
});
}
}
function mouseout()
{
}
window.onload = function()
{
_$('gallery').onmousemove = function(e)
{
e=e||event;
window.x=e.clientX;
window.y=e.clientY;
var elem=_$('gallery');
var elemX=int(elem.style.left);
var elemY=int(elem.style.top);
if(window.x<60 || window.x>360 || window.y<200 || window.y>300) {_$('tooltip').style.display="none";}
//alert(window.x+" "+window.y);
if(window.x>=60 && window.x<=360 && window.y>=200 && window.y<=300) {_$('tooltip').style.display="block";}
}
}
</script>
</head>
<table id="gallery" style="position:absolute;left:20;top:200;">
<tr>
<td><img id="galleryPrev" onmousedown="if(this.style.opacity!=0.5) {move(2,1);}" ondragstart="return false;" src="images/go-previous.png" style="opacity:0.5;" /></td>
<td>
<div class="gallery roundCornerAll" >
<ul class="gallery" id="ulGallery" style="width: 810px; left: 10px; top:10;">
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img1.jpg" onmouseover="mouseover(event,1);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img2.jpg" onmouseover="mouseover(event,2);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img3.jpg" onmouseover="mouseover(event,3);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img4.jpg" onmouseover="mouseover(event,4);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img5.jpg" onmouseover="mouseover(event,5);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img6.jpg" onmouseover="mouseover(event,6);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img7.jpg" onmouseover="mouseover(event,7);"></a></li>
<li style="margin-right: 10px;"><a href=""><img width="80" height="80" src="tmp/img8.jpg" onmouseover="mouseover(event,8);"></a></li>
</ul>
</div>
</td>
<td><img id="galleryNext" onmousedown="if(this.style.opacity!=0.5) {move(-2,1);}" ondragstart="return false;" src="images/go-next.png" /></td>
</tr>
</table>
<div id='tooltip' style="position:absolute;top:93;left:200;">Tooltip</div>
<div id="test"></div>
</html>
|
1) "Галерея", а не "галлерея"; "обидится", а не "обидеться".
2) HTML-код грязный.
3) JS-код интересный, но тоже "с душком".
4) Если более-менее быстро двигать мышкой над элементами, пока блок с мессаджем едет к точке назначения, то результат получается практически случайным. Вплоть до того, что курсор стоит на 8-ом элементе, мессадж - над 6-ым, а написано, что сработал 5-ый.
В общем, на троечку.
Да получилось не совсем то что, что хотелось.
Заповедник багов а не галерея =).
0. Ширина вьюпорта почему то рассчитана на 3 картинки с куском четвертой... это вообще интересно =)
1. Если мышкой двигать быстрее - не просиходит обновление инфы в облаке
2. Если опять же двигать мышой быстрее - глючит анимация
3. Если убрать мышку - облако исчезнет но его анимация будет продолжаться (зачем?)
4. Если убрать мышку проведя её по облаку наверх то облако не исчезнет вообще
5. В осле (даже в 8) всё торжественно дохнет из за ошибок (**пой чую что глубинных) в скрипте. Ну и ни о каком облаке говорить не приходится.
To афтар: аналогичную галерейку реализовывал у себя вот тут (в центре страницы http://studioad.ru/forum). Только там без ерунды типа облака.
Это только так, в код не смортя.
Благодарю за ссылку попытаюсь разобраться и улучшить.
А вообще был очень удивлён, дело в том, что событие onmouseover срабатывает по несколько раз, хотя должно срабатывать один раз на объекте.
Щас получше, но не получается сделать привязку по y, как у вас сделано не совсем пойму.
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.