ДЕМО1 (появляется случайным образом): http://cnwander.com/demo/puzzle_effect/
Если машина настроена, то можно разрезать картинку на более мелкие детали (переменные xNum, yNum)
DEMO1 (изменение правил): http://cnwander.com/demo/puzzle_effect/index2.html
Тест: IE6, IE7, FF3.014
Исходный текст: http://cnwander.com/blog/?p=13.
Причудливый эффект в основном подчеркивает идею, и эффект все еще относительно грубый. Проявив немного творчества, вы сможете получить более инновационные эффекты переключения изображений.
Что касается идей, то желающие студенты могут посмотреть ДЕМО самостоятельно.
Эффект 1 (появляется случайно):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Эффект головоломки – автор Wander</title>
<style type="text/css">
* {поле: 0; дополнение: 0}
ul {стиль списка: нет}
изображение {граница:0}
тело {позиция: относительное; фон: белый; шрифт: 12 пикселей/120% Arial, simsun, без засечек цвет: белый;
.imgWrap {поле:0 авто}
#thumbs {позиция: абсолютная; сверху: 600 пикселей; слева: ширина 300 пикселей: 400 пикселей}
#thumbs li {float:left; поля:0 5px курсор:указатель};
#thumbs li img {float:left}
#thumbs li.current {поле:-3px 2px 0 2px; отступ:1px; граница:2px сплошной черный}
</стиль>
<тип сценария="текст/javascript">
//код от [email protected]
вар xNum = 2,
уNum = 2,
хЛимит,
yLimit;;
вар большие пальцы, обертка;
window.onload = функция() {
var bigsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - ThumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 200];
большие пальцы = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
каждый (большие пальцы, thumbEvts);
}
функция ThumbEvts() {
this.onclick = ThumbDown;
функция ThumbDown(e) {
каждый (палец, функция () {
this.className = "";
});
this.className = "текущий";
loadImg(this.getAttribute("url"));
}
}
функция loadImg (URL) {
вар img = новое изображение ();
вар слева,
верх = 100,
imgW, imgH;
если (обертка) RemoveElem (обертка);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
если (img.width > 0) initImg();
еще img.onload = initImg;
функция initImg() {
imgW = img.ширина;
imgH = img.height;
left = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
числоТаймер = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++)
addPiece (я, j);
}
}
функция addPiece(x,y) {
вар obj = addDiv(обертка),
ш = imgW/xNum,
ч = imgH/yNum,
опа = 0,
хПос = х*ш,
уПос = у*ч,
xStart = randowNum(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
слайдТо();
функция слайдTo() {
вар а = 0,2,
toScale = 1,
toX = влево+xPos,
toY = верх+yPos,
тоОпа = 1,
таймер = window.setInterval(move,20);
числоТаймер++;
функция перемещения() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
опа += (toOpa - опа)*a;
if(Math.abs(toX-xStart)<=1) {
xStart = toX;
yStart = toY;
опа = toOpa;
window.clearInterval(таймер);
числоТаймер--;
если (numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;width:"+w+"px;height:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
функция addDiv(где,attr) {
var obj = document.createElement("div");
если (атрибут)
for(ключ var в attr) {
if(key == "имякласса") obj.className = attr[ключ];
еще obj.setAttribute(ключ,attr[ключ]);
}
где.appendChild(obj);
вернуть объект;
}
функция RemoveElem(elem){
вар родительский = elem.parentNode;
если (родитель) {
родитель.removeChild(элемент);
}
}
//Обходим объект
функция каждый (obj, fuc) {
for(ключ var в obj) {
obj[ключ].index = ключ;
fuc.call(obj[ключ]);
}
}
функция randowNum (начало, конец) {
return Math.floor(Math.random()*(конец - начало)) + начало;
}
//Установим стиль
функция setStyle() {
if(arguments.length == 2 && typeof аргументы[1] == "объект") {
for(ключ var в аргументах[1]) {
аргументы[0].стиль[ключ] = аргументы[1][ключ];
}
} еще если (arguments.length > 2) {
аргументы[0].стиль[аргументы[1]] = аргументы[2];
}
}
//поиск элементов
функция $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
результат = [обернуть || документ];
while(eleExpr.test(s)) {
вар тег = RegExp.$1,
тип = RegExp.$2,
содержимое = RegExp.$3,
элементы = [];
for(var i=0; i<result.length; i++) {
вартемп;
переключатель(тип) {
случай "#":
temp = [result[i].getElementById(content)];
перерыв;
случай ".":
temp = getElemsByClassName(content,result[i],tag);
перерыв;
по умолчанию:
temp = result[i].getElementsByTagName(тег+содержание);
}
for(ключ var в temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
результат = [];
for(ключ var в элементах) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
вернуть результат.длина == 1? результат[0]: результат;
функция getElemsByClassName (имя класса, элемент, тег) {
вар результат = [],
тег = тег ||
allElems = elem.getElementsByTagName(тег) || elem.all;
for(var i=0; i<allElems.length; i++){
список var = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == имя класса) result.push(allElems[i]);
}
}
вернуть результат;
}
}
</скрипт>
</голова>
<тело>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Пространство странствий </a></div>
<ul id="thumbs">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ ли>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</тело>
</html>
Эффект 2 (обычное движение):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Эффект головоломки – автор Wander</title>
<style type="text/css">
* {поле: 0; дополнение: 0}
ul {стиль списка: нет}
изображение {граница:0}
тело {позиция: относительное; фон: белый; шрифт: 12 пикселей/120% Arial, simsun, без засечек цвет: белый;
.imgWrap {поле:0 авто}
#thumbs {позиция: абсолютная; сверху: 600 пикселей; слева: ширина 300 пикселей: 400 пикселей}
#thumbs li {float:left; поля:0 5px курсор:указатель};
#thumbs li img {float:left}
#thumbs li.current {поле:-3px 2px 0 2px; отступ:1px; граница:2px сплошной черный}
</стиль>
<тип сценария="текст/javascript">
//код от [email protected]
вар xNum = 3,
уNum = 3,
хЛимит,
yLimit;;
вар большие пальцы, обертка;
window.onload = функция() {
var bigsWrap = $("#thumbs");
setStyle(thumbsWrap,"left",($("body").clientWidth - ThumbsWrap.offsetWidth)/2+"px");
xLimit = [0,$("body").clientWidth];
yLimit = [0,screen.height - 250];
большие пальцы = $("#thumbsli");
loadImg(thumbs[0].getAttribute("url"));
каждый (большие пальцы, thumbEvts);
}
функция ThumbEvts() {
this.onclick = ThumbDown;
функция ThumbDown(e) {
каждый (палец, функция () {
this.className = "";
});
this.className = "текущий";
loadImg(this.getAttribute("url"));
}
}
функция loadImg (URL) {
вар img = новое изображение ();
вар слева,
верх = 100,
imgW, imgH;
если (обертка) RemoveElem (обертка);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
если (img.width > 0) initImg();
еще img.onload = initImg;
функция initImg() {
imgW = img.ширина;
imgH = img.height;
left = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
числоТаймер = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++) {
var xStart = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
yStart = (yLimit[1])*j/(yNum-1) - imgH/yNum;
addPiece(xStart,yStart,i,j);
}
}
}
функция addPiece(xStart,yStart,xEnd,yEnd) {
вар obj = addDiv(обертка),
ш = imgW/xNum,
ч = imgH/yNum,
опа = 0,
xPos = xEnd*w,
yPos = yEnd*h;
слайдТо();
функция слайдTo() {
вар а = 0,2,
toScale = 1,
toX = влево+xPos,
toY = верх+yPos,
тоОпа = 1,
таймер = window.setInterval(move,20);
числоТаймер++;
функция перемещения() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
опа += (toOpa - опа)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xStart = toX;
yStart = toY;
опа = toOpa;
window.clearInterval(таймер);
числоТаймер--;
если (numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;width:"+w+"px;height:"+h+"px;background:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
функция addDiv(где,attr) {
var obj = document.createElement("div");
если (атрибут)
for(ключ var в attr) {
if(key == "имякласса") obj.className = attr[ключ];
еще obj.setAttribute(ключ,attr[ключ]);
}
где.appendChild(obj);
вернуть объект;
}
функция RemoveElem(elem){
вар родительский = elem.parentNode;
если (родитель) {
родитель.removeChild(элемент);
}
}
//Обходим объект
функция каждый (obj, fuc) {
for(ключ var в obj) {
obj[ключ].index = ключ;
fuc.call(obj[ключ]);
}
}
функция randowNum (начало, конец) {
return Math.floor(Math.random()*(конец - начало)) + начало;
}
//Установим стиль
функция setStyle() {
if(arguments.length == 2 && typeof аргументы[1] == "объект") {
for(ключ var в аргументах[1]) {
аргументы[0].стиль[ключ] = аргументы[1][ключ];
}
} еще если (arguments.length > 2) {
аргументы[0].стиль[аргументы[1]] = аргументы[2];
}
}
//поиск элементов
функция $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
результат = [обернуть || документ];
while(eleExpr.test(s)) {
вар тег = RegExp.$1,
тип = RegExp.$2,
содержимое = RegExp.$3,
элементы = [];
for(var i=0; i<result.length; i++) {
вартемп;
переключатель(тип) {
случай "#":
temp = [result[i].getElementById(content)];
перерыв;
случай ".":
temp = getElemsByClassName(content,result[i],tag);
перерыв;
по умолчанию:
temp = result[i].getElementsByTagName(тег+содержание);
}
for(ключ var в temp) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
результат = [];
for(ключ var в элементах) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
вернуть результат.длина == 1? результат[0]: результат;
функция getElemsByClassName (имя класса, элемент, тег) {
вар результат = [],
тег = тег ||
allElems = elem.getElementsByTagName(тег) || elem.all;
for(var i=0; i<allElems.length; i++){
список var = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == имя класса) result.push(allElems[i]);
}
}
вернуть результат;
}
}
</скрипт>
</голова>
<тело>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">Пространство странствий </a></div>
<ul id="thumbs">
<li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></ ли>
<li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
<li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
</ul>
</тело>
</html>
Классический обмен сообщениями на форуме :
http://bbs.blueidea.com/thread-2952337-1-1.html