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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 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开发中页面乱码的产生与解决
2008/03/27 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
js中的面向对象入门
2017/03/06 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python判断Abundant Number的方法
2015/06/15 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
基于python实现查询ip地址来源
2020/06/02 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
为什么要使用servlet
2016/01/17 面试题
副总经理工作职责
2013/11/28 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
建筑工地标语
2014/06/18 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
北京英文导游词
2015/02/12 职场文书
整改通知书
2015/04/20 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