javascript 实现 QQshow

============思路============
1、首先想到，在展示形象的div中，一定要将裤子、衣服、头发和头饰的图片分别放在不同的层（这可以用z-index标记）。因为头饰要盖住头发，头发要盖在衣服上，衣服的下沿也要盖住裤头。
2、各种衣物如何在div中定位？可以在制作图片时就定好位置，图片尺寸与div相同，该有东西的地方放上东西，程序中不须再处理。
3、如何穿脱衣服？可以在div中创建四个<img>，它们大小一样，但处于不同的层。分别装裤子、衣服、头发和头饰。当试穿衣物A时，就将相应img的src改为A的图片地址。这样原来穿着的衣服就自动没有了，不用再写脱衣服的函数，但如果原本就穿着衣物A，则要将相应的img的src改为初始时的图片。
4、3中提到的衣物A与相应的img如何联系起来呢？可以将衣物抽象为Clothes类，它有layer属性和image属性和putOn（）方法。
trousers,jacket,hair,headwear是它的实例，这样，如果需要换裤子，则调用trousers.putOn("A"),函数就会去修改对应于裤子的img。
============说明=============
程序中没有写“保存形象”的方法，如果要保存形象，需要form提交相关数据到服务器端，服务器端将结果保存在数据库中，这样的话下次浏

览该页面或刷新该页面的的时候读取数据库中的信息，然后就可以看到新的形象了。
============代码=============

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> QQ show </title> <style type="text/css"></style> </head> <body> <div id="bodyshow"></div> <form name="equipform" method="post" action=""> <input name="saveequip" type="submit" value="保存形象" /> <input name="toreequip" type="button" value="原始形象" οnclick="init();" /> </form> <table class="wrap" cellspacing="0" cellpadding="0"> <colgroup width="84"></colgroup> <tr> <td><a href="javascript:void(0)" οnclick="headwear.putOn(1);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/4/1x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="headwear.putOn(2);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/4/2x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="headwear.putOn(3);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/4/3x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="headwear.putOn(4);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/4/4x.gif" /></a></td> </tr> <tr> <td><a href="javascript:void(0)" οnclick="hair.putOn(1);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/3/1x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="hair.putOn(2);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/3/2x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="hair.putOn(3);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/3/3x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="hair.putOn(4);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/3/4x.gif" /></a></td> </tr> <tr> <td><a href="javascript:void(0)" οnclick="jacket.putOn(1);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/2/1x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="jacket.putOn(2);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/2/2x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="jacket.putOn(3);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/2/3x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="jacket.putOn(4);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/2/4x.gif" /></a></td> </tr> <tr> <td><a href="javascript:void(0)" οnclick="trousers.putOn(1);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/1/1x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="trousers.putOn(2);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/1/2x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="trousers.putOn(3);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/1/3x.gif" /></a></td> <td><a href="javascript:void(0)" οnclick="trousers.putOn(4);"> <img src="http://www.pconline.com.cn/pcedu/redian/code_2003/equipment/1/4x.gif" /></a></td> </tr> </table> </body> <script type="text/javascript"></script> </html>

javascript 实现 QQshow相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...

javascript 实现 QQshow

javascript 实现 QQshow相关推荐

最新文章

热门文章