超酷的发型在线切换选择js特效，点击发型头像立即切换显示，这个特效常用于购物网站，给用户良好的体验效果哦。
<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>经典实用在线发型切换试穿js特效_武鸣人</title>
<style type="text/css">
html,body{width:100%;height:100%;overflow:hidden;}
body{margin:0px;padding:0px;background:#000;font-size:12px;}
#box{width:820px;overflow:hidden;background:#695e58;margin:20px 20px 20px 20px;padding:10px;}
.img{width:406px;height:566px;float:left;border:1px solid #3a3a3a;background:#fff;display:inline;margin-top:30px;position:relative;}
.tab{width:406px;height:30px;position:absolute;top:-30px;left:-1px;}
.tab span{width:90px;height:28px;float:left;border:1px solid #3a3a3a;display:inline;margin-right:6px;background:#534843;color:#fff;font-family:"微软雅黑";font-weight:bold;font-size:14px; text-align:center;line-height:30px;cursor:pointer;}
.tab span.hove{background:#fff;border-bottom:1px solid #fff; color:#3c3733;}
.right{width:395px;height:561px;float:right;background:#3c3733;display:inline;margin-top:30px;padding:7px 0 0 7px;position:relative;}
.imgList{width:406px;height:566px;float:left;overflow:hidden;position:relative;}
.imgListW{width:406px;height:566px;position:absolute;top:0px;left:0px;filter:alpha(opacity=100);opacity:1;}
.imgListW ul{width:406px;float:left;margin:0px;padding:1px;list-style-type:none;}
.imgListW li{width:95px;height:135px;float:left;background:#fff;padding:3px;color:#56514c;}
.imgListW li img{border:1px solid #56514c;cursor:pointer;}
.imgListW li span{display:block;line-height:20px;text-align:center;padding-top:3px;}
.imgListW li.hove{background:#56514c;color:#fff;}
.imgBig{width:406px;height:566px;position:absolute;top:0;left:0;display:none;overflow:hidden;filter:alpha(opacity=0);opacity:0;}
.hairstyle{width:0px;height:0px;position:absolute;top:120px;left:50%;cursor:move;}
.hairstyle .LT{width:5px;height:5px;position:absolute;top:-2px;left:-2px;overflow:hidden;background:#3a3a3a;cursor:nw-resize;z-index:10;}
.hairstyle .RT{width:5px;height:5px;position:absolute;top:-2px;right:-2px;overflow:hidden;background:#3a3a3a;cursor:ne-resize;z-index:10;}
.hairstyle .LB{width:5px;height:5px;position:absolute;bottom:-2px;left:-2px;overflow:hidden;background:#3a3a3a;cursor:ne-resize;z-index:10;}
.hairstyle .RB{width:5px;height:5px;position:absolute;bottom:-2px;right:-2px;overflow:hidden;background:#3a3a3a;cursor:nw-resize;z-index:10;}
.imgBigL{width:406px;height:566px;position:absolute;top:0px;left:0px;display:none;overflow:hidden;background:#fff url(/img/20240302_www_wuming_ren_18.gif) no-repeat center;filter:alpha(opacity=50);opacity:0.5}
.imgfun{width:406px;height:74px;position:absolute;bottom:-75px;left:0px;background:#695e58;border-top:1px solid #3a3a3a;}
.imgfun ul{margin:0px;padding:10px 0 0 0;}
.imgfun li{width:49px;height:52px;float:left;display:inline;margin-left:8px;color:#fff;text-align:center;cursor:pointer;}
.imgfun li span{display:block;line-height:20px;margin-top:32px;}
.imgfun li em{width:10px;height:10px;position:absolute;overflow:hidden;cursor:pointer;}
.imgfun li em.T{top:0px;left:20px;}
.imgfun li em.L{left:10px;top:10px;}
.imgfun li em.R{right:10px;top:10px;}
.imgfun li em.B{left:20px;bottom:20px;}
.imgfun li.prev{background:url(/img/20240302_www_wuming_ren_9.jpg) no-repeat center 10px;}
.imgfun li.next{background:url(/img/20240302_www_wuming_ren_10.jpg) no-repeat center 10px;}
.imgfun li.reset{background:url(/img/20240302_www_wuming_ren_11.jpg) no-repeat center 9px;}
.imgfun li.tz{width:50px;background:url(/img/20240302_www_wuming_ren_12.jpg) no-repeat center 2px;position:relative;cursor:auto;}
.imgfun li.heig{background:url(/img/20240302_www_wuming_ren_13.jpg) no-repeat center 12px;}
.imgfun li.heig1{background:url(/img/20240302_www_wuming_ren_14.jpg) no-repeat center 12px;}
.imgfun li.width{background:url(/img/20240302_www_wuming_ren_13.jpg) no-repeat center 12px;}
.imgfun li.width1{background:url(/img/20240302_www_wuming_ren_14.jpg) no-repeat center 12px;}
.imgfun li.re{background:url(/img/20240302_www_wuming_ren_15.jpg) no-repeat center 7px;}
.filter{width:393px;height:28px;float:left;position:relative;}
.filter em{width:50px;height:19px;position:absolute;top:3px;left:40px;background:url(/img/20240302_www_wuming_ren_16.jpg) no-repeat;z-index:0;}
.filter ul{margin:0px;padding:0px;list-style-type:none;position:absolute;top:0px;left:0px;z-index:1;}
.filter ul span{width:40px;height:28px;text-align:center;line-height:28px;color:#fff;float:left;font-weight:bold;}
.filter li{width:50px;height:28px;text-align:center;line-height:28px;color:#fff;cursor:pointer;float:left;}
.hair{width:393px;height:auto;float:left;}
.hair ul{margin:0px;padding:0px;float:left;list-style-type:none;}
.hair li{width:92px;height:105px;float:left;border:1px solid #211c19;display:inline;margin:0 4px 4px 0;cursor:pointer;overflow:hidden;}
.hair li img{filter:alpha(opacity=60);opacity:0.6}
.mask{width:402px;height:569px;background:#000;position:absolute;top:-1px;left:0px;z-index:1;filter:alpha(opacity=50);opacity:0.5}
#loading{width:100%;height:100%;position:absolute;top:0px;left:0px;background:#000;z-index:10;filter:alpha(opacity=100);opacity:1;}
#loading div{background:#242424;border-radius:8px 8px 8px 8px;box-shadow:2px 2px 2px #1e1e1e;height:50px;left:50%;line-height:50px;margin:-25px 0 0 -100px;position:absolute;text-align:center;top:50%;width:200px; color:#ededed;font-size:14px;letter-spacing:2px;text-align:left;filter:alpha(opacity=100);opacity:1;}
#loading div span{width:16px;height:16px;float:left;display:inline;margin:16px 10px 0 20px;background:url(/img/20240302_www_wuming_ren_17.gif) no-repeat;}
#bottom{width:100%;height:60px;line-height:60px;color:#fff;text-align:center;position:absolute;left:0px;bottom:0px;font-family:Verdana;}
#bottom a{background:#3c3733;text-decoration:none;color:#fff; padding:3px 5px;}
</style>
<script type="text/javascript" src="/img/20240302www_wuming_ren_2.js"></script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="loading">
<div><span></span>页面正在加载中……</div>
</div>
<div id="box">
<div class="img">
<div class="tab">
<span class="hove">选择模特</span>
<span>上传照片</span>
<span>拍照</span>
<span style="margin:0px;">保存</span>
</div>
<div class="imgList">
<div class="imgListW">
<ul>
<li><img src="/img/20240302_wuming_ren_1.jpg" title="安吉丽娜"><span>安吉丽娜</span></li>
<li><img src="/img/20240302_wuming_ren_2.jpg" title="张译"><span>张译</span></li>
<li><img src="/img/20240302_wuming_ren_3.jpg" title="袁立"><span>袁立</span></li>
<li><img src="/img/20240302_wuming_ren_4.jpg" title="王若涵"><span>王若涵</span></li>
<li><img src="/img/20240302_wuming_ren_5.jpg" title="宁静"><span>宁静</span></li>
<li><img src="/img/20240302_wuming_ren_6.jpg" title="李小璐"><span>李小璐</span></li>
<li><img src="/img/20240302_wuming_ren_7.jpg" title="陈坤"><span>陈坤</span></li>
<li><img src="/img/20240302_wuming_ren_8.jpg" title="金美辛"><span>金美辛</span></li>
<li><img src="/img/20240302_wuming_ren_9.jpg" title="杨紫"><span>杨紫</span></li>
<li><img src="/img/20240302_wuming_ren_10.jpg" title="李冰冰"><span>李冰冰</span></li>
<li><img src="/img/20240302_wuming_ren_11.jpg" title="冯雨芝"><span>冯雨芝</span></li>
<li><img src="/img/20240302_wuming_ren_12.jpg" title="杨渝渝"><span>杨渝渝</span></li>
<li><img src="/img/20240302_wuming_ren_13.jpg" title="肖诗瑶"><span>肖诗瑶</span></li>
<li><img src="/img/20240302_wuming_ren_14.jpg" title="赵丽颖"><span>赵丽颖</span></li>
<li><img src="/img/20240302_wuming_ren_15.jpg" title="江一燕"><span>江一燕</span></li>
<li><img src="/img/20240302_wuming_ren_16.jpg" title="翁虹"><span>翁虹</span></li>
</ul>
</div>
<div class="imgBig"><img src="/img/20120113wuming_big_10.jpg"><div class="hairstyle"><div></div>
<div style="display:none;">
<span class="LT"></span>
<span class="RT"></span>
<span class="LB"></span>
<span class="RB"></span>
</div>
</div><div class="imgfun">
<ul>
<li class="reset"><span>重置</span></li>
<li class="tz"><em class="T"></em><em class="L"></em><em class="R"></em><em class="B"></em><span>调整位置</span></li>
<li class="heig"><span>高度</span></li>
<li class="heig1"><span>高度</span></li>
<li class="width"><span>宽度</span></li>
<li class="width1"><span>宽度</span></li>
<li class="re"><span>重选</span></li>
</ul>
</div></div>
</div>
<div class="imgBigL"></div>
</div>
<div class="right">
<div class="filter" id="xb">
<em></em>
<ul>
<span>性别：</span>
<li class="xq">全部</li>
<li class="xm">男</li>
<li class="xw">女</li>
</ul>
</div>
<div class="filter" id="qz">
<em></em>
<ul>
<span>直曲：</span>
<li>全部</li>
<li>直发</li>
<li>卷发</li>
<li>微卷</li>
</ul>
</div>
<div class="filter" id="cd">
<em></em>
<ul>
<span>长短：</span>
<li>全部</li>
<li>长发</li>
<li>中发</li>
<li>短发</li>
</ul>
</div>
<div class="filter" id="lx">
<em></em>
<ul>
<span>流行：</span>
<li>水母头</li>
<li>蘑菇头</li>
<li>荷叶头</li>
<li>蛋卷头</li>
<li>盘头</li>
<li>梨花头</li>
<li>刺猬头</li>
</ul>
</div>
<div class="hair">
<ul>
<li><img src="/img/20240302_wuming_1.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_2.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_3.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_4.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_5.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_6.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_7.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_8.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_9.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_10.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_11.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_12.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_13.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_14.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_15.jpg" height="105" width="92"></li>
<li><img src="/img/20240302_wuming_16.jpg" height="105" width="92"></li>
</ul>
</div>
<div class="mask"></div>
</div>
</div>
<div id="bottom">努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处