js实现仿QQ秀换装效果的方法


Posted in Javascript onMarch 04, 2015

本文实例讲述了js实现仿QQ秀换装效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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">

<head>

<title>仿QQ秀换装效果</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style>

#cs img{cursor:hand}

</style>

<base href="http://www.zzsky.cn/effect/images/qqshow/">

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<!-- 在要显示形象预览的地方放置以下这句代码 -->

<div id="bodyshow" style="border:1px solid #000000;padding:0;POSITION: relative; Left: 0px; TOP: 0px; HEIGHT: 226px; WIDTH: 140px;"></div> 

<!-- 这是提交表单,把代表用户形象的字符串赋到隐藏域 userequip 提交 -->

<form name="equipform" method="post" action="">

<input name="userequip" type="hidden" value=""> 

<input name="saveequip" type="submit" 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"; //最初显示的配置码,可由服务器读取并输出。

function shoiwit(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;position:absolute;top:0;left:0;width:140;height:226;z-index:"+(i+1)+";'>";

}

}

//最后在最上一层覆盖一幅完全透明的图片,这样用户在上面右链>另存为也只能保存这幅图了:

str+="<img src='blank.gif' style='padding:0;position:absolute;top:0;left:0;width:140;height:226;z-index:100;'>";

if(equipform.userequip) equipform.userequip.value=myequip=equip; //把配置码赋值到隐藏域中

bodyshow.innerHTML=str; //显示各层图片。

}

//页面加载后先显示最初的虚拟形象:

document.body.onload=new Function("shoiwit(myequip)");

function dressit(layer,img){ //这个函数用于更换配置,参数为 层数,图片名

//event.returnValue=false;

showlayers=myequip.split('>');

newequip="";

for(i=0;i<showlayers.length;i++){

if(i+1==layer){

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" for="cs">

var obj=event.srcElement;

if(obj.tagName!="IMG")return;

var vars=obj.src.match(/\/(\d)\/(\d)x\.gif$/);

dressit(vars[1],vars[2]);

</script>

<table border="0" cellspacing="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>

运行效果如下图所示:

js实现仿QQ秀换装效果的方法

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 #Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 #Javascript
javascript 动态创建表格的2种方法总结
Mar 04 #Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python Crypto模块的安装与使用方法
2017/12/21 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
详解Python3 基本数据类型
2019/04/19 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
人事部岗位职责范本
2014/03/05 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
主婚人致辞精选
2015/07/28 职场文书
班级管理经验交流材料
2015/11/02 职场文书
导游词之湖州-太湖
2019/10/11 职场文书