VPF::Увеличение\Уменьшение фото в приделах рамки

max07

Дата 19.8.2007, 01:47 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 21.12.2004

Репутация: нет
Всего: нет

Добрый вечер,

такая проблема. Хочу сделать просмотр фото такого вида: есть фотка, вокруг неё рамка, при например навидении мыши на фотку, она (фотка) постепенно увеличивается по центру за пределы рамки. Части фотки вышедшие за рамку не видны. Далее при смещении курсора с фотки фотка уменьшается до начальных размеров, невидемые части постепенно появляются.

Подскажите каким способом это реализовать (где почитать, в какую сторону копать)?

Спасибо.

dXdYdZ

Дата 19.8.2007, 11:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 146
Регистрация: 16.4.2007

Репутация: 3
Всего: 4

Пример похожего компонента есть здесь (Смотрите компонент resizeMenu). Для Вашего случая надо:
1) Сделать рамку с помощью элемента с установленным свойством overflow
2) Вставить в неё картинку
2) Подключить к ней события onmouseover и onmouseout
3) При наведении (onmouseover) плавно увеличивать картинку
4) При onmouseout - плавно уменьшать
Для увеличения и уменьшения картинки можно использовать одну из готовых библиотек эффектов.

max07

Дата 19.8.2007, 18:12 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 21.12.2004

Репутация: нет
Всего: нет

Спасибо dXdYdZ. Вопрос решён.

Код


<HTML>
    <HEAD>
        <TITLE></TITLE>

<style>
.clss2 { 
    position: absolute;
    width: 200px;
    cursor: pointer;
}

.layer {
    overflow: hidden;
    width: 205px;
    height: 253px;
    border: solid 2px #000;
}
</style>



<script type="text/javascript">
<!--
    function initObj() { // create objects
        my_object1=new create("div1")
        maxWidth=350
        minWidth=200
    }

    function create(id) { //define properties, pass id
        this.id=id
        this.width=document.getElementById(this.id).width
        this.pos=parseInt(document.getElementById(this.id).style.left)
        this.start_pos=this.pos
        this.timer=null
        this.running=0
        
        this.chk_status=function(num, d){ // method & its properties, pass div number as argument
            this.dir = d
            if(this.dir == "zOut") {
                this.running = 0
            }
            if(this.dir == "zIn" && this.running == 1) {
                return
            }
            this.running = 1
            this.step=5//Math.floor(Math.random()*9)
            window["my_object"+num].animate('my_object'+num)
        }

    this.animate = function(myobject) { // method & its properties, pass object name as argument
        if(this.dir=="zIn") {
            this.width += this.step
            this.pos -= this.step/2
        }
        else {
            this.width -= this.step
            this.pos += this.step/2
        }
        this.timer=setTimeout(myobject+".animate('"+myobject+"')", 10)
        if(this.dir == "zIn" && this.width > maxWidth - this.step) {
            this.width = maxWidth
            this.running = 0
            clearTimeout(this.timer)
        }
        if(this.dir == "zOut" && this.width <= minWidth + this.step){
            this.width = minWidth
            this.pos = this.start_pos
            this.running = 0
            clearTimeout(this.timer)
        }
        document.getElementById(this.id).style.width = this.width
        document.getElementById(this.id).style.left = this.pos
        document.getElementById(this.id).style.top = this.pos
    }
}
// -->
</script>

</HEAD>

<BODY onload="initObj()">
<div class="layer">
    <img src="image" id="div1" class="clss2" style="left:0; top:0" onmouseover="my_object1.chk_status(1,'zIn')" onmouseout="my_object1.chk_status(1,'zOut')">
</div>

</BODY>
</HTML>

Это сообщение отредактировал(а) max07 - 19.8.2007, 22:59

Ghirik

Дата 23.8.2007, 19:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Глючит на краю изображения, и не правильно работает в Mozilla и Opera - изображение поверх рамки.

--------------------

Отдадим всё клиенту, пускай его машина мучается...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »