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 相关文章推荐
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
js实现放大镜特效
May 18 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
DSP接收机前端设想
2021/03/02 无线电
文件上传程序的全部源码
2006/10/09 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
轻化专业学生实习自我鉴定
2013/09/20 职场文书
小学一年级学生评语
2014/04/22 职场文书
高中语文课后反思
2014/04/27 职场文书
刑事代理授权委托书
2014/09/17 职场文书
教师调动申请报告
2015/05/18 职场文书
python实现图片批量压缩
2021/04/24 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android