nul

userWeb/UI/control.html

@@ -15,8 +15,8 @@
 		</div>
 		<div class="hr"></div>
 	</header>
-	<div id="control_search">
-		<div class="title">Search:</div>
+	<div id="control_search"> <!-- 搜索UI -->
+		<div class="title">Search</div>
 		<div class="input">
 			<div>
 				<p>
@@ -24,15 +24,32 @@
 					<span></span>
 				</p>
 				<div class="hot">
-					<p class="tit">Hot Search</p>
+					<p class="tit">Hot Search:</p>
 					<p class="word">
 						<a href="">game of thrones</a>
 						<a href="">TBBT</a>
 						<a href="">Sheldon</a>
 					</p>
 				</div>
+				<span>&times;</span>
+				<!-- <span class="glyphicon glyphicon-remove"></span> -->
 			</div>
-			<p><span>&times;</span></p>
 		</div>
+		<div class="hr"></div>
+	</div>
+	<div id="control_avatar"><!-- 我的UI -->
+		
+	</div>
+	<div id="control_cart"><!-- 购物车侧拉UI -->
+		
+	</div>
+	<div id="control_menu"><!-- 菜单侧拉UI -->
+		
 	</div>
+	<footer>
+		<span>@ Copyright 2009-2017 All rights reserved imgtee.com</span>
+		<span>
+			
+		</span>
+	</footer>
 </div>

userWeb/UI/css/about.css

@@ -1 +0,0 @@
-#home{}

userWeb/UI/css/control.css

@@ -1,6 +1,8 @@
+/*导航*/
 #control header{
-	height:123px;
-	padding-top: 1px;
+    min-width:1024px;
+    height:123px;
+    padding-top: 1px;
 }
 #control header nav{
 	float:left;
@@ -12,13 +14,13 @@
 	color: #2d3037;
 	background: url(../img/Logo.svg) 47% 49% no-repeat;
 	margin-right:8%;
-	width:65px;
+	width:61px;
 }
 #control header nav a:nth-child(1):hover{color: #2d3037;}
 #control header nav a{
 	display: inline-block;
     height: 123px;
-    width: 130px;
+    width:25%;
     text-align: center;
     line-height: 123px;
     font-weight: 500;
@@ -45,21 +47,30 @@
     height: 32px;
     margin-right: 46px;
 }
-#control .search{background:url("../img/search_icon.svg") no-repeat;
+/*四个控件按钮*/
+#control .search{
+    background:url("../img/search_icon.svg") no-repeat;
 }
-#control .search:hover{background:url("../img/search_icon_hover.svg") no-repeat;
+#control .search:hover{
+    background:url("../img/search_icon_hover.svg") no-repeat;
 }
-#control .avatar{background:url("../img/avatar_default.svg") no-repeat;
+#control .avatar{
+    background:url("../img/avatar_default.svg") no-repeat;
 }
-#control .avatar:hover{background:url("../img/avatar_default_hover.svg") no-repeat;
+#control .avatar:hover{
+    background:url("../img/avatar_default_hover.svg") no-repeat;
 }
-#control .cart{background:url("../img/cart_icon.svg") no-repeat;
+#control .cart{
+    background:url("../img/cart_icon.svg") no-repeat;
 }
-#control .cart:hover{background:url("../img/cart_icon_hover.svg") no-repeat;
+#control .cart:hover{
+    background:url("../img/cart_icon_hover.svg") no-repeat;
 }
-#control .menu{background:url("../img/menu_icon.svg") no-repeat;
+#control .menu{
+    background:url("../img/menu_icon.svg") no-repeat;
 }
-#control .menu:hover{background:url("../img/menu_icon_hover.svg") no-repeat;
+#control .menu:hover{
+    background:url("../img/menu_icon_hover.svg") no-repeat;
 }
 #control header .hr{
 	float: left;
@@ -68,7 +79,7 @@
     background: #F8F8F8;
     margin: 0 6%;
 }
-/*搜索*/
+/*四个控件按钮--搜索*/
 #control_search{
     display:none;
     width: 88%;
@@ -81,6 +92,27 @@
     font-family: HelveticaNeue;
     font-size: 32px;
     color: #262c38;
+
+    animation:control_searchTitle 1.5s;
+    -moz-animation:control_searchTitle 1.5s; /* Firefox */
+    -webkit-animation:control_searchTitle 1.5s; /* Safari and Chrome */
+    -o-animation:control_searchTitle 1.5s; /* Opera */
+}
+@keyframes control_searchTitle{
+    0%   {padding-top:248px;opacity:0;}
+    100% {padding-top:198px;opacity:1;}
+}
+@-moz-keyframes control_searchTitle{
+    0%   {padding-top:248px;opacity:0;}
+    100% {padding-top:198px;opacity:1;}
+}
+@-webkit-keyframes control_searchTitle{
+    0%   {padding-top:248px;opacity:0;}
+    100% {padding-top:198px;opacity:1;}
+}
+@-o-keyframes control_searchTitle{
+    0%   {padding-top:248px;opacity:0;}
+    100% {padding-top:198px;opacity:1;}
 }
 #control_search .input{
     text-align: center;
@@ -89,12 +121,33 @@
     display: inline-block;
 }
 #control_search .input>div>p{
-    height:50px
+    height:50px;
+    animation:control_searchInput 1.5s;
+    -moz-animation:control_searchInput 1.5s; /* Firefox */
+    -webkit-animation:control_searchInput 1.5s; /* Safari and Chrome */
+    -o-animation:control_searchInput 1.5s; /* Opera */
+}
+@keyframes control_searchInput{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-moz-keyframes control_searchInput{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-webkit-keyframes control_searchInput{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-o-keyframes control_searchInput{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
 }
 #control_search .input>div>p>input{
     float:left;
     height: 50px;
     width: 660px;
+    text-indent: 1em;
 }
 #control_search .input>div>p>span{
     background: url(../img/search_icon_white.svg) no-repeat;
@@ -108,12 +161,82 @@
     background-color: #00c400;
     background-position: 50% 50%;
 }
+#control_search .input>div>span{
+    color: #767a82;
+    display: inline-block;
+    font-size: 40px;
+    line-height: 25px;
+    margin-top:298px;
+    animation:control_searchClose 1.5s;
+    -moz-animation:control_searchClose 1.5s; /* Firefox */
+    -webkit-animation:control_searchClose 1.5s; /* Safari and Chrome */
+    -o-animation:control_searchClose 1.5s; /* Opera */
+}
+@keyframes control_searchClose{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-moz-keyframes control_searchClose{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-webkit-keyframes control_searchClose{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-o-keyframes control_searchClose{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
 #control_search .hot{
     text-align: left;
+    animation:control_searchHot 1.5s;
+    -moz-animation:control_searchHot 1.5s; /* Firefox */
+    -webkit-animation:control_searchHot 1.5s; /* Safari and Chrome */
+    -o-animation:control_searchHot 1.5s; /* Opera */
 }
-#control_search .input>p{
-    background: #767a82;
-    display: inline-block;
-    width: 25px;
-    height: 25px;
+@keyframes control_searchHot{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-moz-keyframes control_searchHot{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-webkit-keyframes control_searchHot{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+@-o-keyframes control_searchHot{
+    0%   {padding-top:50px;opacity:0;}
+    100% {padding-top:0px;opacity:1;}
+}
+#control_search .hot .tit{
+    font-weight:600;
+}
+#control_search .hot p{
+    margin-bottom: 0px;
+}
+#control_search .hr{
+    background-color: #f1f1f1;
+    height: 2px;
+    margin-top: 50px;
+}
+/*四个控件按钮--头像*/
+#control_avatar{
+    display:none;
+}
+/*四个控件按钮--购物车*/
+#control_cart{
+    display:none;
+}
+/*四个控件按钮--菜单*/
+#control_menu{
+    display:none;
+}
+/*页脚*/
+#control footer{
+    background-color: #F1F1F1;
+    width:100%;
+    height: 35px;
 }

userWeb/UI/css/custom.css

@@ -1 +0,0 @@
-#home{}

userWeb/UI/css/home.css

@@ -1 +0,0 @@
-#home{}

