From bbaf318a429f624f8fe4569467fdeae0ebd8bcc1 Mon Sep 17 00:00:00 2001
From: lh_wang <lh_wang@Ctrip.com>
Date: Mon, 3 Aug 2015 16:43:51 +0800
Subject: [PATCH] add new fun

---
 lvtu/css/main.css | 23 ++++++++++++
 lvtu/index.html   | 29 ++++++++++-----
 lvtu/js/main.js   | 92 ++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 126 insertions(+), 18 deletions(-)

diff --git a/lvtu/css/main.css b/lvtu/css/main.css
index 6da2bce..25c1a04 100644
--- a/lvtu/css/main.css
+++ b/lvtu/css/main.css
@@ -257,6 +257,29 @@ body{
 	display: none;
 }
 
+/*万能iframe*/
+.iframe_all{
+	position:absolute;
+	min-width:230px;
+	min-height:160px;
+	background-color:#F9F9F9;
+	border:1px solid #ddd;
+	right:-999px;
+	top:-999px;
+}
+
+.iframe_all_arrow{
+	background-color: transparent;
+	position:absolute;
+	right: -15px;
+	top:85px;
+	width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-left: 15px solid #F9F9F9;
+    border-bottom: 7px solid transparent;
+}
+
 
 
 
diff --git a/lvtu/index.html b/lvtu/index.html
index 8539ced..04d1544 100644
--- a/lvtu/index.html
+++ b/lvtu/index.html
@@ -33,9 +33,9 @@
 	</div>
 	<!--搜索列表-->
 	<div class="search_list">
-		<a _index="1">上海－扬州(产品ID:BYUHTRE6 上午8点出发，一日游，第二天回)</a>
-		<a _index="2">上海－常州(产品ID:HGFSGSYT 上午9点出发，一日游，第二天回)</a>
-		<a _index="3">上海－衢州(产品ID:SUYDWDGB 上午6点出发，两日游，第3天回)</a>
+		<a _index="1">上海－扬州(产品ID:BYUHTRE6)</a>
+		<a _index="2">上海－常州(产品ID:HGFSGSYT)</a>
+		<a _index="3">上海－衢州(产品ID:SUYDWDGB)</a>
 	</div>
 	<!--仪表盘-->
     <div class="charts_pannel">
@@ -60,8 +60,12 @@
     		<div id="_alert_close" style="width:60px;height:30px;background-color:#00ABFC;text-align: center;line-height:30px;color:#fff;margin-left:auto;margin-right:auto;margin-top:20px;cursor:pointer;">关闭</div>
     </div>
     <!--时间轴-->
-    <div class="timeline_pannel">
+    <div id="timeline_pc" class="timeline_pannel" style="display:none;">
     		<div class="timeline"></div>
+    </div>
+    <div id="timeline_ipad" class="timeline_pannel" style="min-height:100px;width:360px;display: none;opacity: 0.9;">
+    		<div style="height:40px;width:350px;border:2px solid #CC0000;border-radius:20px;margin-top:30px;opacity:0.9;"></div>
+    		<div id="timeline_item_1"></div>
     </div>
 	<div class="toolbar">
 		<div class="car_run car_run_show">
@@ -74,12 +78,19 @@
 			投
 		</div>
 	</div>
-	<div id="tanmu_div" style="visibility:hidden;border:0;position:absolute;left:-999px;top:-999px;right:0;height:0;bottom:0;z-index:0;box-sizing: border-box;background-color:#F6F6F6;">
-		<iframe  scrolling="no" style="width:100%;height:40px;border:0;opacity:0.5;" src="http://123.57.39.116:9797/"></iframe>
-		<iframe  scrolling="no" style="width:100%;height:152px;border:0;margin-top:-2px;" src="http://123.57.39.116:9797/emit"></iframe>
+	<!--	描述：iframe万能框-->
+	<div id="tanmu_div" class="iframe_all">
+		<div class="iframe_all_arrow"></div>
+		<div class="iframe_all_content">
+			<iframe scrolling="no" style="height:40px;border:0;" class="iframe_all_iframe" src="http://123.57.39.116:9797/"></iframe>
+		</div>
+		<div>
+			<iframe scrolling="no" style="height:152px;border:0;" class="iframe_all_iframe" src="http://123.57.39.116:9797/emit"></iframe>
+		</div>
 	</div>
-	<div id="toupiao_frame" style="display:none;width:350px;height:600px;position:absolute;right:70px;top:70px;background-color:#fff;border:0;">
-		<iframe src="http://123.57.39.116:9797/toupiao/index.html" style="width:100%;height:600px;border:0;"></iframe>
+	<div id="toupiao_frame" style="display:none;width:350px;height:600px;position:absolute;right:80px;top:70px;background-color:#fff;border:1px solid #ddd;padding:2px;">
+		<iframe scrolling="no" src="http://123.57.39.116:9797/toupiao/index.html" style="width:100%;height:600px;border:0;"></iframe>
+		<div class="iframe_all_arrow" style="top:148px;z-index:80;"></div>
 	</div>
 	<!--<script type="text/javascript" src="js/ani.js"></script>-->
 	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
diff --git a/lvtu/js/main.js b/lvtu/js/main.js
index 76a1096..0ed12ae 100644
--- a/lvtu/js/main.js
+++ b/lvtu/js/main.js
@@ -46,6 +46,9 @@
 		if(timelineIn){
 			clearInterval(timelineIn);
 		}
