Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Плавное увеличение картинок
 
 автор: AxelX   (09.06.2008 в 02:20)   письмо автору
 
 

Нужен скрипт для плавного увеличения картинок. Т.е. есть более маленькая картинка и при нажатии на неё она плавно становиться больше, при повторном нажатии(но уже на большую картнку) она плавно приходит в исходное состояние(уменьшается).
Очень нужно, кто делал подобное поделитесь пожалуйста.

   
 
 автор: ONYX   (09.06.2008 в 03:58)   письмо автору
 
   для: AxelX   (09.06.2008 в 02:20)
 

<html>
<head>
</head>
<style>
img{width:100px;}
</style>
<script src="jquery.js"></script>
<script>
function Photo(id,_w,_h){
    this.field =    $('#'+id);
    this.w =        _w;
    this.h =         _h;
    this.old_w =        0;
    this.old_h =         0;
    this.open =        false;
    this.init();
}
Photo.prototype= {
    init : function(){
        var oThis = this;
        this.field.click(function(){oThis.Resize(this)})
    },
    Resize : function(sThis){
        if(this.open){
            $(sThis).animate({width: this.old_w, height: this.old_h},'slow');
            this.open = false;
        }else{
            this.open = true;
            this.old_w = $(sThis).width();
            this.old_h = $(sThis).height();
            $(sThis).animate({width: this.w, height: this.h},'slow');
        }
    }
}
</script>
<body>
<img src="125.jpg" id="photo" />
</body>
<script>
var pht = new Photo('photo',600,450);
</script>
</html>

   
 
 автор: AxelX   (09.06.2008 в 14:03)   письмо автору
 
   для: ONYX   (09.06.2008 в 03:58)
 

Спасибо!

   
 
 автор: unkel   (28.08.2008 в 23:40)   письмо автору
 
   для: ONYX   (09.06.2008 в 03:58)
 

подскажите написание jquery.js для указанной формы!

   
 
 автор: Даниэль   (21.09.2008 в 12:12)   письмо автору
 
   для: ONYX   (09.06.2008 в 03:58)
 

А как сделать что бы изображение увеличивалось по навидению на изображение?

   
 
 автор: 3D-GRAF   (01.08.2008 в 02:30)   письмо автору
 
   для: AxelX   (09.06.2008 в 02:20)
 

Или вот, без всяких jquery.
Подгружаем в страницу js файл:


// Configuration

var speed             = 10;    // Fewer - quickier
var softness         = 20;    // Fewer - softer
var title             = "Уменьшить изображение";    // Title for closing

document.onclick = remove

function zoom(param1, param2, param3) {
    imgOld = param1;
    rwidth = param2;
    rheight = param3;
    

    img = document.createElement("img");
    img.src = imgOld.src;
    img.width = imgOld.width;
    img.height = imgOld.height;
    img.title = title;
    img.style.cursor = "pointer";
    document.body.appendChild(img);

    img.setAttribute("zoomed", "1");
    img.style.position = "absolute";
    zooming();
}

function zooming() {
    var width = img.width;
    var height = img.height;
    
    if (img.width < rwidth - softness + 1 || img.height < rheight - softness + 1) {
        if (img.width < rwidth - softness + 1) img.width = parseInt(width) + softness;
        if (img.height < rheight - softness + 1) img.height = parseInt(height) + softness;
        
        img.style.left = imgOld.offsetLeft + imgOld.offsetWidth / 2 - img.offsetWidth / 2;
        img.style.top = imgOld.offsetTop + imgOld.offsetHeight / 2 - img.offsetHeight / 2;
        
        if (parseInt(img.style.left) < 0) img.style.left = 0;
        if (parseInt(img.style.top) < 0) img.style.top = 0;
        
        setTimeout(zooming, speed);
    } else {
        img.width = rwidth;
        img.height = rheight;
    }
}

function remove(event) {
    evt = window.event || event;
      target = evt.srcElement || evt.target;
      
      if (target.hasAttribute("zoomed")) {
          document.body.removeChild(target)
      }
}


И в самой странице добавляем:


<img src="1.jpg" width=60 height=40 onclick="zoom(this, 510, 375)">

   
 
 автор: AxelX   (15.08.2008 в 01:45)   письмо автору
 
   для: 3D-GRAF   (01.08.2008 в 02:30)
 

Спасибо, но мне тот больше подходит, хотя нехочется тоскать за собой jquery.

   
 
 автор: Николай2357   (15.08.2008 в 05:36)   письмо автору
 
   для: AxelX   (15.08.2008 в 01:45)
 

Вот еще есть хорошенький скриптик, но почему-то отказывается в FF работать. Может кто поправит?
function bigger(img, width, height) {
var j=1;
  for (i=0; i<=10; i++) {
var w=(width*(10+i))/20+'px';
var h=(height*(10+i))/20+'px';
var m=(-i)+'px 0 0 '+(-width*i/40)+'px';
    f_1(img, w, h, m, i, 20*(i-j));
  }
}

function smaller(img, width, height) {
var  j=parseInt(img.style.zIndex);
  for (i=j-1; i>=0; i--) {
var  w=(width*(10+i))/20+'px';
var  h=(height*(10+i))/20+'px';
var  m=(-i)+'px 0 0 '+(-width*i/40)+'px';
  f_1(img, w, h, m, i, 20*(j-i));
  }
}
function f_1(img, width, height, margin, zIndex, delay) {
  setTimeout(function() {
      img.style.width=width;
      img.style.height=height;
      img.style.margin=margin;
      img.style.zIndex=zIndex;
      img.parentNode.parentNode.style.zIndex=zIndex;
  }, delay);
}

   
 
 автор: UNKEL   (29.08.2008 в 23:10)   письмо автору
 
   для: Николай2357   (15.08.2008 в 05:36)
 

подскажите написание jquery.js для указанной формы!

   
 
 автор: Eskaper   (09.12.2008 в 08:06)   письмо автору
 
   для: AxelX   (15.08.2008 в 01:45)
 

Вот мой маленький простой скрипт плавного увеличения у меньшения картинки работает в FF3 и в IE

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
Наведите мышь
<IMG ID="uv1" SRC= "img1.jpg" WIDTH="150" onmouseover="uvelihenie(150)" onmouseout="umen(300)">

<script language="JavaScript">
ssr=300;
ssd=150;
function uvelihenie(Position)
 {
  if (ssr > Position)
   {
     step=20;
     Position=Position+step;
   }
  else
   {
    return;
   }
  uv1.width=Position;
  setTimeout('uvelihenie('+Position+')',1);
 }


function umen(Position)
 {
  if (ssd < Position)
   {
     step=20;
     Position=Position-step;
   }
  else
   {
    return;
   }
  uv1.width=Position;
  setTimeout('umen('+Position+')',1);
 }

</script>
</BODY>
</HTML>

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования