js在线佩戴眼镜筛选代码



119 475 159



特效描述:在线佩戴眼镜 筛选,js佩戴眼镜,眼镜筛选,在线筛选

代码结构

1. 引入CSS

<link href="css/eyeglass.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/eyeglass.js"></script>
<script src="js/pngfix.js"></script>

3. HTML代码

<div id="box">
    <div id="overlay"><div id="load">数据转入中...<span>0%</span><p></p></div></div>
    <div id="left">
        <div class="modelBox">
            <div class="tab">
                <ul>
                    <li class="current ico-1">模特试镜</li>
                    <li class="ico-2">我的相片</li>
                    <li class="ico-3">视频相片</li>
                </ul>
            </div>
            <div class="modelList">
                <div class="faceType">
                    <ul class="normal">
                        <li><a href="javascript:;" data-type="*">全 部</a></li>
                        <li><a href="javascript:;" data-type="0,2">椭圆脸</a></li>
                        <li><a href="javascript:;" data-type="1,3">圆形脸</a></li>
                        <li><a href="javascript:;" data-type="4,6">长形脸</a></li>
                        <li><a href="javascript:;" data-type="5,9">方形脸</a></li>
                        <li><a href="javascript:;" data-type="7,11">瓜子脸</a></li>
                        <li><a href="javascript:;" data-type="8,10">心型脸</a></li>
                    </ul>
                    <div class="active">
                        <ul>
                            <li>全 部</li>
                            <li>椭圆脸</li>
                            <li>圆形脸</li>
                            <li>长形脸</li>
                            <li>方形脸</li>
                            <li>瓜子脸</li>
                            <li>心型脸</li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <ul>
                        <li><img src="images/model_1.jpg" /></li>
                        <li><img src="images/model_2.jpg" /></li>
                        <li><img src="images/model_3.jpg" /></li>
                        <li><img src="images/model_4.jpg" /></li>
                        <li><img src="images/model_5.jpg" /></li>
                        <li><img src="images/model_6.jpg" /></li>
                        <li><img src="images/model_7.jpg" /></li>
                        <li><img src="images/model_8.jpg" /></li>
                        <li><img src="images/model_9.jpg" /></li>
                        <li><img src="images/model_10.jpg" /></li>
                        <li><img src="images/model_11.jpg" /></li>
                        <li><img src="images/model_12.jpg" /></li>
                    </ul>
                </div>
            </div>
        </div>
        <ul id="tools">
            <li class="open">收缩</li>
            <li class="camera">拍照</li>
            <li class="gauge">瞳距</li>
            <li class="reset">重选</li>
        </ul>
        <div class="mask"></div>
    </div>
    <div id="right">    	
        <div class="search">
            <div class="selectWrap">
                <a class="select" href="javascript:;">品牌</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">佐腾樱花</a></li>
                    <li><a href="javascript:;">毕加索</a></li>
                    <li><a href="javascript:;">沙漠之鹰</a></li>
                    <li><a href="javascript:;">蝙蝠侠</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">款式</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">男款</a></li>
                    <li><a href="javascript:;">女款</a></li>
                    <li><a href="javascript:;">通过款</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">脸型</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">椭圆脸</a></li>
                    <li><a href="javascript:;">长形脸</a></li>
                    <li><a href="javascript:;">方形脸</a></li>
                    <li><a href="javascript:;">瓜子脸</a></li>
                    <li><a href="javascript:;">心型脸</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">型号</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">40-49(小码)</a></li>
                    <li><a href="javascript:;">50-53(中码)</a></li>
                    <li><a href="javascript:;">54-57(大码)</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">框形</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">全框</a></li>
                    <li><a href="javascript:;">半框</a></li>
                    <li><a href="javascript:;">无框</a></li>
                    <li><a href="javascript:;">眉框</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">材质</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">金属合金</a></li>
                    <li><a href="javascript:;">板材镜架</a></li>
                    <li><a href="javascript:;">铁架系列</a></li>
                    <li><a href="javascript:;">钛架系列</a></li>
                    <li><a href="javascript:;">记忆镜架</a></li>
                </ul>
            </div>
            <div class="selectWrap">
                <a class="select" href="javascript:;">价格</a>
                <ul>
                    <li class="current"><a href="javascript:;">全部</a></li>
                    <li><a href="javascript:;">50以下</a></li>
                    <li><a href="javascript:;">50-100</a></li>
                    <li><a href="javascript:;">100-150</a></li>
                    <li><a href="javascript:;">150-200</a></li>
                    <li><a href="javascript:;">200-300</a></li>
                    <li><a href="javascript:;">300以上</a></li>
                </ul>
            </div>
            <a href="javascript:;" class="btn">点击搜索</a>
        </div>
        <div class="glassList">
            <ul>        
                <li><img src="images/glass_1.jpg"><h5>佐腾樱花_ZTYH-001</h5>豹纹色</li>
                <li><img src="images/glass_2.jpg"><h5>佐腾樱花_ZTYH-010</h5>蓝色</li>
                <li><img src="images/glass_3.jpg"><h5>毕加索_55-2062 C6</h5>绅士黑</li>
                <li><img src="images/glass_4.jpg"><h5>毕加索_55-2001 C6</h5>绅士黑</li>
                <li><img src="images/glass_5.jpg"><h5>毕加索_55-2068 C11</h5>荧光红</li>
                <li><img src="images/glass_6.jpg"><h5>毕加索_55-2051 C11</h5>荧光红</li>
                <li><img src="images/glass_7.jpg"><h5>沙漠之鹰_R5152 C16</h5>绅士黑</li>
                <li><img src="images/glass_8.jpg"><h5>沙漠之鹰_R5152 CCG</h5>绅士银</li>
                <li><img src="images/glass_9.jpg"><h5>沙漠之鹰_R5137 C16</h5>绅士黑</li>  
                <li><img src="images/glass_10.jpg"><h5>蝙蝠侠_BM95002 C9D</h5>绅士黑</li>
                <li><img src="images/glass_11.jpg"><h5>蝙蝠侠_BM97004 B6</h5>绅士银</li>
                <li><img src="images/glass_12.jpg"><h5>蝙蝠侠_BM97004 B1</h5>透明黑</li>        
            </ul>
        </div>
        <div class="mask"></div>
    </div>
