В этой статье примеры описываются, как достичь эффекта имитации QQ Show Fring-Up в JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "www.w3.org/1999/xhtml">
<голова>
<Title> Имитация QQ Show Effect </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<!-Добавьте следующий код между <Head> и </head>->
<style>
#cs img {coursor: hand}
</style>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<тело>
<!-Добавьте следующий код между <body> и </body>->
<!-Поместите следующий код, где вы хотите отобразить предварительный просмотр изображения->
<div id = "bodyshow" style = "border: 1px solid #000000; накладка: 0; положение: относительно; слева: 0px; top: 0px; высота: 226px; ширина: 140px;"> </div>
<!-Это форма отправки, назначающая строку, представляющую изображение пользователя, скрытую домену пользователя userRequip отправить->
<form name = "Equipform" method = "post" action = "">
<input name = "useRequip" type = "hidden" value = "">
<input name = "saveequip" type = "отправить" value = "Сохранить изображение">
<input name = "toreequip" type = "button" value = "исходное изображение" onclick = "shoiwit ('df> df> df> 0'); return false;" >
</form>
<script language = "javascript">
<!-
var myequip = "df> df> df> 0"; // Первоначальный код конфигурации дисплея может быть прочитал и выводит сервером.
Функция shoewit (equip) {// Эта функция настроена как параметр для отображения виртуального аватара
showlayers = equip.split ('>'); // Использовать ">" в качестве сепаратора для назначения имен изображений каждого слоя на массив Showlayers []
str = "";
for (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0' && showlayers [i]! = '') {// Если имя изображения равно 0 или пустое, слой не будет отображаться.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'padding: 0; положение: абсолютное; верх: 0; слева: 0; ширина: 140; высота: 226; z-index:"+(i+1)+";'>";
}
}
// Наконец -то покройте полностью прозрачное изображение на верхнем уровне, чтобы пользователь мог сохранить это изображение только в правой ссылке выше> Сохранить как:
str+= "<img src = 'blank.gif' style = 'badding: 0; положение: абсолютное; верх: 0; слева: 0; ширина: 140; высота: 226; z-index: 100;'>";
if (Equipform.userequip) Equipform.userequip.value = myequip = equip; // назначить код конфигурации в скрытый домен
bodyshow.innerhtml = str; // Показать изображения каждого слоя.
}
// после загрузки страницы начальное виртуальное изображение отображается сначала:
document.body.onload = новая функция ("shoiwit (myequip)");
Function rdest (слой, img) {// Эта функция используется для изменения конфигурации, параметры - это количество слоев, имя изображения
//event.returnvalue=false;
showlayers = myequip.split ('>');
newequip = "";
for (i = 0; i <showlayers.length; i ++) {
if (i+1 == слой) {
if (img == showlayers [i]) newequip+= "df"; // Если слой уже эта картина, он будет восстановлен на оригинальной картинке
else newequip+= img; // в противном случае измениться на эту картинку
}
else newequip+= showlayers [i]; // другие слои картинок остаются неизменными
if (i+1! = showlayers.length) newequip+= ">";
}
Shoiwit (newequip); // Показать последнюю конфигурацию
}
->
</script>
<script event = "onclick" для = "cs">
var obj = event.srcelement;
if (obj.tagname! = "img") return;
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/);
grashit (vars [1], vars [2]);
</script>
<Таблица сотока сотовой связи = "0" cellpadding = "0" id = "cs">
<tr>
<td> <img src = "4/1x.gif"> </td>
<td> <img src = "4/2x.gif"> </td>
<td> <img src = "4/3x.gif"> </td>
<td> <img src = "4/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "3/1x.gif"> </td>
<td> <img src = "3/2x.gif"> </td>
<td> <img src = "3/3x.gif"> </td>
<td> <img src = "3/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "2/1x.gif"> </td>
<td> <img src = "2/2x.gif"> </td>
<td> <img src = "2/3x.gif"> </td>
<td> <img src = "2/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "1/1x.gif"> </td>
<td> <img src = "1/2x.gif"> </td>
<td> <img src = "1/3x.gif"> </td>
<td> <img src = "1/4x.gif"> </td>
</tr>
</table>
</body>
</html>
Эффект работы показан на рисунке ниже:
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.