1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

Анимация по средствам CSS

Тема в разделе "Web Coding", создана пользователем gonzik, 30 авг 2007.

Статус темы:
Закрыта.
Модераторы: latteo
  1. gonzik

    gonzik Постоялец

    Регистр.:
    17 июн 2007
    Сообщения:
    68
    Симпатии:
    102
    Видел на одном сайте такую штуку, похожую на флеш, но не флешь это, а css. Т.е. похоже что используют как минимум 3 картинки разного размера, на наведение курсора на нее она плавно увеличивается. Как такое реализовать?
     
    Sylon нравится это.
  2. bueno

    bueno Читатель

    Заблокирован
    Регистр.:
    7 май 2007
    Сообщения:
    236
    Симпатии:
    69
    css + javascript..
    можно и просто javascript..
     
  3. gonzik

    gonzik Постоялец

    Регистр.:
    17 июн 2007
    Сообщения:
    68
    Симпатии:
    102
    Может есть уже готовое и рабочее решение этой задачи?
     
    Sylon нравится это.
  4. General Fizz

    General Fizz Боевой Генерал :)

    Регистр.:
    11 апр 2007
    Сообщения:
    753
    Симпатии:
    396
    Есть решения, в том числе встроенные в Adobe Golive. Или ищи в коллекциях Java скриптов по ключевому слову "rollover".

    Пример рабочего зума (zoom), приведен без картинок 1.jpg, 2.jpg, 3.jpg...:
    Код:
    <html>
    <head>
    <script>
    <!--
    // The width of your images (pixels). All pictures should have the same width.
    var imgwidth=240
    // The height of your images (pixels). All pictures should have the same height.
    var imgheight=160
    // The horizontal and vertical position of the images (pixels).
    var pos_left=10
    var pos_top=10
    // The file-names of your images. You may add as many images as you like.
    var imgname=new Array()
    imgname[0]="0.jpg"
    imgname[1]="1.jpg"
    imgname[2]="2.jpg"
    // Where should those images be linked to?
    // Add an URL for each image.
    // If you don't want to add an URL just write '#' instead of the URL.
    var imgurl=new Array()
    imgurl[0]="http://"
    imgurl[1]="http://"
    imgurl[2]="http://"
    // This block will preload your images. Do not edit this block.
    var imgpreload=new Array()
    for (i=0;i<=imgname.length-1;i++) {
     imgpreload[i]=new Image()
     imgpreload[i].src=imgname[i]
    }
    // Standstill-time between the images (microseconds).
    var pause=2000
    // Speed of the stretching and shrinking effect. More means slower.
    var speed=20
    // This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
    var step=10
    // Do not edit the variables below
    var cliptop=0
    var clipbottom=imgheight
    var clipleft=0
    var clipright=imgwidth
    var i_loop=4*imgwidth
    var i_image=0
    function shrinkin() {
     if (i_loop>=imgwidth) {
         imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
      i_loop=i_loop-step
      var timer=setTimeout("shrinkin()",speed)
       }
     else {
      clearTimeout(timer)
      var timer=setTimeout("shrinkout()",pause)
     }
    }
    function shrinkinNN() {
     if (i_loop>=imgwidth) {
            document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>")
            document.imgcontainer.document.close()
      i_loop=i_loop-step*10
      var timer=setTimeout("shrinkinNN()",speed*40)
       }
     else {
      clearTimeout(timer)
      var timer=setTimeout("shrinkoutNN()",pause)
     }
    }
    function shrinkout() {
     if (i_loop>-step) {
            imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
      i_loop=i_loop-step
      var timer=setTimeout("shrinkout()",speed)
       }
     else {
      clearTimeout(timer)
      changeimage()
     }
    }
    function shrinkoutNN() {
     if (i_loop>-step) {
             document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>")
            document.imgcontainer.document.close()
      i_loop=i_loop-step*10
      var timer=setTimeout("shrinkoutNN()",speed*40)
       }
     else {
      clearTimeout(timer)
             document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img width='1' src='"+imgname[i_image]+"' border='0'></a>")
            document.imgcontainer.document.close()
      changeimageNN()
     }
    }
    function changeimage() {
     i_loop=4*imgwidth
     i_image++
     if (i_image>imgname.length-1) {i_image=0}
        var timer=setTimeout("shrinkin()",pause)
    }
    function changeimageNN() {
     i_loop=4*imgwidth
     i_image++
     if (i_image>imgname.length-1) {i_image=0}
        var timer=setTimeout("shrinkinNN()",pause)
    }
    function initiate() {
     if (document.all) {
      document.all.imgcontainer.style.posLeft=pos_left
      document.all.imgcontainer.style.posTop=pos_top
            document.all.imgcontainer.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
      changeimage()
     }
     if (document.layers) {
      document.imgcontainer.left=pos_left
      document.imgcontainer.top=pos_top
            document.imgcontainer.clip.left=clipleft
            document.imgcontainer.clip.right=clipright
            document.imgcontainer.clip.top=cliptop
            document.imgcontainer.clip.bottom=clipbottom
      changeimageNN()
     }
    }
    // - End of JavaScript - -->
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="000000" link="0000FF" alink="0000FF" vlink="0000FF" onLoad="initiate()">
    <span id="imgcontainer" style="position:absolute"></span>
    </body>
    </html>
     
  5. kalabro

    kalabro Постоялец

    Регистр.:
    11 авг 2007
    Сообщения:
    74
    Симпатии:
    6
    Captain Fizz нда...
    вот идея (только наш любимый JS:(
    HTML:
    
    <html>
    <head>
    	<title>ZOOM</title>
    <script language="JavaScript">
    	<!--//
    	function grpict() {
    		var w = document.mypict.width;
    		if (w < 150) {
    			document.mypict.width = w + 5;
    			document.mypict.src = "image.jpg";
    			setTimeout("grpict()", 100);
    		}
    	}
    	//-->	
    </script>
    </head>
    <body>
    <img src="image.jpg" alt="" name="mypict" width="91" border="0" onMouseOver="grpict();">
    </body>
    </html>
    
    Объясняю:
    if (w < 150) здесь 150px это предел ширины. Изображение увеличится с 91px до 150px в ширину (в высоту автоматом).
    setTimeout("grpict()", 100); здесь 100мс это промежуток времени, через который будет повторяться увеличение на заданный шаг.
    document.mypict.width = w + 5; здесь задан шаг, равный 5px.
    В <img> высоту не задаем, чтобы не геморроиться с зумом.
    Обратная ф-ция для уменьшения естественно делается по аналогии.
     
  6. Zak

    Zak Постоялец

    Регистр.:
    13 апр 2006
    Сообщения:
    94
    Симпатии:
    6
    Это эффект называется Fisheye rollovers, у буржуем поищи.

    А вообще делать навигацию на чем либо, кроме CSS - кощунство)
     
Статус темы:
Закрыта.