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 相关文章推荐
prototype class详解
Sep 07 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
易被忽视的js事件问题总结
May 14 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 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维护文件系统
2006/10/09 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP连接access数据库
2015/03/27 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js Dialog 实践分享
2012/10/22 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
交通文明倡议书
2014/05/16 职场文书
社区活动策划方案
2014/08/21 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
辞职信怎么写
2015/02/27 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
如何做好员工培训计划?
2019/07/09 职场文书