修改二维码循环为CSS动画

Author: quanru

css/phone.css

@@ -116,7 +116,7 @@
         font-size: 20px;
         width: 230px;
     }
-    #voiceBtn {
+    #searchVoiceBtn {
         float: right;
         padding: 12px 5px 5px 5px;
         border-bottom: 2px solid #4f8643;
@@ -272,21 +272,6 @@
         width: 100px;
     }
     /*
-    搜索页面
-     */
-    #inputSearch {
-        font-size: 20px;
-        width: 175px;
-    }
-    #tipIcons a {
-        float: left;
-        margin: 30px 1%;
-    }
-    #tipIcons p {
-        font-size: 10px;
-        width: 40px;
-    }
-    /*
     通讯录页面
      */
     #a-z {
@@ -393,7 +378,7 @@
       #toolBar h3 {
           font-size: 20px;
       }
-    .topRightBtn{
+      #toolBar img{
         padding: 5px 20px 10px 20px;
     }
     #gobackBtn {
@@ -472,4 +457,27 @@
         font-size: 10px;
         top: -30px;
     }
+    /*
+    搜索页面
+     */
+    #inputSearch {
+        font-size: 20px;
+        width: 170px;
+        height: 31px;
+        line-height: 36px;
+    }
+    img#searchIcon{
+        padding: 3px 0;
+    }
+    img#searchVoiceBtn {
+        padding: 6px 5px 0px 5px;
+    }
+    #tipIcons a {
+        float: left;
+        margin: 30px 1%;
+    }
+    #tipIcons p {
+        font-size: 10px;
+        width: 40px;
+    }
 }

css/scan2D.css

@@ -54,9 +54,31 @@
 }
 #scrollBar{
     width: 100%;
-    bottom: 100%;
+    -webkit-animation: scan2D 1.5s infinite;
+    -o-animation: scan2D 1.5s infinite;
+    animation: scan2D 1.5s infinite;
 }
 #botBar img {
     width: 40px;
     height: 40px;
+}
+@-webkit-keyframes scan2D {
+    from {bottom:100%;}
+    to {bottom:0;}
+}
+@-moz-keyframes scan2D {
+    from {bottom:100%;}
+    to {bottom:0;}
+}
+@-ms-keyframes scan2D {
+    from {bottom:100%;}
+    to {bottom:0;}
+}
+@-o-keyframes scan2D {
+    from {bottom:100%;}
+    to {bottom:0;}
+}
+@keyframes scan2D {
+    from {bottom:100%;}
+    to {bottom:0;}
 }

js/contacts.js

@@ -1,4 +1,5 @@
 var srcEle;//保存被长按的元素
+	,isMove;
 $(function  () {
 	$("#toolBar, #slideMenu").bind("mousedown touchstart", backgroundColor1);//点击添加与搜索按钮后变色
 	$("#popMenu, #newFriends").bind("mousedown touchstart", "#D6D6D6", backgroundColor2);//点击变色
@@ -13,6 +14,6 @@ $(function  () {
 	});
 	$("#bottomBar").bind("click touchend", bottomHref);//底栏导航
 	$("#contactsList").bind("mousedown touchstart", longClick);//长按列表弹出菜单
-	$("#shade").bind("click touchend", getOut);//点击背景退出菜单
 	$("#contactsList").bind("click", enterPerson);//单击进入聊天窗口
+	$("#shade").bind("click touchend", getOut);//点击背景退出菜单
 });

js/scan2D.js

@@ -4,5 +4,4 @@ $(function  () {
 	$("#gobackBtn").bind("click touchend", goBack);//返回按钮
 	$("#menuBtn").bind("click", slideMenu);//点击右上角菜单
 	$("#botBar").bind("click touchend", changeImg);//点击改变扫描框大小
-	cycleScan();//循环扫描二维码动画
 });

js/util.js

@@ -120,10 +120,6 @@ function changeShake (event) {//切换摇一摇目标
 	src.setAttribute("src", './img/' + src.id + '2.jpg');
 	$("#toolBar h4").html(src.getAttribute('alt'));
 }
-function cycleScan () { //循环扫描二维码动画
-	$("#scrollBar").css("bottom", "100%");
-	$("#scrollBar").animate({bottom:'0'}, 1500, cycleScan);
-}
 function changeImg (e) {//点击改变扫描框大小
 	var src = e.target,
 		srcParent = $("#botBar img");