</div>
<script type="text/javascript">
//图片预加载
;(function() {
	var oLayer = fgm.$("overlay");
		oLoad = fgm.$("load"),
		oSpan = fgm.$$("span", oLoad)[0],
		oP = fgm.$$("p", oLoad)[0],
		aData = [],
		iImgcount = 0,
		iLoaded = 0,
		aImg = [].concat("btn.gif", "ico.gif", "search.png", "loading.gif");	
	for(i = 1; i <= 12; i++) aImg = aImg.concat("model_" + i + ".jpg", "big_" + i + ".jpg", "glass_" + i + ".jpg", "glass_" + i + ".png");
	for(i = 0, iImgCount = aImg.length; i < iImgCount; i++) {
		(function(i) {
			var oImg = new Image();
			oImg.onload = function() {
				oSpan.innerHTML = oP.style.width = Math.ceil(++iLoaded / iImgCount * 100) + "%";
				this.onload = null;					
				var aTmp = document.createElement("img");
				aTmp.src = this.src;
				aData[i] = aTmp;
				if(aData[i] && aData.length == iImgCount) {
					fgm.animate(oLayer, {opacity:0}, {
						callback: function() {
							fgm.css(this, {display:"none"})	
						}
					});
					complete()	
				}
			}
			oImg.src = "images/" + aImg[i];
		})(i);		
	}
})();
</script>
<!--[if IE 6]><script src="js/pngfix.js"></script><script>DD_belatedPNG.fix(".glass img");</script><![endif]-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 收缩展开 展开收缩 收缩 展开 其他 收缩菜单 收缩导航 选项卡自动切换 多功能 多功能插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到