2019獨角獸企業重金招聘Python工程師標準>>>

圖一為進入頁面時展示的狀態，圖二，圖三為向下拉content內容時圖片放大顯示
圖四位當content內容區域拉動到一定范圍時content內容去向下滑走，圖片完全的展示出來。
這里主要是通過jquery去實現的，其中加入了animation.css動畫。
主要思路：

一、?通過手勢，來決定拖拽了多遠 二、?當松開手的時候，判斷頂部的具體，判斷是回到初始狀態還是展開圖片? 三、?點擊圖片回到初始裝填

核心代碼：
前端頁面：

<ion-content?class="has-header"?style="padding:?0"?scroll="false"?><div?class="imgDiv?animated"?ng-click="checkImg()"></div><div?class="contentDiv?animated"?ng-if="disPlayContent"?on-touch="onTouch($event)"?on-drag-down="onDrag($event);"?on-release="touchEnd()"><div?class="row?myItem"><div?class="col?col-10"><img?class="myIconImg"?ng-src="img/keepAccounts/autoScan/project.png"></div><div?class="col"><span>項目</span></div><div?class="col?col-10"><i?class="icon?ion-ios-arrow-right"?style="font-size:?1.6em"></i></div></div><div?class="row?myItem"?style="margin-top:?0.2em;padding:?0"><div?class="col?col-10"><img?class="myIconImg"?ng-src="img/keepAccounts/autoScan/costType.png"></div><div?class="col"><span>費用類型</span></div><div?class="col"?style="text-align:?right"><img?style="width:?2em;height:?2em"?src="img/keepAccounts/teamBuilding.png"></div><div?class="col?col-10"><i?class="icon?ion-ios-arrow-down"?style="font-size:?1.6em"></i></div></div><ion-scroll?direction="x"?scrollbar-x="false"><div?class="row"?style="white-space:?nowrap;overflow-x:?auto;width:?135%"><div?style="margin-right:?0.5em;width:?2.8em;"?ng-repeat="myIcon?in?myIcons"><div?class="row"><img?style="width:?2em;height:?2em"?ng-src={{myIcon.imgSrc}}></div><div?class="row"><span?style="color:?#808080;">{{myIcon.name}}</span></div></div></div></ion-scroll><div?class="row"><textarea?placeholder="請輸入票據備注"></textarea></div></div> </ion-content>

其中分兩塊，contentDiv和imgDiv
Css部分：

#autoScan?.imgDiv?{background:?url(img/keepAccounts/autoScan/test.png)?no-repeat?top;background-size:?150%;width:?100%;height:?18em;position:?fixed; }#autoScan?.contentDiv?{top:?130px;background-color:?white;position:?fixed;width:?98%;z-index:?2;margin-right:?1%;margin-left:?1%;border-top-left-radius:?5px;border-top-right-radius:?5px;box-shadow:?0px?-4px?5px?#6E5F5F; }

Controller代碼部分：

var?top?=?"";//記錄拉動是上邊距離 var?backgroundSize?=?150;//背景大小 var?last?=?0.001; var?top?=?"130px"; //展示contentDiv $scope.disPlayContent?=?true; //圖片 var?img?=?document.createElement("img"); img.src?=?"img/keepAccounts/autoScan/test.png";//點擊圖片的方法 $scope.checkImg?=?function(){//展示圖片if($scope.disPlayContent){$(".contentDiv").addClass("fadeOutDownBig");$scope.disPlayContent?=false;//圖片展示$(".imgDiv").animate({height:img.height},"fast");$(".imgDiv").animate({backgroundSize:"100%"},"fast");top?=?"130px";}else{//$(".contentDiv").removeClass("fadeOutDownBig");$scope.disPlayContent?=?true;$(".imgDiv").animate({height:"18em"},"fast");$(".imgDiv").animate({backgroundSize:"150%"},"fast");top?=?"130px";} };$scope.touchEnd?=?function?()?{backgroundSize?=?150;//$(".contentDiv").css("top","130px");//var?nowTop?=?$(".contentDiv").css("top");手機上取不到這個距離，取值為autotop?=?top.substring(0,?top.length?-?2);//松開手時頂部距離console.log(top);if(top<235){$(".contentDiv").animate({top:"130px"},"fast");$(".imgDiv").animate({backgroundSize:"150%"},"fast");}else{$(".contentDiv").addClass("fadeOutDownBig");$scope.disPlayContent?=false;//圖片展示$(".imgDiv").animate({height:img.height},"fast");$(".imgDiv").animate({backgroundSize:"100%"},"fast");} };$scope.onTouch?=?function?($event)?{if(rootConfig){console.log("touch");}$(".imgDiv").css("backgroundSize","150%"); };$scope.onDrag?=?function?($event)?{var?el?=?$event.target,dy?=?$event.gesture.deltaY;//last手機上第一次也取不到這個值，取值為autoif(dy>last){backgroundSize++;}else?if(dy<last){backgroundSize--;}last?=?dy;el.style.top?=?dy?+?130?+?"px";top?=??el.style.top;$(".contentDiv").css("top",?el.style.top);$(".imgDiv").css('background-size',?backgroundSize?+?"%"); };

注意這里的全局變量，因為手機端的差異，取css樣式top總是為auto，所以這是了全局變量，在onDrag上不斷的設置top變量。同理兩外兩個變量的值。

轉載于:https://my.oschina.net/Nealyang/blog/552955

總結

以上是生活随笔為你收集整理的高仿闪电报销app查看图片效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。