userWeb/UI/css/shop.css

@@ -1 +0,0 @@
-#home{}

userWeb/UI/js/control.js

@@ -7,20 +7,39 @@ addUI("control",function(){ //加载control回调
 });
 function controlF(){
 	function lang(){	//语言初始化
-		$("#control nav a:eq(1)").text(currentLang.c0000)
-		$("#control nav a:eq(2)").text(currentLang.c0001)
-		$("#control nav a:eq(3)").text(currentLang.c0002)
+		$("#control nav a:eq(1)").text(currentLang.co0000)
+		$("#control nav a:eq(2)").text(currentLang.co0001)
+		$("#control nav a:eq(3)").text(currentLang.co0002)
+		$("#control_search .title").text(currentLang.co0003)
+		$("#control_search .input>div>p>input").prop("placeholder",currentLang.co0004)
+		$("#control_search .hot .tit").text(currentLang.co0005)
 	}
 	lang();
 	$("#control header .search")[0].onclick=function(){
-		$("#uiLayer>div").not('#control').css('display', 'none');
-		$("#control_search").show('1', function() {
-			// $("#control_search").animate({display:"block"},"10000",function(){
-				console.log(100)
-			// })
+		var blockArr = $("#uiLayer>div").not('#control')
+		for (var i = 0; i < blockArr.length; i++) {
+			if ($(blockArr[i]).css('display')=="block") {
+				var block = $(blockArr[i])
+			}
+		}
+		blockArr.fadeOut("1000",function(){
+			$("#control_search").fadeIn("1000");
 		});
-		$("#control_search .input span")[0].onclick=function(){
-			$("#control_search").hide()
+		var x = $("#control_search .input>div>span")[0];
+		x.addEventListener("webkitAnimationEnd", myEndFunction_focus);
+		x.addEventListener("animationend", myEndFunction_focus);
+		function myEndFunction_focus() {
+			$("#control_search .input>div>p>input")[0].focus()
+		}
+		// 关闭搜索UI
+		$("#control_search .input>div>span")[0].onclick=function(){
+			$("#control_search").fadeOut("1000",function(){
+				if (typeof block != "undefined"){
+					block.fadeIn("1000");
+				}else{
+					window.location.reload();
+				}
+			})
 		}
 	}
 }

userWeb/config/common.css

@@ -3,4 +3,21 @@
  */
 #uiLayer{
   background-color:#fff;
-}
+}
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
+::-webkit-scrollbar  {
+    width: 6px;  /*滚动条宽度*/
+    height: 6px;  /*滚动条高度*/
+}
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track  {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
+    border-radius: 10px;  /*滚动条的背景区域的圆角*/
+    background-color: #1D2331;/*滚动条的背景颜色*/  
+}
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb  {
+    border-radius: 10px;  /*滚动条的圆角*/
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
+    background-color: #5F6C88;  /*滚动条的背景颜色*/
+} 

userWeb/config/common.js

@@ -1,7 +1,7 @@
 // 添加UI方法定义
 function addUI(
 	uiName,//UI名
-	loadDone,//加载完成回调
+	loadDone //加载完成回调
 ){
 	$("#Temporary").load("UI/"+uiName+".html",function(data,rt,obj){
 		$("#Temporary").html("");

userWeb/config/language.js

@@ -1,14 +1,20 @@
 // 0英文   1中文
 var languageJson = {
 	0:{
-		"c0000":"SHOP",
-		"c0001":"CUSTOM",
-		"c0002":"ABOUT",
+		"co0000":"SHOP",
+		"co0001":"CUSTOM",
+		"co0002":"ABOUT",
+		"co0003":"Search",
+		"co0004":"What t-shirt do you like?",
+		"co0005":"Hot Search:",
 	},
 	1:{
-		"c0000":"商店",
-		"c0001":"定制",
-		"c0002":"关于",
+		"co0000":"商店",
+		"co0001":"定制",
+		"co0002":"关于",
+		"co0003":"搜索",
+		"co0004":"你喜欢什么T恤衫?",
+		"co0005":"热 搜 :",
 	}
 }
 var len=objlen(languageJson)