Увеличьте изображение на парении мыши в столе

На самом деле я видел это обучающая программа для предоставления увеличения масштаба изображения в действительности на мыши к изображению здесь изображения не находятся ни в каком столе так может я достигать того же самого эффекта, вставляя изображения a стол и набор положения изображений родственнику?

как

    <table border = '2'>
     <tr>
      <td>
         
      </td>
      <td>
         
      </td>
     </tr>
    </table>

то, когда я пытался поместить изображения в эффекте стола, изменяется, он также увеличивающийся размер из стола, но размера стола должен остаться как есть

я использую следующий код для предоставления увеличения и уменьшения эффектов к изображениям, но это работает хорошее в Mozilla Firefox, но не работающий в Google Chrome. в хроме это также расширяет размер столбца таблицы, (z-индекс, не работающий), img1 в теге таблицы.

  function zoomIn(indexNo){
    var zoomin = $('#img1').attr("zoomin");
    if(zoomin == "false")
        {
            $('#img1').css("z-index", 1);
            $('#img1').css("position", "absolute");
            $('#img1').animate({
               height  :    l_imgHeightZoomIn,
               width   :    l_imgWidthZoomIn,
               left    :    l_imgLeftZoomIn,
               top     :    l_imgTopZoomIn
            }, "slow");
            $('#img1').attr("zoomin", "true");
        }
    }
--------------------------------------------------------------
  function zoomOut(indexNo){
    var zoomin = $('#img1').attr("zoomin");
    if(zoomin == "true")
        {
            $('#img1').css("z-index", 0);
            $('#img1').css("position", "static");
            $('#img1').animate({
                height : l_imgHeight,
                width  : l_imgWidth,
                left   : l_imgLeftZoomOut,
                top    : l_imgTopZoomOut
            }, 0);
            $('#img11').attr("zoomin", "false");

        }
    }
0
nl ja de

1 ответы

Когда я прочитал ваш вопрос, я думаю, что вы ищете что-то вроде этого http://jsfiddle.net/8umD4/4/.

 img:hover
 {
   margin:0;
   padding:0;
   width:90%;
   height:90%;
 }
.formatTable td
{
width:100px;
height:100px;
text-align:center;
}  
<table border = '2' class='formatTable'>
 <tr><td>
    
   </td>
   <td>
    
   </td>
 </tr>
</table>

Проверьте его. Если это не отвечает вашему требованию, пожалуйста, объясните больше о своей проблеме.

2
добавлено
на самом деле jsfiddle.net/uCtHh/381 смотрит хороший эффект. в вашем случае table' s размер колонок уже очень большое, может он быть тем же самым как изображение, и на парении мыши только изображение получает увеличение масштаба изображения в действительности.
добавлено автор user460293, источник
спасибо за ваши усилия, но если я изменяю его как этот jsfiddle.net/8umD4/15/теперь, можно ли поддержать тот же самый эффект?
добавлено автор user460293, источник
jsfiddle.net/8umD4/16 это - то же самое вы просто, удалил границу стола, но мне нужна граница стола, и размер столбца таблицы должен быть тем же самым, поскольку размер изображения на мыши по изображению должен получить увеличение, но не столбцы таблицы, столбцы таблицы должны остаться от того же самого размера. я don' t даже, который возможен или нет. спасибо за ваш ответ
добавлено автор user460293, источник
таким образом, вы подразумеваете, что не возможно, что я хочу?
добавлено автор user460293, источник
добавлено автор user460293, источник
Хорошо вы хотите поддержать эффект, теперь наблюдать мою скрипку jsfiddle.net/8umD4/10 Я обновил его.
добавлено автор mitali, источник
Чтобы увеличить изображение в столе, необходимо установить размер ячейки таблицы, больше, чем изображение иначе во время увеличения изображения, которое размер стола изменит согласно размеру изображения. Теперь проверьте это jsfiddle.net/8umD4/16.
добавлено автор mitali, источник
нет я не mitali dua.
добавлено автор mitali, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)