js在線佩戴眼鏡篩選代碼



121 483 162



特效描述:在線佩戴眼鏡 篩選,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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表