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

Статус
В этой теме нельзя размещать новые ответы.
G

gonzik

Постоялец
Регистрация
17 Июн 2007
Сообщения
69
Реакции
108
Видел на одном сайте такую штуку, похожую на флеш, но не флешь это, а css. Т.е. похоже что используют как минимум 3 картинки разного размера, на наведение курсора на нее она плавно увеличивается. Как такое реализовать?
 
  • Заблокирован
  • #2
css + javascript..
можно и просто javascript..
 
Может есть уже готовое и рабочее решение этой задачи?
 
Есть решения, в том числе встроенные в 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>
 
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> высоту не задаем, чтобы не геморроиться с зумом.
Обратная ф-ция для уменьшения естественно делается по аналогии.
 
Это эффект называется Fisheye rollovers, у буржуем поищи.

А вообще делать навигацию на чем либо, кроме CSS - кощунство)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху