上传滑块控制

EBook.Web/Common/tasklib_book.css

@@ -212,16 +212,18 @@ table{
 }
 .LDFProcS .LDFProcImg {
     width:10px;
-    height:10px;
+    height:48px;
     position:relative;
     left:0px;
-    top:-6px;
+    top:-25px;
     background-image: url('../Images/Listen/拉杆@2x.png');
-    background-size: 100%;
+    background-size: 10px 10px;
+    background-repeat:no-repeat;
+    background-position-y: 19px;
 }
 .LDivFooter .LDFTimerS{
     width: 100px;
-    line-height:0px;
+    line-height:16px;
     float:right;
     margin-top:14px;
     text-align: right;

EBook.Web/Common/tasklib_book.js

@@ -328,6 +328,10 @@ var AddListenDiv = function (NodeHandle, NIndex) {
         var htmlStr = '<div class="ListenDiv" data-status="0"><div class="LDivTop" style="width:1px;height:0px;overflow:hidden;"><div class="LDivTItem LDivTItem_' + NIndex + ' LDivTItem_' + NIndex + '_0" data-selected="1" onclick="cLSourceFunc(' + NIndex + ',0)" data-selected="1"  data-auduourl="' + UrlStr + '"></div></div><div class="LDivFooter"><div class="LDFPlayS LDFPlayS_' + NIndex + '" data-playstatus="0" onclick="playMusicFunc(' + NIndex + ')"></div><div class="LDFPauseS LDFPauseS_' + NIndex + '" onclick="pauseMusicFunc(' + NIndex + ')"></div><div class="LDFProcS"><div class="LDFPWhite LDFPWhite_' + NIndex + '"></div><div class="LDFProcImg LDFProcImg_' + NIndex + '"></div></div><div class="LDFTimerS"><span class="RunTime RunTime_' + NIndex + '">00:00</span><span>/</span><span class="RunAllTime RunAllTime_' + NIndex + '">00:00</span></div></div></div>';
     }
     $(NodeHandle).css("width", "1px").css("height", "1px").css("overflow", "hidden").after(htmlStr);
+    // 添加滑块事件
+    $(".LDFProcImg")[NIndex].addEventListener("touchstart", TouchStartFunc, false);
+    $(".LDFProcImg")[NIndex].addEventListener("touchmove", TouchMoveFunc, false);
+    $(".LDFProcImg")[NIndex].addEventListener("touchend", TouchEndFunc, false);
 }
 // 切换听力材料
 var cLSourceFunc = function (iIndex, oIndex) {
@@ -344,6 +348,7 @@ var playMusicFunc = function (iIndex) {
     var AudioUrl = $(jQStr).parent().prev(".LDivTop").find(".LDivTItem[data-selected='1']").attr("data-auduourl");
     var AStatus = 0;
     if (playStatus == "0") {
+        StopAllCss();
         $(jQStr).attr("data-playstatus", 1);
         AStatus = 1;
     }
@@ -362,6 +367,9 @@ var playMusicFunc = function (iIndex) {
 var pauseMusicFunc = function (iIndex) {
     var jQStr = ".LDFPlayS_" + iIndex;
     $(jQStr).attr("data-playstatus", 0);
+    var jQStr = ".LDFPWhite_" + TouchIndex;
+    var TTimeNum = parseInt($(jQStr).attr("data-alltime"));
+    showImageFunc(iIndex, 0, TTimeNum);
     var AudioUrl = $(jQStr).parent().prev(".LDivTop").find(".LDivTItem[data-selected='1']").attr("data-auduourl");
     var info = {
         Id: iIndex,  // 第几个
@@ -371,12 +379,12 @@ var pauseMusicFunc = function (iIndex) {
     playVisiableAudioCallBack(1, JSON.stringify(info));
 }
 // 设置滑块的位置
-var playImageFunc = function (iIndex,leftVal,allTimes) {
+var playImageFunc = function (iIndex, leftVal, allTimes) {
     var jQStr = ".LDFProcImg_" + iIndex;
     var PWidthVal = $(jQStr).parent().css("width");
     // 兼容单位
     var PUint = "";
-    if(PWidthVal.indexOf("px") > -1) {
+    if (PWidthVal.indexOf("px") > -1) {
         PUint = "px";
         PWidthVal = PWidthVal.replace(PUint, "");
     }
@@ -393,7 +401,7 @@ var playImageFunc = function (iIndex,leftVal,allTimes) {
     //LeftPx = LeftPx < 0 ? 0 : LeftPx;
     $(jQStr).css("left", LeftPx + PUint);  // 设置滑块滚动
     jQStr = ".LDFPWhite_" + iIndex;
-    $(jQStr).css("width", LeftPx + PUint);  // 白色背景
+    $(jQStr).css("width", LeftPx + PUint).attr("data-ctime", leftVal).attr("data-alltime", allTimes);  // 白色背景
     jQStr = ".RunTime_" + iIndex;
     $(jQStr).text(timeToStrFunc(leftVal));  // 设置文字显示
     jQStr = ".RunAllTime_" + iIndex;
@@ -427,6 +435,53 @@ var timeToStrFunc = function (timerNumber) {
     }
     return ReStr;
 };
+var TouchStartX = 0;
+var TouchMoveX = 0;
+var TouchIndex = -1;  // 位置标识
+var TallTimeNum = 0;  // 总时间
+var LeftTimeNum = 0;  // 总时间
+var PWidthValNum=0;  // 总宽度
+// 滑块滑动控制(按下去)
+function TouchStartFunc(event) {
+    TouchStartX = event.touches[0].pageX;
+    TouchMoveX = TouchStartX;
+    TouchIndex = parseInt($(event.target).attr("class").replace("LDFProcImg LDFProcImg_", ""));
+    var jQStr = ".LDFPWhite_" + TouchIndex;
+    TallTimeNum = parseInt($(jQStr).attr("data-alltime"));
+    LeftTimeNum = parseInt($(".LDFPWhite_" + TouchIndex).attr("data-ctime"));
+    PWidthValNum = parseFloat($(jQStr).parent().css("width"));  // 总宽度
+    mobileTSFunc();
+}
+// 滑块滑动
+function TouchMoveFunc(event) {
+    TouchMoveX = event.touches[0].pageX;
+    TouchMoveY = event.touches[0].pageY;
+    var TLeftTimeNumber = Math.ceil(TallTimeNum * Math.abs(TouchMoveX - TouchStartX) / PWidthValNum);
+    if (TouchStartX > TouchMoveX) {
+        // 左移
+        if ((LeftTimeNum - TLeftTimeNumber) < 0) {
+            TLeftTimeNumber = 0;
+        }
+        else {
+            TLeftTimeNumber = LeftTimeNum - TLeftTimeNumber;
+        }
+        showImageFunc(TouchIndex, TLeftTimeNumber, TallTimeNum);
+    }
+    else {
+        // 右移
+        if ((LeftTimeNum + TLeftTimeNumber) > TallTimeNum) {
+            TLeftTimeNumber = TallTimeNum;
+        }
+        else {
+            TLeftTimeNumber = LeftTimeNum + TLeftTimeNumber;
+        }
+        showImageFunc(TouchIndex, TLeftTimeNumber, TallTimeNum);
+    }
+}
+// 滑块滑动控制(抬起来)
+function TouchEndFunc(event) {
+    mobileTEFunc(TouchIndex);
+}
 //#endregion
 
 // 判断是否在横线内
@@ -489,12 +544,12 @@ var RemoveSESpaceWhite = function (item) {
         return;
     }
     var HtmlStr = $(item).text();
-    var RegStr =new RegExp("^\\s+");
+    var RegStr = new RegExp("^\\s+");
     var MatchArr = HtmlStr.match(RegStr);
-    if(MatchArr!=null&&MatchArr.length>0){
-        HtmlStr= HtmlStr.replace(MatchArr[0],"");
+    if (MatchArr != null && MatchArr.length > 0) {
+        HtmlStr = HtmlStr.replace(MatchArr[0], "");
     }
-    RegStr =new RegExp("\\s+$");
+    RegStr = new RegExp("\\s+$");
     MatchArr = HtmlStr.match(RegStr);
     if (MatchArr != null && MatchArr.length > 0) {
         HtmlStr = HtmlStr.substring(0, HtmlStr.length - MatchArr[0].length);
@@ -2027,7 +2082,7 @@ function getSelectedText(title) {
     JSInterface.callback(txt, title);
 }
 // 控制播放按钮样式,OCStatus(0表示停止，1表示播放)
-function playCssControl(iIndex,OCStatus) {
+function playCssControl(iIndex, OCStatus) {
     var jQStr = ".LDFPlayS_" + iIndex;
     if (OCStatus == "0") {
         $(jQStr).attr("data-playstatus", 0);
@@ -2054,4 +2109,12 @@ function adjustFontSize(FontSize) {
         $(this).css("margin-top", TMarginTop + "px");
         $(this).find("span").css("font-size", TFontSize + "px");
     });
+    $(".LDFTimerS").css("line-height", TFontSize + "px");
+}
+// 音频进度条按下回调
+function mobileTSFunc() {
+    //
+}// 音频进度条松开回调
+function mobileTEFunc(ID) {
+    var CurrentTime = parseInt($(".LDFPWhite_" + ID).attr("data-ctime"));  // 当前滑动的时间进度
 }