DEMO1 (ランダムに表示): 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 {リストスタイル:なし}
img {ボーダー:0}
ボディ {位置:相対; テキスト整列:中央; フォント:120% Arial、simsun、サンセリフ;
.imgWrap {マージン:0 自動}
#thumbs {位置: 絶対上: 600 ピクセル; 左: 300 ピクセル;
#thumbs li {フロート:左マージン:0 5px; カーソル:ポインタ}
#親指 li img {float:left}
#thumbs li.current {マージン:-3px 2px 0 2px; ボーダー:2px ソリッドブラック}
</スタイル>
<script type="text/javascript">
// [email protected] によるコード
var xNum = 2、
yNum = 2、
xリミット、
y制限;;
var サムズ、ラップ;
window.onload = function() {
var thumbsWrap = $("#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"));
each(thumbs,thumbEvts);
}
関数thumbEvts() {
this.onclick = サムダウン;
関数thumbDown(e) {
each(親指,関数(){
this.className = "";
});
this.className = "現在";
loadImg(this.getAttribute("url"));
}
}
関数loadImg(url) {
var img = 新しい画像();
ヴァール左、
トップ = 100、
imgW、imgH;
if(ラップ) 削除Elem(ラップ);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.width > 0) initImg();
それ以外の場合、img.onload = initImg;
関数 initImg() {
imgW = img.width;
imgH = img.高さ;
left = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
numTimer = 0;
for(var i=0; i<xNum; i++) {
for(var j=0; j<yNum; j++)
addPiece(i,j);
}
}
関数 addPiece(x,y) {
var obj = addDiv(ラップ)、
w = imgW/xNum、
h = imgH/yNum、
オパ = 0、
xPos = x*w、
yPos = y*h、
xStart = randowNum(xLimit[0],xLimit[1]-w),
yStart = randowNum(yLimit[0],yLimit[1]-h);
slideTo();
関数 slideTo() {
変数 a = 0.2、
toScale = 1、
toX = 左 + xPos、
toY = トップ+yPos、
toOpa = 1、
タイマー = window.setInterval(move,20);
numTimer++;
関数 move() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
opa += (toOpa - opa)*a;
if(Math.abs(toX-xStart)<=1) {
xStart = toX;
yStart = toY;
オパ = トオパ;
window.clearInterval(タイマー);
numTimer--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "位置:絶対;左:"+xStart+"px;上:"+yStart+"px;幅:"+w+"px;高さ:"+h+"px;背景:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
function addDiv(where,attr) {
var obj = document.createElement("div");
if(属性)
for(attr の var キー) {
if(key == "クラス名") obj.className = attr[キー];
else obj.setAttribute(key,attr[key]);
}
ここで.appendChild(obj);
オブジェクトを返します。
}
関数removeElem(elem){
var 親 = elem.parentNode;
if(親){
親.removeChild(elem);
}
}
// オブジェクトをトラバースする
関数 each(obj,fuc) {
for(obj の var キー) {
obj[キー].index = キー;
fuc.call(obj[キー]);
}
}
関数 randowNum(開始,終了) {
return Math.floor(Math.random()*(end - start)) + start;
}
//スタイルを設定する
関数 setStyle() {
if(arguments.length == 2 && 引数の種類[1] == "オブジェクト") {
for(引数[1]のvarキー) {
引数[0].スタイル[キー] = 引数[1][キー];
}
else if (arguments.length > 2) {
引数[0].スタイル[引数[1]] = 引数[2];
}
}
//要素ファインダー
関数 $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
結果 = [ドキュメントをラップ ||];
while(eleExpr.test(s)) {
var タグ = RegExp.$1、
タイプ = RegExp.$2、
コンテンツ = RegExp.$3、
要素 = [];
for(var i=0; i<result.length; i++) {
ヴァルテンプ。
スイッチ(タイプ) {
場合 "＃"：
temp = [結果[i].getElementById(content)];
壊す;
場合 "。"：
temp = getElemsByClassName(コンテンツ,結果[i],タグ);
壊す;
デフォルト：
temp = result[i].getElementsByTagName(タグ+コンテンツ);
}
for(一時的な変数キー) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
結果 = [];
for(要素内のvarキー) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
戻り値.length == 1 ? 結果[0] : 結果;
function getElemsByClassName(クラス名,elem,タグ) {
var 結果 = [],
タグ = タグ "*"、
allElems = elem.getElementsByTagName(タグ) || elem.all;
for(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == クラス名) result.push(allElems[i]);
}
}
結果を返します。
}
}
</script>
</head>
<本文>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">ワンダーのスペース</a></div>
<ul id="親指">
<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>
</body>
</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 {リストスタイル:なし}
img {ボーダー:0}
ボディ {位置:相対; テキスト整列:中央; フォント:120% Arial、simsun、サンセリフ;
.imgWrap {マージン:0 自動}
#thumbs {位置: 絶対上: 600 ピクセル; 左: 300 ピクセル;
#thumbs li {フロート:左マージン:0 5px; カーソル:ポインタ}
#親指 li img {float:left}
#thumbs li.current {マージン:-3px 2px 0 2px; ボーダー:2px ソリッドブラック}
</スタイル>
<script type="text/javascript">
// [email protected] によるコード
var xNum = 3、
yNum = 3、
xリミット、
y制限;;
var サムズ、ラップ;
window.onload = function() {
var thumbsWrap = $("#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"));
each(thumbs,thumbEvts);
}
関数thumbEvts() {
this.onclick = サムダウン;
関数thumbDown(e) {
each(親指,関数(){
this.className = "";
});
this.className = "現在";
loadImg(this.getAttribute("url"));
}
}
関数loadImg(url) {
var img = 新しい画像();
ヴァール左、
トップ = 100、
imgW、imgH;
if(ラップ) 削除Elem(ラップ);
Wrap = addDiv($("body"),{className:"imgWrap"});
img.src = URL;
Wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
if(img.width > 0) initImg();
それ以外の場合、img.onload = initImg;
関数 initImg() {
imgW = img.width;
imgH = img.高さ;
left = ($("body").clientWidth - imgW)/2;
Wrap.innerHTML = "";
numTimer = 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);
}
}
}
function addPiece(xStart,yStart,xEnd,yEnd) {
var obj = addDiv(ラップ)、
w = imgW/xNum、
h = imgH/yNum、
オパ = 0、
xPos = xEnd*w、
yPos = yEnd*h;
slideTo();
関数 slideTo() {
変数 a = 0.2、
toScale = 1、
toX = 左 + xPos、
toY = トップ+yPos、
toOpa = 1、
タイマー = window.setInterval(move,20);
numTimer++;
関数 move() {
xStart += (toX - xStart)*a;
yStart += (toY - yStart)*a;
opa += (toOpa - opa)*a;
if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
xStart = toX;
yStart = toY;
オパ = トオパ;
window.clearInterval(タイマー);
numTimer--;
if(numTimer <= 0) {
setStyle(wrap,"paddingTop",top+"px");
Wrap.innerHTML = "<img src=""+url+""/>";
}
}
obj.style.cssText = "位置:絶対;左:"+xStart+"px;上:"+yStart+"px;幅:"+w+"px;高さ:"+h+"px;背景:url("+url+ ") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
}
}
}
}
function addDiv(where,attr) {
var obj = document.createElement("div");
if(属性)
for(attr の var キー) {
if(key == "クラス名") obj.className = attr[キー];
else obj.setAttribute(key,attr[key]);
}
ここで.appendChild(obj);
オブジェクトを返します。
}
関数removeElem(elem){
var 親 = elem.parentNode;
if(親){
親.removeChild(elem);
}
}
// オブジェクトをトラバースします
関数 each(obj,fuc) {
for(obj の var key) {
obj[キー].index = キー;
fuc.call(obj[キー]);
}
}
関数 randowNum(開始,終了) {
return Math.floor(Math.random()*(end - start)) + start;
}
//スタイルを設定する
関数 setStyle() {
if(arguments.length == 2 && 引数の種類[1] == "オブジェクト") {
for(引数[1]のvarキー) {
引数[0].スタイル[キー] = 引数[1][キー];
}
else if (arguments.length > 2) {
引数[0].スタイル[引数[1]] = 引数[2];
}
}
//要素ファインダー
関数 $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#.]?)(w+)[^s+]*/g,
結果 = [ドキュメントをラップ ||];
while(eleExpr.test(s)) {
var タグ = RegExp.$1、
タイプ = RegExp.$2、
コンテンツ = RegExp.$3、
要素 = [];
for(var i=0; i<result.length; i++) {
ヴァルテンプ。
スイッチ(タイプ) {
場合 "＃"：
temp = [結果[i].getElementById(content)];
壊す;
場合 "。"：
temp = getElemsByClassName(content,result[i],tag);
壊す;
デフォルト：
temp = result[i].getElementsByTagName(タグ+コンテンツ);
}
for(一時的な変数キー) {
if(temp[key].nodeType == 1) elems.push(temp[key]);
}
}
結果 = [];
for(要素内のvarキー) {
if(elems[key].nodeType == 1) result.push(elems[key]);
}
}
戻り値.length == 1 ? 結果[0] : 結果;
function getElemsByClassName(クラス名,elem,タグ) {
var 結果 = [],
タグ = タグ "*"、
allElems = elem.getElementsByTagName(タグ) || elem.all;
for(var i=0; i<allElems.length; i++){
var list = allElems[i].className.split(" ");
for(var j=0; j<list.length; j++){
if(list[j] == クラス名) result.push(allElems[i]);
}
}
結果を返します。
}
}
</script>
</head>
<本文>
<div style="position:absolute; right:0"> <a href=" http://cnwander.com/blog/?p=13">ワンダーのスペース</a></div>
<ul id="親指">
<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>
</body>
</html>
古典的なフォーラム交換:
http://bbs.blueidea.com/thread-2952337-1-1.html