+		if(ipadTimelineIn){
+			clearInterval(ipadTimelineIn);
+		}
 		if(disTime){
 			disTime = [];
 		}
@@ -58,7 +61,9 @@
 		}
 		
 		$('.timeline_pannel').css('visibility', 'visible');
-		doTimeline();
+	
+		uaAdapter();
+		
 		hasRoutes = true;
 		AMap.service(['AMap.Driving'], function(){
 			origin = new AMap.LngLat(routes[0].x, routes[0].y);
@@ -246,15 +251,12 @@
 	var tag = 0;
 	$('.danmu').on('click', function(){
 		if(tag % 2 === 0){
-			$('#tanmu_div').css('height', '194px');
-			$('#tanmu_div').css('left', '0');
-			$('#tanmu_div').css('top', '');
+			$('#tanmu_div').fadeIn();
+			$('#tanmu_div').css('right', '79px');
+			$('#tanmu_div').css('top', '70px');
 			$('#tanmu_div').css('visibility', 'visible');
 		}else{
-			$('#tanmu_div').css('height', '0');
-			$('#tanmu_div').css('left', '-999px');
-			$('#tanmu_div').css('top', '-999px');
-			$('#tanmu_div').css('visibility', 'hidden');
+			$('#tanmu_div').fadeOut();
 		}
 		tag ++;
 	});
@@ -506,12 +508,12 @@
 	//时间轴
 	var timelineIn = null;
 	function doTimeline(){
+		$('#timeline_pc').show();
 		for(var i in routes){
 	    		var item = '<div id=timeline_' + i + ' class="timeline_item">' + routes[i].content + '</div>';
 	    		$('.timeline').append(item);
 	    }
 		
-		
 		timelineIn = setInterval(function(){
 			if(disTime[timelineIndex]){
 				$('#timeline_' + timelineIndex).removeClass('firebug_flash');
@@ -533,4 +535,76 @@
 	});
 	
 	
+	//万能iframe
+	function iframeAll(url, width, height, color, fw, fh){
+		$('.iframe_all').css('width', width + 'px');
+		$('.iframe_all').css('width', height + 'px');
+		$('.iframe_all').css('border', '1px solid ' + color);
+		
+		$('.iframe_all_iframe').attr('src', url);
+		$('.iframe_all_iframe').css('border', 0);
+		$('.iframe_all_iframe').css('width', fw || '100%');
+		$('.iframe_all_iframe').css('height', fh);
+		
+		$('.iframe_all_arrow').css('border', '1px solid ' + color);
+		$('.iframe_all_arrow').css('borderLeft', '0');
+		$('.iframe_all_arrow').css('borderBottom', '0');
+	}
+	
+	//iframeAll('http://123.57.39.116:9797/', 200, 200, '#ddd', '100%', '40px');
+	
+	//iPad、mobile、 pc版本适配
+	function uaAdapter(){
+		var ua = window.navigator.userAgent.toLocaleLowerCase();
+        var bIsIpad = ua.match(/ipad/i) == 'ipad';
+        var bIsIphoneOs = ua.match(/iphone os/i) == "iphone os";
+        var bIsMidp = ua.match(/midp/i) == "midp";
+        var bIsUc7 = ua.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
+        var bIsUc = ua.match(/ucweb/i) == "ucweb";
+        var bIsAndroid = ua.match(/android/i) == "android";
+        var bIsCE = ua.match(/windows ce/i) == "windows ce";
+        var bIsWM = ua.match(/windows mobile/i) == "windows mobile";
+        //iPad优先
+        if(bIsIpad){
+        		iPadRouter(routes);
+        		console.log('pad');
+        		return;
+        }
+    		//mobile
+        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
+        		//道路弯曲，且向右
+        		iPadRouter(routes);
+        		console.log('mobile');
+        } else {//pc
+            //道路不弯曲
+           doTimeline()
+           console.log('pc');
+        }
+	}
+	
+	//iPad适配
+	var ipadTimelineIn = null;
+	function iPadRouter(data){
+		$('#timeline_ipad').show();
+		$('#timeline_ipad').css('opacity', '0.8');
+		$('#timeline_item_1').empty();
+		for(var i in data){
+			var str = '<div style="position:absolute;top:11px;margin-left:' + parseInt(i)*50 + 'px;text-align:center;min-width:40px;">';
+			str += '<div style="font-size:13px;">' + data[i].content + '</div>';
+			str += '<div id="ipad_timeline_' + i;
+			str += '" style="background-color:#fff;margin-top:5px;width:10px;height:10px;border:2px solid #CC0000;border-radius:5px;margin-left:auto;margin-right:auto;box-sizing:border-box;"></div>';
+			str += '</div>';
+			$('#timeline_item_1').append(str);	
+		}
+		
+		ipadTimelineIn = setInterval(function(){
+			if(disTime[timelineIndex]){
+				$('#ipad_timeline_' + timelineIndex).removeClass('firebug_flash');
+				$('#ipad_timeline_' + timelineIndex).css('backgroundColor', '#ACAAA6');
+				$('#ipad_timeline_' + timelineIndex).css('border', '1px solid #ACAAA6');
+				$('#ipad_timeline_' + (timelineIndex + 1)).addClass('firebug_flash').css('backgroundColor', '#DE007D');
+			}
+		}, 1000);
+	}
+	
 })(window, $);