Главная » 2010 » Июль » 17 » Картинка складывается по частям (Javascript)
17.07.2010, 12:25

Картинка складывается по частям



Картинка постепенно начинает складываться по частям в единое целое. Классный эффект.

В head ставим это:

Quote
<SCRIPT>
<!-- Beginning of JavaScript -

// The width of your image (pixels)
var imgwidth=502

// The height of your image (pixels)
var imgheight=600

// The URL of the sliced image
var imgurl="pictures.jpg"

// Final horizontal position of the image: distance to the left margin of the window
var x_finalpos=5

// Final vertical position of the image: distance to the top margin of the window
var y_finalpos=5

// Number of slices
var imgslices=20

// Speed of slices
var step=50
var pause=20

// Do not change the variables below
var marginright
var width_slice=Math.floor(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice
var spannummer=0
var spannrbefore=0

function initiate() {
if (document.all) {
moveslices_IE()
}
}

function moveslices_IE() {
var thisspan=eval("document.all.span"+spannummer+".style")
if (thisspan.posLeft>x_finalpos-width_slice) {
thisspan.posLeft-=step
var timer=setTimeout("moveslices_IE()",pause)
}
else if (spannummer<imgslices-1) {
clearTimeout(timer)
thisspan.posLeft=x_finalpos
spannummer++
var timer=setTimeout("moveslices_IE()",pause)
}
else {
thisspan.posLeft=x_finalpos
clearTimeout(timer)
}
}

// - End of JavaScript - -->
</SCRIPT>

<!-- HEAD END HERE -->



Красное
заменяем на путь до своей картинки.

В body добавляем onload=initiate() и вставляем это:

Code
<SCRIPT>
<!-- Beginning of JavaScript -
for (i=0;i<=imgslices-1;i++) {
  marginright=screen.width+50
  document.write("<span id='span"+i+"' style='position:absolute;visibility:visible; left:"+marginright+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
  document.write("<img src='"+imgurl+"'>")
  document.write("</span>")
  clipleft+=width_slice
  clipright+=width_slice
}
// - End of JavaScript - -->
</SCRIPT>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 2925 | Добавил: antisept | Рейтинг: 4.5/2 |
Теги: картинка, По, складывается, частям
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]