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

2019-09-06 14:50 来源:未知

正文实例叙述了js完成仿QQ秀换装效果的措施。分享给大家供大家参谋。具体贯彻格局如下:

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>
<title>javascript达成div浮动在网页最顶上并带关闭开关效果实例</title>
<style type="text/css">
<!--
body { margin: 0px;padding: 0px;text-align: center;}
TD {FONT-SIZE: 12px; COLOR: #333;}
#toubiao {BORDER-BOTTOM: #e2e2e2 1px solid;}
-->
</style>
</head>
<body>
<SCRIPT>
function toueme(){
document.getElementById("toubiao").style.display="none";
}
</SCRIPT>
<DIV id=toubiao>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="82%"><a target="_blank" href="/">
<span style="text-decoration: none"><font color="#808080">悬浮在网页顶上部分可关闭的工具条(浮动层),点击能够关闭哦</font></span></a></td>
<td width="14%" align="right"><a style="CURSOR: hand" onClick=toueme()>
<img  src="../img/close3.gif" hspace="6" border=0></a></td>
</tr>
</table>
</DIV>
</body>
</html>
</td>
   </tr>
 </table>

<!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=";
</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浮动图片的动态效果
  • js 图片随机不定向浮动的完成代码
  • 基于javascript达成右下角浮动广告作用
  • js 侧边浮动层效果落实代码(跟随滚动)
  • javascript中字体浮动作效果果的粗略实例演示
  • JavaScript兑现内外变动的窗口功效代码
  • js完成调换在网页左侧的简要QQ在线客服代码
  • JS实现弹出浮动窗口(协理鼠标拖动和倒闭)实例详解
  • JS完成可缩放、拖动、关闭和最小化的变迁窗口完整实例
  • js完成的简练图片浮动作效果果完全实例

运营作效果果如下图所示:

图片 1

企望本文所述对我们的javascript程序设计具备补助。

您大概感兴趣的小说:

  • 依据zepto.js完毕仿手提式有线电话机QQ空间的大图查看组件ImageView.js详解
  • jQuery+JSON+jPlayer完成QQ空间音乐查询成效示例
  • javascript兑现div的拖动并调动大小类似qq空间天性编辑模块
  • js完毕仿qq音讯的弹出窗效果
  • JS完毕仿QQ效果的三级竖向菜单
  • JS完成超简单的仿QQ折叠菜单功能
  • JS达成仿QQ面板的手风琴效果折叠菜单代码
  • js完成带缓冲效果的仿QQ面板折叠菜单代码
  • JS完毕仿QQ聊天窗口抖动特效
  • 纯js完成仿QQ邮箱弹出确认框
  • javascript仿qq分界面的折叠菜单实当代码
  • javascript 仿QQ滑动菜单功用代码
  • 基于JavaScript实现图片点击弹出窗口并不是保留
  • 用javascript完结点击链接弹出"图片另存为"并非直接展开
  • JS实现的仿QQ空间图片弹出效果代码
TAG标签:
版权声明:本文由990888藏宝阁发布于计算机网络,转载请注明出处:js实现仿QQ秀换装效果的方法