mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-06 06:41:41 +00:00
add lvtu
This commit is contained in:
lh_wang
@@ -77,11 +77,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="tanmu_div" style="visibility:hidden;border:0;position:absolute;left:0;right:0;height:194px;bottom:0;z-index:10000;box-sizing: border-box;background-color:#F6F6F6;">
|
<div id="tanmu_div" style="visibility:hidden;border:0;position:absolute;left:0;right:0;height:194px;bottom:0;z-index:10000;box-sizing: border-box;background-color:#F6F6F6;">
|
||||||
<iframe scrolling="no" style="width:100%;height:40px;border:0;opacity:0.5;" src="http://localhost:3000/"></iframe>
|
<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://localhost:3000/emit"></iframe>
|
<iframe scrolling="no" style="width:100%;height:152px;border:0;margin-top:-2px;" 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;">
|
<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://localhost:3000/toupiao/index.html" style="width:100%;height:600px;border:0;"></iframe>
|
<iframe src="http://123.57.39.116:9797/toupiao/index.html" style="width:100%;height:600px;border:0;"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<!--<script type="text/javascript" src="js/ani.js"></script>-->
|
<!--<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>
|
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
|
||||||
|
|||||||
+15
-14
@@ -27,6 +27,16 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
$('.search_btn').on('click', function(e){
|
$('.search_btn').on('click', function(e){
|
||||||
|
//天气
|
||||||
|
AMap.service(['AMap.Weather'], function(){
|
||||||
|
var we = new AMap.Weather();
|
||||||
|
we.getLive(routes[routes.length - 1].content, function(err, status){
|
||||||
|
console.log(status);
|
||||||
|
$('#tem_yin').text(status.weather);
|
||||||
|
$('#tem_du').text(status.temperature + '℃');
|
||||||
|
$('#tem_feng').text(status.windDirection + '风');
|
||||||
|
});
|
||||||
|
});
|
||||||
map.clearMap();
|
map.clearMap();
|
||||||
map.setZoom(13);
|
map.setZoom(13);
|
||||||
$('.timeline').empty();
|
$('.timeline').empty();
|
||||||
@@ -347,11 +357,11 @@
|
|||||||
contentHTML += '</div><div style="float:right;" class="_in_city_story">';
|
contentHTML += '</div><div style="float:right;" class="_in_city_story">';
|
||||||
contentHTML += '<img src="' + pics[picIndex] + '"/></div></div>';
|
contentHTML += '<img src="' + pics[picIndex] + '"/></div></div>';
|
||||||
contentHTML += '<div class="_in_story">';
|
contentHTML += '<div class="_in_story">';
|
||||||
contentHTML += '<div><a href="' + urls[0] +'">那座城市，那个人， 特价¥899</a></div>';
|
contentHTML += '<div><a target="_blank" href="' + urls[0] +'">那座城市，那个人， 特价¥899</a></div>';
|
||||||
contentHTML += '<div><a href="' + urls[1] +'">再美不如苏州园林， 门票：¥40</a></div>';
|
contentHTML += '<div><a target="_blank" href="' + urls[1] +'">再美不如苏州园林， 门票：¥40</a></div>';
|
||||||
contentHTML += '<div><a href="' + urls[2] +'">苏州好吃一窝，特价团购：¥30</a></div>';
|
contentHTML += '<div><a target="_blank" href="' + urls[2] +'">苏州好吃一窝，特价团购：¥30</a></div>';
|
||||||
contentHTML += '<div><a href="' + urls[3] +'">苏州必须去的5个景点，去了才知道</a></div>';
|
contentHTML += '<div><a target="_blank" href="' + urls[3] +'">苏州必须去的5个景点，去了才知道</a></div>';
|
||||||
contentHTML += '<div><a href="' + urls[4] +'">假日酒店，全家人旅行特选，机场接送</a></div></div>';
|
contentHTML += '<div><a target="_blank" href="' + urls[4] +'">假日酒店，全家人旅行特选，机场接送</a></div></div>';
|
||||||
contentHTML += '<div class="_in_arrow_down"></div></div>';
|
contentHTML += '<div class="_in_arrow_down"></div></div>';
|
||||||
return contentHTML;
|
return contentHTML;
|
||||||
}
|
}
|
||||||
@@ -477,15 +487,6 @@
|
|||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
AMap.service(['AMap.Weather'], function(){
|
|
||||||
var we = new AMap.Weather();
|
|
||||||
we.getLive(routes[routes.length - 1].content, function(err, status){
|
|
||||||
$('#tem_yin').text(status.weather);
|
|
||||||
$('#tem_du').text(status.temperature + '℃');
|
|
||||||
$('#tem_feng').text(status.windDirection + '风');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
//开启、关闭弹幕
|
//开启、关闭弹幕
|
||||||
var tou_tag = 0;
|
var tou_tag = 0;
|
||||||
$('.toupiao').on('click', function(){
|
$('.toupiao').on('click', function(){
|
||||||
|
|||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<projectDescription>
|
||||||
|
<name>lvtu</name>
|
||||||
|
<comment>Create By HBuilder</comment>
|
||||||
|
<projects>
|
||||||
|
</projects>
|
||||||
|
<buildSpec>
|
||||||
|
<buildCommand>
|
||||||
|
<name>com.aptana.ide.core.unifiedBuilder</name>
|
||||||
|
<arguments>
|
||||||
|
</arguments>
|
||||||
|
</buildCommand>
|
||||||
|
</buildSpec>
|
||||||
|
<natures>
|
||||||
|
<nature>com.aptana.projects.webnature</nature>
|
||||||
|
</natures>
|
||||||
|
<filteredResources>
|
||||||
|
<filter>
|
||||||
|
<id>1438149018036</id>
|
||||||
|
<name></name>
|
||||||
|
<type>10</type>
|
||||||
|
<matcher>
|
||||||
|
<id>org.eclipse.ui.ide.orFilterMatcher</id>
|
||||||
|
<arguments>
|
||||||
|
<matcher>
|
||||||
|
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||||
|
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
|
||||||
|
</matcher>
|
||||||
|
<matcher>
|
||||||
|
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||||
|
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
|
||||||
|
</matcher>
|
||||||
|
</arguments>
|
||||||
|
</matcher>
|
||||||
|
</filter>
|
||||||
|
</filteredResources>
|
||||||
|
</projectDescription>
|
||||||
@@ -0,0 +1,266 @@
|
|||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
height:100%;
|
||||||
|
width:100%;
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
#map{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
.header{
|
||||||
|
position: absolute;
|
||||||
|
top:45px;
|
||||||
|
width:100%;
|
||||||
|
height:40px;
|
||||||
|
background-color:#FAFBFB;
|
||||||
|
border:1px solid #ddd;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
width:33%;
|
||||||
|
height:40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_menu{
|
||||||
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
|
right: 0;
|
||||||
|
height:40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header_logo{
|
||||||
|
width:100px;
|
||||||
|
/*border-right: 1px dashed #ddd;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_logo img{
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo{
|
||||||
|
width:60px;
|
||||||
|
margin-top:6px;
|
||||||
|
text-align:center;
|
||||||
|
line-height:12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr{
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.logo_title{
|
||||||
|
font-size:12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo_url{
|
||||||
|
font-size:12px;
|
||||||
|
color:#4E4D4C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active{
|
||||||
|
color: #55A9FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search{
|
||||||
|
width:100%;
|
||||||
|
padding-top:5px;
|
||||||
|
height:45px;
|
||||||
|
position: absolute;
|
||||||
|
top:0px;
|
||||||
|
background-color: #FAFBFB;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search input{
|
||||||
|
height:30px;
|
||||||
|
outline: none;
|
||||||
|
border:1px solid #ddd;
|
||||||
|
padding-left:5px;
|
||||||
|
margin-top:3px;
|
||||||
|
width: 100%;
|
||||||
|
font-size:16px;
|
||||||
|
-webkit-tap-highlight-color: #FFFFFF;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
color: #A9A9A9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_btn{
|
||||||
|
width: 52px;
|
||||||
|
height:35px;
|
||||||
|
margin-top:3px;
|
||||||
|
text-align:center;
|
||||||
|
line-height:35px;
|
||||||
|
color:#fff;
|
||||||
|
background-color:#0091FF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input_div{
|
||||||
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
|
right:60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar{
|
||||||
|
position:absolute;
|
||||||
|
right:10px;
|
||||||
|
width:60px;
|
||||||
|
height:140px;
|
||||||
|
top: 70px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.car_run{
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background-color:#0091FF;
|
||||||
|
color:#FFF;
|
||||||
|
text-align:center;
|
||||||
|
line-height:50px;
|
||||||
|
border-radius:25px;
|
||||||
|
margin-top:10px;
|
||||||
|
margin-left:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes flash {
|
||||||
|
0% { opacity:0; }
|
||||||
|
50% { opacity:1; }
|
||||||
|
100% { opacity:0; }
|
||||||
|
}
|
||||||
|
.firebug_flash{
|
||||||
|
-webkit-animation-name: flash;
|
||||||
|
-webkit-animation-iteration-count:infinite;
|
||||||
|
-webkit-animation-duration:1s;
|
||||||
|
background-color:#F7001D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts_pannel{
|
||||||
|
position:absolute;
|
||||||
|
background-color:#fff;
|
||||||
|
left:10px;
|
||||||
|
top:70px;
|
||||||
|
opacity: 0.9;
|
||||||
|
height:290px;
|
||||||
|
width:190px;
|
||||||
|
border:1px solid #ddd;
|
||||||
|
}
|
||||||
|
.charts_div{
|
||||||
|
width:190px;
|
||||||
|
height:190px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts_info{
|
||||||
|
color:#000;
|
||||||
|
margin-top:-22px;
|
||||||
|
margin-left:5px;
|
||||||
|
font-size:13px;
|
||||||
|
line-height:17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.charts_info span{
|
||||||
|
color: #0091FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline_pannel{
|
||||||
|
position:absolute;
|
||||||
|
top:70px;
|
||||||
|
left:230px;
|
||||||
|
right:80px;
|
||||||
|
height:50px;
|
||||||
|
background-color:#FFF;
|
||||||
|
padding: 3px;
|
||||||
|
border:1px solid #ddd;
|
||||||
|
opacity: 0.8;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline{
|
||||||
|
width:100%;
|
||||||
|
height:3px;
|
||||||
|
margin-top:22px;
|
||||||
|
background-color:#E82D00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline_item{
|
||||||
|
font-size:13px;
|
||||||
|
float:left;
|
||||||
|
margin-top:-15px;
|
||||||
|
margin-left:15px;
|
||||||
|
width:50px;
|
||||||
|
height:30px;
|
||||||
|
text-align:center;
|
||||||
|
line-height:30px;
|
||||||
|
color:#fff;
|
||||||
|
background-color:#0091FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tempe{
|
||||||
|
margin-top:5px;
|
||||||
|
width:30%;
|
||||||
|
height:30px;
|
||||||
|
line-height:30px;
|
||||||
|
text-align:center;
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_list{
|
||||||
|
position:absolute;
|
||||||
|
top:41px;
|
||||||
|
left:100px;
|
||||||
|
right:52px;
|
||||||
|
height:130px;
|
||||||
|
border:1px solid #ddd;
|
||||||
|
background-color: #FFF;
|
||||||
|
z-index:10050;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_list>a:nth-child(1){
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
.search_list>a{
|
||||||
|
display: block;
|
||||||
|
color:#9E9E9E;
|
||||||
|
font-size:16px;
|
||||||
|
height:24px;
|
||||||
|
line-height:24px;
|
||||||
|
padding-left:5px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_list>a:hover{
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.add_mask{
|
||||||
|
position:absolute;
|
||||||
|
left:0;right:0;top:0;bottom:0;
|
||||||
|
background-color:#4E4D4C;
|
||||||
|
opacity: 0.5;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="format-detection" content="telephone=no" searchtype="map">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,minimal-ui">
|
||||||
|
<meta name="misapplication-tap-highlight" content="no"/>
|
||||||
|
<title>美途</title>
|
||||||
|
<link type="text/css" rel="stylesheet" href="css/main.css"/>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map" ></div>
|
||||||
|
<div class="search">
|
||||||
|
<div class="header_logo fl">
|
||||||
|
<div class="fl">
|
||||||
|
<img src="img/logo.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="fl logo">
|
||||||
|
<span class="logo_title">美丽旅途</span>
|
||||||
|
<span class="logo_url">ctrip.com</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fl input_div">
|
||||||
|
<input id="search_router" placeholder="请输入旅游线路"/>
|
||||||
|
</div>
|
||||||
|
<div class="fr search_btn">
|
||||||
|
<span>搜索</span>
|
||||||
|
</div>
|
||||||
|
</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="2">北京－天津(产品ID:OIUSYTSG 上午5:30点出发，两日游，第二天回)</a>
|
||||||
|
<a _index="3">石家庄－青岛(产品ID:NJYGSGSS 上午8点出发，三日游，第二天回)</a>
|
||||||
|
</div>
|
||||||
|
<!--仪表盘-->
|
||||||
|
<div class="charts_pannel">
|
||||||
|
<div id="charts" class="charts_div"></div>
|
||||||
|
<div class="charts_info">
|
||||||
|
<div>实时车速：<span id="real_speed">准备计算</span></div>
|
||||||
|
<div>模拟车速：<span>50,000 km/h</span></div>
|
||||||
|
<div>到达时间：<span id="real_time">预测计算到达时间</span></div>
|
||||||
|
<div>距离：<span id="real_distance">预测目的地距离</span></div>
|
||||||
|
<div>时长：<span id="real_distime">预测到达所花时长</span></div>
|
||||||
|
</div>
|
||||||
|
<div style="width:100%;">
|
||||||
|
<div id="tem_yin" class="fl tempe" style="color:#FF5718;">阴</div>
|
||||||
|
<div id="tem_du" class="fl tempe" style="color: #4C4C4C;">23</div>
|
||||||
|
<div id="tem_feng" class="fl tempe" style="color: #4C4C4C;">西南风</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--ALert-->
|
||||||
|
<div class="add_mask"></div>
|
||||||
|
<div id="_alert" style="display:none;border:1px solid #ddd;width:260px;height:100px;background-color:#FFF;position:absolute;top:50%;margin-left:-50px;left:50%;margin-left:-100px;">
|
||||||
|
<div style="width:180px; text-align:center;margin-left:auto;margin-right:auto;margin-top:20px;">请先搜索后再进行查看</div>
|
||||||
|
<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 class="timeline"></div>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="car_run car_run_show">
|
||||||
|
行
|
||||||
|
</div>
|
||||||
|
<div class="car_run danmu" style="background-color:#E82D00;">
|
||||||
|
弹
|
||||||
|
</div>
|
||||||
|
<div class="car_run toupiao" style="background-color:#00C348;">
|
||||||
|
投
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tanmu_div" style="visibility:hidden;border:0;position:absolute;left:0;right:0;height:194px;bottom:0;z-index:10000;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>
|
||||||
|
</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>
|
||||||
|
<!--<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>
|
||||||
|
<script type="text/javascript" src="js/zepto.js"></script>
|
||||||
|
<script type="text/javascript" src="js/fx.js"></script>
|
||||||
|
<script type="text/javascript" src="js/fx_methods.js"></script>
|
||||||
|
<script type="text/javascript" src="js/echarts-all.js"></script>
|
||||||
|
<script type="text/javascript" src="js/data.js"></script>
|
||||||
|
<script type="text/javascript" src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+628
@@ -0,0 +1,628 @@
|
|||||||
|
;(function(){
|
||||||
|
//① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
|
||||||
|
var S = {
|
||||||
|
init: function () {
|
||||||
|
var _body = document.createElement("div");
|
||||||
|
_body.setAttribute("id","_body")
|
||||||
|
_body.style.zIndex=9999;
|
||||||
|
_body.style.background="#80d0cd";
|
||||||
|
_body.style.position="absolute";
|
||||||
|
_body.style.top="0px";
|
||||||
|
_body.style.right="0px";
|
||||||
|
_body.style.left="0px";
|
||||||
|
_body.style.bottom="0px";
|
||||||
|
_body.style.margin="0px";
|
||||||
|
_body.style.padding="0px";
|
||||||
|
_body.innerHTML ='<canvas class="canvas"></canvas>'
|
||||||
|
document.body.appendChild(_body);
|
||||||
|
setTimeout(function(){
|
||||||
|
var msg = '|美|丽|旅|途|'
|
||||||
|
S.Drawing.init('.canvas');
|
||||||
|
//document.body.classList.add('body--ready');
|
||||||
|
S.UI.simulate(msg);
|
||||||
|
S.Drawing.loop(function () {
|
||||||
|
S.Shape.render();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
S.Drawing = (function () {
|
||||||
|
var canvas,
|
||||||
|
context,
|
||||||
|
renderFn
|
||||||
|
requestFrame = window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
window.oRequestAnimationFrame ||
|
||||||
|
window.msRequestAnimationFrame ||
|
||||||
|
function(callback) {
|
||||||
|
window.setTimeout(callback, 1000 / 60);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
init: function (el) {
|
||||||
|
canvas = document.querySelector('.canvas'),
|
||||||
|
context = canvas.getContext('2d');
|
||||||
|
this.adjustCanvas();
|
||||||
|
|
||||||
|
window.addEventListener('resize', function (e) {
|
||||||
|
S.Drawing.adjustCanvas();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
loop: function (fn) {
|
||||||
|
renderFn = !renderFn ? fn : renderFn;
|
||||||
|
this.clearFrame();
|
||||||
|
renderFn();
|
||||||
|
requestFrame.call(window, this.loop.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
adjustCanvas: function () {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
clearFrame: function () {
|
||||||
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
},
|
||||||
|
|
||||||
|
getArea: function () {
|
||||||
|
return { w: canvas.width, h: canvas.height };
|
||||||
|
},
|
||||||
|
|
||||||
|
drawCircle: function (p, c) {
|
||||||
|
context.fillStyle = c.render();
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
|
||||||
|
context.closePath();
|
||||||
|
context.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
S.UI = (function () {
|
||||||
|
var canvas = document.querySelector('.canvas'),
|
||||||
|
interval,
|
||||||
|
isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
|
||||||
|
currentAction,
|
||||||
|
resizeTimer,
|
||||||
|
time,
|
||||||
|
maxShapeSize = 30,
|
||||||
|
firstAction = true,
|
||||||
|
sequence = [],
|
||||||
|
cmd = '#';
|
||||||
|
|
||||||
|
function formatTime(date) {
|
||||||
|
var h = date.getHours(),
|
||||||
|
m = date.getMinutes(),
|
||||||
|
m = m < 10 ? '0' + m : m;
|
||||||
|
return h + ':' + m;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getValue(value) {
|
||||||
|
return value && value.split(' ')[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAction(value) {
|
||||||
|
value = value && value.split(' ')[0];
|
||||||
|
return value && value[0] === cmd && value.substring(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function timedAction(fn, delay, max, reverse) {
|
||||||
|
clearInterval(interval);
|
||||||
|
currentAction = reverse ? max : 1;
|
||||||
|
fn(currentAction);
|
||||||
|
|
||||||
|
if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
|
||||||
|
interval = setInterval(function () {
|
||||||
|
currentAction = reverse ? currentAction - 1 : currentAction + 1;
|
||||||
|
fn(currentAction);
|
||||||
|
|
||||||
|
if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
|
||||||
|
clearInterval(interval);
|
||||||
|
document.querySelector('#_body').style.display="none";
|
||||||
|
}
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset(destroy) {
|
||||||
|
clearInterval(interval);
|
||||||
|
sequence = [];
|
||||||
|
time = null;
|
||||||
|
destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));
|
||||||
|
}
|
||||||
|
|
||||||
|
function performAction(value) {
|
||||||
|
var action,
|
||||||
|
value,
|
||||||
|
current;
|
||||||
|
sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
|
||||||
|
timedAction(function (index) {
|
||||||
|
current = sequence.shift();
|
||||||
|
action = getAction(current);
|
||||||
|
value = getValue(current);
|
||||||
|
|
||||||
|
switch (action) {
|
||||||
|
case 'countdown':
|
||||||
|
value = parseInt(value) || 10;
|
||||||
|
value = value > 0 ? value : 10;
|
||||||
|
|
||||||
|
timedAction(function (index) {
|
||||||
|
if (index === 0) {
|
||||||
|
if (sequence.length === 0) {
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.letter(''));
|
||||||
|
} else {
|
||||||
|
performAction(sequence);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
|
||||||
|
}
|
||||||
|
}, 1000, value, true);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'rectangle':
|
||||||
|
value = value && value.split('x');
|
||||||
|
value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
|
||||||
|
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'circle':
|
||||||
|
value = parseInt(value) || maxShapeSize;
|
||||||
|
value = Math.min(value, maxShapeSize);
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.circle(value));
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'time':
|
||||||
|
var t = formatTime(new Date());
|
||||||
|
|
||||||
|
if (sequence.length > 0) {
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.letter(t));
|
||||||
|
} else {
|
||||||
|
timedAction(function () {
|
||||||
|
t = formatTime(new Date());
|
||||||
|
if (t !== time) {
|
||||||
|
time = t;
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.letter(time));
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
|
||||||
|
}
|
||||||
|
}, 1500, sequence.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
simulate: function (action) {
|
||||||
|
performAction(action);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
S.UI.Tabs = (function () {
|
||||||
|
var tabs = document.querySelector('.tabs'),
|
||||||
|
labels = document.querySelector('.tabs-labels'),
|
||||||
|
triggers = document.querySelectorAll('.tabs-label'),
|
||||||
|
panels = document.querySelectorAll('.tabs-panel');
|
||||||
|
|
||||||
|
function activate(i) {
|
||||||
|
triggers[i].classList.add('tabs-label--active');
|
||||||
|
panels[i].classList.add('tabs-panel--active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents() {
|
||||||
|
labels.addEventListener('click', function (e) {
|
||||||
|
var el = e.target,
|
||||||
|
index;
|
||||||
|
|
||||||
|
if (el.classList.contains('tabs-label')) {
|
||||||
|
for (var t = 0; t < triggers.length; t++) {
|
||||||
|
triggers[t].classList.remove('tabs-label--active');
|
||||||
|
panels[t].classList.remove('tabs-panel--active');
|
||||||
|
|
||||||
|
if (el === triggers[t]) {
|
||||||
|
index = t;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
activate(index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
activate(0);
|
||||||
|
bindEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init
|
||||||
|
//init();
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
S.Point = function (args) {
|
||||||
|
this.x = args.x;
|
||||||
|
this.y = args.y;
|
||||||
|
this.z = args.z;
|
||||||
|
this.a = args.a;
|
||||||
|
this.h = args.h;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
S.Color = function (r, g, b, a) {
|
||||||
|
this.r = r;
|
||||||
|
this.g = g;
|
||||||
|
this.b = b;
|
||||||
|
this.a = a;
|
||||||
|
};
|
||||||
|
|
||||||
|
S.Color.prototype = {
|
||||||
|
render: function () {
|
||||||
|
return 'rgba(' + this.r + ',' + + this.g + ',' + this.b + ',' + this.a + ')';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
S.Dot = function (x, y) {
|
||||||
|
this.p = new S.Point({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
z: 5,
|
||||||
|
a: 1,
|
||||||
|
h: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
this.e = 0.07;
|
||||||
|
this.s = true;
|
||||||
|
|
||||||
|
this.c = new S.Color(255, 255, 255, this.p.a);
|
||||||
|
|
||||||
|
this.t = this.clone();
|
||||||
|
this.q = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
S.Dot.prototype = {
|
||||||
|
clone: function () {
|
||||||
|
return new S.Point({
|
||||||
|
x: this.x,
|
||||||
|
y: this.y,
|
||||||
|
z: this.z,
|
||||||
|
a: this.a,
|
||||||
|
h: this.h
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_draw: function () {
|
||||||
|
this.c.a = this.p.a;
|
||||||
|
S.Drawing.drawCircle(this.p, this.c);
|
||||||
|
},
|
||||||
|
|
||||||
|
_moveTowards: function (n) {
|
||||||
|
var details = this.distanceTo(n, true),
|
||||||
|
dx = details[0],
|
||||||
|
dy = details[1],
|
||||||
|
d = details[2],
|
||||||
|
e = this.e * d;
|
||||||
|
|
||||||
|
if (this.p.h === -1) {
|
||||||
|
this.p.x = n.x;
|
||||||
|
this.p.y = n.y;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d > 1) {
|
||||||
|
this.p.x -= ((dx / d) * e);
|
||||||
|
this.p.y -= ((dy / d) * e);
|
||||||
|
} else {
|
||||||
|
if (this.p.h > 0) {
|
||||||
|
this.p.h--;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_update: function () {
|
||||||
|
if (this._moveTowards(this.t)) {
|
||||||
|
var p = this.q.shift();
|
||||||
|
|
||||||
|
if (p) {
|
||||||
|
this.t.x = p.x || this.p.x;
|
||||||
|
this.t.y = p.y || this.p.y;
|
||||||
|
this.t.z = p.z || this.p.z;
|
||||||
|
this.t.a = p.a || this.p.a;
|
||||||
|
this.p.h = p.h || 0;
|
||||||
|
} else {
|
||||||
|
if (this.s) {
|
||||||
|
this.p.x -= Math.sin(Math.random() * 3.142);
|
||||||
|
this.p.y -= Math.sin(Math.random() * 3.142);
|
||||||
|
} else {
|
||||||
|
this.move(new S.Point({
|
||||||
|
x: this.p.x + (Math.random() * 50) - 25,
|
||||||
|
y: this.p.y + (Math.random() * 50) - 25,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
d = this.p.a - this.t.a;
|
||||||
|
this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
|
||||||
|
d = this.p.z - this.t.z;
|
||||||
|
this.p.z = Math.max(1, this.p.z - (d * 0.05));
|
||||||
|
},
|
||||||
|
|
||||||
|
distanceTo: function (n, details) {
|
||||||
|
var dx = this.p.x - n.x,
|
||||||
|
dy = this.p.y - n.y,
|
||||||
|
d = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
return details ? [dx, dy, d] : d;
|
||||||
|
},
|
||||||
|
|
||||||
|
move: function (p, avoidStatic) {
|
||||||
|
if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
|
||||||
|
this.q.push(p);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function () {
|
||||||
|
this._update();
|
||||||
|
this._draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
S.ShapeBuilder = (function () {
|
||||||
|
var gap = 13,
|
||||||
|
shapeCanvas = document.createElement('canvas'),
|
||||||
|
shapeContext = shapeCanvas.getContext('2d'),
|
||||||
|
fontSize = 500,
|
||||||
|
fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
|
||||||
|
shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
|
||||||
|
shapeContext.fillStyle = 'red';
|
||||||
|
shapeContext.textBaseline = 'middle';
|
||||||
|
shapeContext.textAlign = 'center';
|
||||||
|
}
|
||||||
|
|
||||||
|
function processCanvas() {
|
||||||
|
var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
|
||||||
|
dots = [],
|
||||||
|
pixels,
|
||||||
|
x = 0,
|
||||||
|
y = 0,
|
||||||
|
fx = shapeCanvas.width,
|
||||||
|
fy = shapeCanvas.height,
|
||||||
|
w = 0,
|
||||||
|
h = 0;
|
||||||
|
|
||||||
|
for (var p = 0; p < pixels.length; p += (4 * gap)) {
|
||||||
|
if (pixels[p + 3] > 0) {
|
||||||
|
dots.push(new S.Point({
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
}));
|
||||||
|
|
||||||
|
w = x > w ? x : w;
|
||||||
|
h = y > h ? y : h;
|
||||||
|
fx = x < fx ? x : fx;
|
||||||
|
fy = y < fy ? y : fy;
|
||||||
|
}
|
||||||
|
|
||||||
|
x += gap;
|
||||||
|
|
||||||
|
if (x >= shapeCanvas.width) {
|
||||||
|
x = 0;
|
||||||
|
y += gap;
|
||||||
|
p += gap * 4 * shapeCanvas.width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { dots: dots, w: w + fx, h: h + fy };
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFontSize(s) {
|
||||||
|
shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isNumber(n) {
|
||||||
|
return !isNaN(parseFloat(n)) && isFinite(n);
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
fit();
|
||||||
|
window.addEventListener('resize', fit);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init
|
||||||
|
init();
|
||||||
|
|
||||||
|
return {
|
||||||
|
imageFile: function (url, callback) {
|
||||||
|
var image = new Image(),
|
||||||
|
a = S.Drawing.getArea();
|
||||||
|
|
||||||
|
image.onload = function () {
|
||||||
|
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
|
||||||
|
shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
|
||||||
|
callback(processCanvas());
|
||||||
|
};
|
||||||
|
|
||||||
|
image.onerror = function () {
|
||||||
|
callback(S.ShapeBuilder.letter('What?'));
|
||||||
|
}
|
||||||
|
|
||||||
|
image.src = url;
|
||||||
|
},
|
||||||
|
|
||||||
|
circle: function (d) {
|
||||||
|
var r = Math.max(0, d) / 2;
|
||||||
|
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
|
||||||
|
shapeContext.beginPath();
|
||||||
|
shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
|
||||||
|
shapeContext.fill();
|
||||||
|
shapeContext.closePath();
|
||||||
|
|
||||||
|
return processCanvas();
|
||||||
|
},
|
||||||
|
|
||||||
|
letter: function (l) {
|
||||||
|
var s = 0;
|
||||||
|
|
||||||
|
setFontSize(fontSize);
|
||||||
|
s = Math.min(fontSize,
|
||||||
|
(shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
|
||||||
|
(shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
|
||||||
|
setFontSize(s);
|
||||||
|
|
||||||
|
shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
|
||||||
|
shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
|
||||||
|
|
||||||
|
return processCanvas();
|
||||||
|
},
|
||||||
|
|
||||||
|
rectangle: function (w, h) {
|
||||||
|
var dots = [],
|
||||||
|
width = gap * w,
|
||||||
|
height = gap * h;
|
||||||
|
|
||||||
|
for (var y = 0; y < height; y += gap) {
|
||||||
|
for (var x = 0; x < width; x += gap) {
|
||||||
|
dots.push(new S.Point({
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { dots: dots, w: width, h: height };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
S.Shape = (function () {
|
||||||
|
var dots = [],
|
||||||
|
width = 0,
|
||||||
|
height = 0,
|
||||||
|
cx = 0,
|
||||||
|
cy = 0;
|
||||||
|
|
||||||
|
function compensate() {
|
||||||
|
var a = S.Drawing.getArea();
|
||||||
|
|
||||||
|
cx = a.w / 2 - width / 2;
|
||||||
|
cy = a.h / 2 - height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
shuffleIdle: function () {
|
||||||
|
var a = S.Drawing.getArea();
|
||||||
|
|
||||||
|
for (var d = 0; d < dots.length; d++) {
|
||||||
|
if (!dots[d].s) {
|
||||||
|
dots[d].move({
|
||||||
|
x: Math.random() * a.w,
|
||||||
|
y: Math.random() * a.h
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
switchShape: function (n, fast) {
|
||||||
|
var size,
|
||||||
|
a = S.Drawing.getArea();
|
||||||
|
|
||||||
|
width = n.w;
|
||||||
|
height = n.h;
|
||||||
|
|
||||||
|
compensate();
|
||||||
|
|
||||||
|
if (n.dots.length > dots.length) {
|
||||||
|
size = n.dots.length - dots.length;
|
||||||
|
for (var d = 1; d <= size; d++) {
|
||||||
|
dots.push(new S.Dot(a.w / 2, a.h / 2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var d = 0,
|
||||||
|
i = 0;
|
||||||
|
|
||||||
|
while (n.dots.length > 0) {
|
||||||
|
i = Math.floor(Math.random() * n.dots.length);
|
||||||
|
dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
|
||||||
|
|
||||||
|
if (dots[d].s) {
|
||||||
|
dots[d].move(new S.Point({
|
||||||
|
z: Math.random() * 20 + 10,
|
||||||
|
a: Math.random(),
|
||||||
|
h: 18
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
dots[d].move(new S.Point({
|
||||||
|
z: Math.random() * 5 + 5,
|
||||||
|
h: fast ? 18 : 30
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
dots[d].s = true;
|
||||||
|
dots[d].move(new S.Point({
|
||||||
|
x: n.dots[i].x + cx,
|
||||||
|
y: n.dots[i].y + cy,
|
||||||
|
a: 1,
|
||||||
|
z: 5,
|
||||||
|
h: 0
|
||||||
|
}));
|
||||||
|
|
||||||
|
n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
|
||||||
|
d++;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = d; i < dots.length; i++) {
|
||||||
|
if (dots[i].s) {
|
||||||
|
dots[i].move(new S.Point({
|
||||||
|
z: Math.random() * 20 + 10,
|
||||||
|
a: Math.random(),
|
||||||
|
h: 20
|
||||||
|
}));
|
||||||
|
|
||||||
|
dots[i].s = false;
|
||||||
|
dots[i].e = 0.04;
|
||||||
|
dots[i].move(new S.Point({
|
||||||
|
x: Math.random() * a.w,
|
||||||
|
y: Math.random() * a.h,
|
||||||
|
a: 0.3, //.4
|
||||||
|
z: Math.random() * 4,
|
||||||
|
h: 0
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function () {
|
||||||
|
for (var d = 0; d < dots.length; d++) {
|
||||||
|
dots[d].render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
S.init();
|
||||||
|
|
||||||
|
})();
|
||||||
+111
@@ -0,0 +1,111 @@
|
|||||||
|
;(function(window, $){
|
||||||
|
|
||||||
|
window.routes1 = [
|
||||||
|
{
|
||||||
|
x: 121.456604,
|
||||||
|
y: 31.23394,
|
||||||
|
content: '上海',
|
||||||
|
startTime: '8:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 121.14212,
|
||||||
|
y: 31.264466,
|
||||||
|
content: '苏州'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.632629,
|
||||||
|
y: 31.28794,
|
||||||
|
content: '无锡'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.2742,
|
||||||
|
y: 31.582045,
|
||||||
|
content: '常州'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 119.943237,
|
||||||
|
y: 31.771375,
|
||||||
|
content: '丹阳'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 119.409027,
|
||||||
|
y: 32.196533,
|
||||||
|
content: '镇江'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 119.393921,
|
||||||
|
y: 32.41011,
|
||||||
|
content: '扬州'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
window.routes2 = [
|
||||||
|
{
|
||||||
|
x: 121.406822,
|
||||||
|
y: 31.28794,
|
||||||
|
content: '上海',
|
||||||
|
startTime: '9:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.651855,
|
||||||
|
y: 31.333698,
|
||||||
|
content: '苏州'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.344238,
|
||||||
|
y: 31.619474,
|
||||||
|
content: '无锡'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 119.932251,
|
||||||
|
y: 31.858897,
|
||||||
|
content: '常州'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
window.routes3 = [
|
||||||
|
{
|
||||||
|
x: 121.433945,
|
||||||
|
y: 31.16816,
|
||||||
|
content: '上海',
|
||||||
|
startTime: '6:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.772705,
|
||||||
|
y: 30.674534,
|
||||||
|
content: '嘉兴'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 120.260468,
|
||||||
|
y: 30.353916,
|
||||||
|
content: '杭州'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 119.687805,
|
||||||
|
y: 29.150962,
|
||||||
|
content: '金华'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 118.834991,
|
||||||
|
y: 28.984718,
|
||||||
|
content: '衢州'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
window.urls = [
|
||||||
|
'http://m.ctrip.com/webapp/you/appshare/bargain/18484.html?from=http%3A%2F%2Fm.ctrip.com%2Fwebapp%2Fyou%2Fplace%2F12.html',
|
||||||
|
'http://m.ctrip.com/webapp/you/sight/zhenjiang13.html?from=http%3A%2F%2Fm.ctrip.com%2Fwebapp%2Fyou%2Fplace%2F13.html',
|
||||||
|
'http://m.ctrip.com/webapp/hotel/hoteldetail/485097.html?days=1&atime=20150801&contrl=2&num=1&biz=1',
|
||||||
|
'http://m.ctrip.com/webapp/hotel/hoteldetail/436337.html?days=1&atime=20150801&contrl=2&num=1&biz=1',
|
||||||
|
'http://m.douban.com/note/510096555/?refer=home',
|
||||||
|
];
|
||||||
|
|
||||||
|
window.pics = [
|
||||||
|
'img/city.jpg',
|
||||||
|
'img/2.jpg',
|
||||||
|
'img/3.jpeg',
|
||||||
|
'img/4.jpg',
|
||||||
|
'img/5.jpeg'
|
||||||
|
];
|
||||||
|
|
||||||
|
})(window, $);
|
||||||
File diff suppressed because one or more lines are too long
+123
@@ -0,0 +1,123 @@
|
|||||||
|
// Zepto.js
|
||||||
|
// (c) 2010-2015 Thomas Fuchs
|
||||||
|
// Zepto.js may be freely distributed under the MIT license.
|
||||||
|
|
||||||
|
;(function($, undefined){
|
||||||
|
var prefix = '', eventPrefix,
|
||||||
|
vendors = { Webkit: 'webkit', Moz: '', O: 'o' },
|
||||||
|
testEl = document.createElement('div'),
|
||||||
|
supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
|
||||||
|
transform,
|
||||||
|
transitionProperty, transitionDuration, transitionTiming, transitionDelay,
|
||||||
|
animationName, animationDuration, animationTiming, animationDelay,
|
||||||
|
cssReset = {}
|
||||||
|
|
||||||
|
function dasherize(str) { return str.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase() }
|
||||||
|
function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() }
|
||||||
|
|
||||||
|
$.each(vendors, function(vendor, event){
|
||||||
|
if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
|
||||||
|
prefix = '-' + vendor.toLowerCase() + '-'
|
||||||
|
eventPrefix = event
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
transform = prefix + 'transform'
|
||||||
|
cssReset[transitionProperty = prefix + 'transition-property'] =
|
||||||
|
cssReset[transitionDuration = prefix + 'transition-duration'] =
|
||||||
|
cssReset[transitionDelay = prefix + 'transition-delay'] =
|
||||||
|
cssReset[transitionTiming = prefix + 'transition-timing-function'] =
|
||||||
|
cssReset[animationName = prefix + 'animation-name'] =
|
||||||
|
cssReset[animationDuration = prefix + 'animation-duration'] =
|
||||||
|
cssReset[animationDelay = prefix + 'animation-delay'] =
|
||||||
|
cssReset[animationTiming = prefix + 'animation-timing-function'] = ''
|
||||||
|
|
||||||
|
$.fx = {
|
||||||
|
off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
|
||||||
|
speeds: { _default: 400, fast: 200, slow: 600 },
|
||||||
|
cssPrefix: prefix,
|
||||||
|
transitionEnd: normalizeEvent('TransitionEnd'),
|
||||||
|
animationEnd: normalizeEvent('AnimationEnd')
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.animate = function(properties, duration, ease, callback, delay){
|
||||||
|
if ($.isFunction(duration))
|
||||||
|
callback = duration, ease = undefined, duration = undefined
|
||||||
|
if ($.isFunction(ease))
|
||||||
|
callback = ease, ease = undefined
|
||||||
|
if ($.isPlainObject(duration))
|
||||||
|
ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration
|
||||||
|
if (duration) duration = (typeof duration == 'number' ? duration :
|
||||||
|
($.fx.speeds[duration] || $.fx.speeds._default)) / 1000
|
||||||
|
if (delay) delay = parseFloat(delay) / 1000
|
||||||
|
return this.anim(properties, duration, ease, callback, delay)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.anim = function(properties, duration, ease, callback, delay){
|
||||||
|
var key, cssValues = {}, cssProperties, transforms = '',
|
||||||
|
that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
|
||||||
|
fired = false
|
||||||
|
|
||||||
|
if (duration === undefined) duration = $.fx.speeds._default / 1000
|
||||||
|
if (delay === undefined) delay = 0
|
||||||
|
if ($.fx.off) duration = 0
|
||||||
|
|
||||||
|
if (typeof properties == 'string') {
|
||||||
|
// keyframe animation
|
||||||
|
cssValues[animationName] = properties
|
||||||
|
cssValues[animationDuration] = duration + 's'
|
||||||
|
cssValues[animationDelay] = delay + 's'
|
||||||
|
cssValues[animationTiming] = (ease || 'linear')
|
||||||
|
endEvent = $.fx.animationEnd
|
||||||
|
} else {
|
||||||
|
cssProperties = []
|
||||||
|
// CSS transitions
|
||||||
|
for (key in properties)
|
||||||
|
if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
|
||||||
|
else cssValues[key] = properties[key], cssProperties.push(dasherize(key))
|
||||||
|
|
||||||
|
if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)
|
||||||
|
if (duration > 0 && typeof properties === 'object') {
|
||||||
|
cssValues[transitionProperty] = cssProperties.join(', ')
|
||||||
|
cssValues[transitionDuration] = duration + 's'
|
||||||
|
cssValues[transitionDelay] = delay + 's'
|
||||||
|
cssValues[transitionTiming] = (ease || 'linear')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
wrappedCallback = function(event){
|
||||||
|
if (typeof event !== 'undefined') {
|
||||||
|
if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
|
||||||
|
$(event.target).unbind(endEvent, wrappedCallback)
|
||||||
|
} else
|
||||||
|
$(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout
|
||||||
|
|
||||||
|
fired = true
|
||||||
|
$(this).css(cssReset)
|
||||||
|
callback && callback.call(this)
|
||||||
|
}
|
||||||
|
if (duration > 0){
|
||||||
|
this.bind(endEvent, wrappedCallback)
|
||||||
|
// transitionEnd is not always firing on older Android phones
|
||||||
|
// so make sure it gets fired
|
||||||
|
setTimeout(function(){
|
||||||
|
if (fired) return
|
||||||
|
wrappedCallback.call(that)
|
||||||
|
}, ((duration + delay) * 1000) + 25)
|
||||||
|
}
|
||||||
|
|
||||||
|
// trigger page reflow so new elements can animate
|
||||||
|
this.size() && this.get(0).clientLeft
|
||||||
|
|
||||||
|
this.css(cssValues)
|
||||||
|
|
||||||
|
if (duration <= 0) setTimeout(function() {
|
||||||
|
that.each(function(){ wrappedCallback.call(this) })
|
||||||
|
}, 0)
|
||||||
|
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
testEl = null
|
||||||
|
})(Zepto)
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
// Zepto.js
|
||||||
|
// (c) 2010-2015 Thomas Fuchs
|
||||||
|
// Zepto.js may be freely distributed under the MIT license.
|
||||||
|
|
||||||
|
;(function($, undefined){
|
||||||
|
var document = window.document, docElem = document.documentElement,
|
||||||
|
origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
|
||||||
|
|
||||||
|
function anim(el, speed, opacity, scale, callback) {
|
||||||
|
if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
|
||||||
|
var props = { opacity: opacity }
|
||||||
|
if (scale) {
|
||||||
|
props.scale = scale
|
||||||
|
el.css($.fx.cssPrefix + 'transform-origin', '0 0')
|
||||||
|
}
|
||||||
|
return el.animate(props, speed, null, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
function hide(el, speed, scale, callback) {
|
||||||
|
return anim(el, speed, 0, scale, function(){
|
||||||
|
origHide.call($(this))
|
||||||
|
callback && callback.call(this)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.show = function(speed, callback) {
|
||||||
|
origShow.call(this)
|
||||||
|
if (speed === undefined) speed = 0
|
||||||
|
else this.css('opacity', 0)
|
||||||
|
return anim(this, speed, 1, '1,1', callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.hide = function(speed, callback) {
|
||||||
|
if (speed === undefined) return origHide.call(this)
|
||||||
|
else return hide(this, speed, '0,0', callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.toggle = function(speed, callback) {
|
||||||
|
if (speed === undefined || typeof speed == 'boolean')
|
||||||
|
return origToggle.call(this, speed)
|
||||||
|
else return this.each(function(){
|
||||||
|
var el = $(this)
|
||||||
|
el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.fadeTo = function(speed, opacity, callback) {
|
||||||
|
return anim(this, speed, opacity, null, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.fadeIn = function(speed, callback) {
|
||||||
|
var target = this.css('opacity')
|
||||||
|
if (target > 0) this.css('opacity', 0)
|
||||||
|
else target = 1
|
||||||
|
return origShow.call(this).fadeTo(speed, target, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.fadeOut = function(speed, callback) {
|
||||||
|
return hide(this, speed, null, callback)
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.fadeToggle = function(speed, callback) {
|
||||||
|
return this.each(function(){
|
||||||
|
var el = $(this)
|
||||||
|
el[
|
||||||
|
(el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
|
||||||
|
](speed, callback)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
})(Zepto)
|
||||||
+502
@@ -0,0 +1,502 @@
|
|||||||
|
;(function(window, $){
|
||||||
|
|
||||||
|
//显示地图
|
||||||
|
var map = new AMap.Map('map',{
|
||||||
|
mapStyle: 'fresh',
|
||||||
|
resizeEnable: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
//搜索
|
||||||
|
var wayPoints = [];
|
||||||
|
var origin = null;
|
||||||
|
var destination = null;
|
||||||
|
var routes = window.routes1;
|
||||||
|
var hasRoutes = false;
|
||||||
|
var contents = [];
|
||||||
|
|
||||||
|
$('#search_router').on('focus', function(){
|
||||||
|
$('.search_list').fadeIn();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.search_list').on('click', function(e){
|
||||||
|
var el = $(e.target);
|
||||||
|
var index = el.attr('_index');
|
||||||
|
routes = window['routes' + index];
|
||||||
|
$('#search_router').val(el.text());
|
||||||
|
$('.search_list').fadeOut();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.search_btn').on('click', function(e){
|
||||||
|
//天气
|
||||||
|
AMap.service(['AMap.Weather'], function(){
|
||||||
|
var we = new AMap.Weather();
|
||||||
|
we.getLive(routes[routes.length - 1].content, function(err, status){
|
||||||
|
console.log(status);
|
||||||
|
$('#tem_yin').text(status.weather);
|
||||||
|
$('#tem_du').text(status.temperature + '℃');
|
||||||
|
$('#tem_feng').text(status.windDirection + '风');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
map.clearMap();
|
||||||
|
map.setZoom(13);
|
||||||
|
$('.timeline').empty();
|
||||||
|
if(origin){
|
||||||
|
map.panTo(origin);
|
||||||
|
}
|
||||||
|
if(timelineIn){
|
||||||
|
clearInterval(timelineIn);
|
||||||
|
}
|
||||||
|
if(disTime){
|
||||||
|
disTime = [];
|
||||||
|
}
|
||||||
|
if(timelineIndex){
|
||||||
|
timelineIndex = 0;
|
||||||
|
}
|
||||||
|
if(carHandle){
|
||||||
|
clearInterval(carHandle);
|
||||||
|
carHandle = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.timeline_pannel').css('visibility', 'visible');
|
||||||
|
doTimeline();
|
||||||
|
hasRoutes = true;
|
||||||
|
AMap.service(['AMap.Driving'], function(){
|
||||||
|
origin = new AMap.LngLat(routes[0].x, routes[0].y);
|
||||||
|
destination = new AMap.LngLat(routes[routes.length - 1].x, routes[routes.length - 1].y);
|
||||||
|
//绘制起终点icon
|
||||||
|
addSEIcon(origin, destination);
|
||||||
|
//驾车路线导航
|
||||||
|
contents = [];
|
||||||
|
wayPoints = [];
|
||||||
|
for(var n = 1; n < routes.length - 1; n++){
|
||||||
|
wayPoints.push(new AMap.LngLat(routes[n].x, routes[n].y));
|
||||||
|
contents.push(routes[n].content);
|
||||||
|
}
|
||||||
|
//绘制中途点
|
||||||
|
addWayIcon(wayPoints, contents);
|
||||||
|
|
||||||
|
//绘制各段路程
|
||||||
|
for(var k = 0; k < routes.length - 1; k++){
|
||||||
|
var sp = new AMap.LngLat(routes[k].x, routes[k].y);
|
||||||
|
var ep = new AMap.LngLat(routes[k + 1].x, routes[k + 1].y);
|
||||||
|
|
||||||
|
driving(sp, ep);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//绘制起终点ICON
|
||||||
|
function addSEIcon(origin, destination){
|
||||||
|
var AIcon = new AMap.Icon({
|
||||||
|
image: "http://cache.amap.com/lbs/static/jsdemo002.png",
|
||||||
|
size:new AMap.Size(44,44),
|
||||||
|
imageOffset: new AMap.Pixel(-334, -180)
|
||||||
|
});
|
||||||
|
var BIcon = new AMap.Icon({
|
||||||
|
image: "http://cache.amap.com/lbs/static/jsdemo002.png",
|
||||||
|
size:new AMap.Size(44,44),
|
||||||
|
imageOffset: new AMap.Pixel(-334, -134)
|
||||||
|
});
|
||||||
|
|
||||||
|
new AMap.Marker({map: map, position: origin, icon: AIcon});
|
||||||
|
new AMap.Marker({map: map, position: destination, icon: BIcon});
|
||||||
|
}
|
||||||
|
|
||||||
|
var markers = [];
|
||||||
|
//绘制中途点ICON
|
||||||
|
function addWayIcon(wayPoints, contents){
|
||||||
|
markers = [];
|
||||||
|
for(var i in wayPoints){
|
||||||
|
var content = '<div index=' + i + ' style="background-color:#22BBFF;color:#fff;width:60px;height:26px';
|
||||||
|
content += ';text-align:center;line-height:26px;">' + contents[i] + '</div>';
|
||||||
|
var marker = new AMap.Marker({map: map, position: wayPoints[i], content: content});
|
||||||
|
marker.__index = i;
|
||||||
|
markers.push(marker);
|
||||||
|
AMap.event.addListener(marker, 'click', function(e){
|
||||||
|
var index = e.target.__index;
|
||||||
|
var cn = parseInt(index);
|
||||||
|
var arTime = getTime(index);
|
||||||
|
|
||||||
|
var infoWindow = new AMap.InfoWindow({
|
||||||
|
position: markers[cn].getPosition(),
|
||||||
|
isCustom: true,
|
||||||
|
offset:new AMap.Pixel(20, -35),
|
||||||
|
content:strHTML(routes[cn].content,routes[cn + 1].content,arTime,disTime[index].time,disTime[index].distance,disTime[index].speed)
|
||||||
|
});
|
||||||
|
infoWindow.open(map);
|
||||||
|
//TODO: 4 BEST METHOD IN CALLBACK
|
||||||
|
setTimeout(function(){
|
||||||
|
$('._in_close').on('click', function(){
|
||||||
|
infoWindow.close();
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var disTime = [];
|
||||||
|
//模拟车真实速度
|
||||||
|
//驾车路线导航
|
||||||
|
function driving(origin, destination){
|
||||||
|
var driving = new AMap.Driving({
|
||||||
|
extensions: 'base',
|
||||||
|
policy: AMap.DrivingPolicy.REAL_TRAFFIC
|
||||||
|
});
|
||||||
|
driving.search(origin, destination, function(status, result){
|
||||||
|
if(status === 'complete' && result.info === 'OK'){
|
||||||
|
//绘制驾车路线
|
||||||
|
map.setZoom(9);
|
||||||
|
var polyline = new AMap.Polyline({
|
||||||
|
map: map,
|
||||||
|
strokeColor: '#E30078',
|
||||||
|
strokeWeight: 5
|
||||||
|
});
|
||||||
|
var paths = [];
|
||||||
|
if(result.routes.length){
|
||||||
|
var route = result.routes[0];
|
||||||
|
var steps = route.steps;
|
||||||
|
var time = 0;
|
||||||
|
var distance = 0;
|
||||||
|
for(var i = 0; i < steps.length; i++){
|
||||||
|
var path = steps[i].path;
|
||||||
|
time += steps[i].time;
|
||||||
|
distance += steps[i].distance;
|
||||||
|
for(var j in path){
|
||||||
|
paths.push(path[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
disTime.push({
|
||||||
|
time: Math.ceil(time/60),
|
||||||
|
distance: (distance/1000).toFixed(2),
|
||||||
|
speed: ((distance/1000) / (time/60/60)).toFixed(2)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
polyline.setPath(paths);
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var carMarker = null;
|
||||||
|
var carMarkerTag = 0;
|
||||||
|
|
||||||
|
$('#_alert_close').on('click', function(){
|
||||||
|
$('#_alert').fadeOut();
|
||||||
|
$('.add_mask').fadeOut();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.car_run_show').on('click', function(){
|
||||||
|
if(!hasRoutes){
|
||||||
|
$('.add_mask').fadeIn();
|
||||||
|
$('#_alert').fadeIn();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
doSpeed();
|
||||||
|
origin = new AMap.LngLat(routes[0].x, routes[0].y);
|
||||||
|
destination = new AMap.LngLat(routes[routes.length - 1].x, routes[routes.length - 1].y);
|
||||||
|
var Car = new AMap.Icon({
|
||||||
|
image: "img/car.png",
|
||||||
|
size:new AMap.Size(100,100)
|
||||||
|
});
|
||||||
|
carMarker = new AMap.Marker({
|
||||||
|
map: map,
|
||||||
|
position: origin,
|
||||||
|
icon: Car,
|
||||||
|
autoRotation: true,
|
||||||
|
offset:new AMap.Pixel(-26,-13),
|
||||||
|
zIndex: 10000,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
AMap.service(['AMap.Driving'], function(){
|
||||||
|
var driving = new AMap.Driving({
|
||||||
|
extensions: 'base',
|
||||||
|
policy: AMap.DrivingPolicy.REAL_TRAFFIC
|
||||||
|
});
|
||||||
|
driving.search(origin, destination, {waypoints: wayPoints},function(status, result){
|
||||||
|
if(status === 'complete' && result.info === 'OK'){
|
||||||
|
//绘制驾车路线
|
||||||
|
var paths = [];
|
||||||
|
if(result.routes.length){
|
||||||
|
var route = result.routes[0];
|
||||||
|
var steps = route.steps;
|
||||||
|
for(var i = 0; i < steps.length; i++){
|
||||||
|
var path = steps[i].path;
|
||||||
|
for(var j in path){
|
||||||
|
paths.push(path[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
carMarker.moveAlong(paths, 500 * 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
//开启小车监控
|
||||||
|
runCar();
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启、关闭弹幕
|
||||||
|
var tag = 0;
|
||||||
|
$('.danmu').on('click', function(){
|
||||||
|
if(tag % 2 === 0){
|
||||||
|
$('#tanmu_div').css('visibility', 'visible');
|
||||||
|
}else{
|
||||||
|
$('#tanmu_div').css('visibility', 'hidden');
|
||||||
|
}
|
||||||
|
tag ++;
|
||||||
|
});
|
||||||
|
|
||||||
|
//获取小车的位置
|
||||||
|
//获取index
|
||||||
|
var realCarIndex = 0;
|
||||||
|
var timelineIndex = 0;
|
||||||
|
var carHandle = null;
|
||||||
|
function runCar(){
|
||||||
|
timelineIndex = 0;
|
||||||
|
carHandle = setInterval(function(){
|
||||||
|
if(!carMarker){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var carPos = carMarker.getPosition();
|
||||||
|
//设置地图级别和跟踪
|
||||||
|
map.setZoom(12);
|
||||||
|
map.panTo(carPos);
|
||||||
|
for(var i in routes){
|
||||||
|
if(i < (routes.length) && i > 0 && Math.abs(carPos.lng - routes[i].x) < 0.001 && Math.abs(carPos.lat - routes[i].y) < 0.001){
|
||||||
|
var index = parseInt(i-1);
|
||||||
|
timelineIndex = parseInt(i);
|
||||||
|
realCarIndex = index;
|
||||||
|
var arTime = getTime(index);
|
||||||
|
var infoWindow = new AMap.InfoWindow({
|
||||||
|
position: carPos,
|
||||||
|
isCustom: true,
|
||||||
|
offset:new AMap.Pixel(50, -50),
|
||||||
|
content:strHTML(routes[index].content,routes[parseInt(i)].content,arTime,disTime[index].time,disTime[index].distance,disTime[index].speed)
|
||||||
|
});
|
||||||
|
infoWindow.open(map);
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
$('._in_close').on('click', function(){
|
||||||
|
infoWindow.close();
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
if(index < markers.length){
|
||||||
|
//将marker设置成绿色
|
||||||
|
var content = '<div index=' + i + ' style="background-color:#00C348;color:#fff;width:60px;height:26px';
|
||||||
|
content += ';text-align:center;line-height:26px;">' + contents[index] + '</div>';
|
||||||
|
markers[index].setContent(content);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
if(index < markers.length - 1){
|
||||||
|
var oldStr = markers[index + 1].getContent();
|
||||||
|
//将marker设置成红色
|
||||||
|
var html = '<div class="firebug_flash" index=' + i + ' style="color:#fff;width:60px;height:26px';
|
||||||
|
html += ';text-align:center;line-height:26px;">' + contents[index + 1] + '</div>';
|
||||||
|
|
||||||
|
if(oldStr !== html){
|
||||||
|
markers[index + 1].setContent(html);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if(Math.abs(carPos.lng - routes[routes.length-1].x) < 0.01 && Math.abs(carPos.lat - routes[routes.length-1].y) < 0.01){
|
||||||
|
clearInterval(carHandle);
|
||||||
|
clearInterval(realSpeedHandle);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function strHTML(contentA, contentB, arTime, time, distance, speed){
|
||||||
|
var styles = '<style type="text/css">';
|
||||||
|
styles += ' ._in_bg{background-color:#FFF;width:320px;height:220px;border:1px solid #ddd;}';
|
||||||
|
styles += ' ._in_title{margin-left:5px;width:310px;text-align: center;height:35px;line-height:35px;border-bottom:1px solid #DDDDDD;}';
|
||||||
|
styles += ' ._in_title img{height:12px;margin-left:5px;margin-right:5px;margin-top:-4px;}';
|
||||||
|
styles += ' ._in_title span{color:#1DC6F0;font-size:20px;}';
|
||||||
|
styles += ' ._in_close{float: right;margin-top:3px;margin-right:3px;cursor:pointer;}';
|
||||||
|
styles += ' ._in_key{font-size:13px;color: #0091FF;margin-left:5px;}';
|
||||||
|
styles += ' ._in_key_value{color:#999999;font-size:13px;}';
|
||||||
|
styles += ' ._in_key_val{color:#E60085;font-size:13px;}';
|
||||||
|
styles += ' ._in_city_story img{height:80px;margin-right:5px;margin-top:3px;}';
|
||||||
|
styles += ' ._in_story{font-size:13px;margin-left:5px;line-height:16px;margin-top:5px;}';
|
||||||
|
styles += ' ._in_arrow_down{border:1px solid #ddd;width:12px;height:12px;background-color:#fff;margin-left:auto;margin-right:auto;';
|
||||||
|
styles += 'transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);';
|
||||||
|
styles += '-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border-left:0;border-top:0;margin-top:3px;}';
|
||||||
|
styles += ' a{text-decoration:none;color:#484848;} a:hover{color:#484848;}';
|
||||||
|
styles += '</style>';
|
||||||
|
|
||||||
|
var picIndex =Math.floor(Math.random()*5);
|
||||||
|
|
||||||
|
var contentHTML = styles + '<div class="_in_bg">';
|
||||||
|
contentHTML += '<div class="_in_close"><img src="img/iw-close.png" /></div>';
|
||||||
|
contentHTML += '<div class="_in_title">';
|
||||||
|
contentHTML += '<span>' + contentA + '</span>';
|
||||||
|
contentHTML += '<img src="img/arrow.png"/>';
|
||||||
|
contentHTML += '<span>' + contentB + '</span></div>';
|
||||||
|
contentHTML += '<div style="height:90px;"><div style="float:left"><div style="margin-top:4px;">';
|
||||||
|
contentHTML += '<span class="_in_key">到达时间：</span><span class="_in_key_val">' + arTime + '</span>';
|
||||||
|
contentHTML += '</div><div><span class="_in_key">时长：</span>';
|
||||||
|
contentHTML += '<span class="_in_key_value">' + time + ' 分钟</span></div>';
|
||||||
|
contentHTML += '<div><span class="_in_key">距离：</span>';
|
||||||
|
contentHTML += '<span class="_in_key_value">' + distance + ' km</span>';
|
||||||
|
contentHTML += '</div>';
|
||||||
|
contentHTML += '<div>';
|
||||||
|
contentHTML += '<span class="_in_key">时速：</span>';
|
||||||
|
contentHTML += '<span class="_in_key_value">' + speed + ' km/h</span>';
|
||||||
|
contentHTML += '</div>';
|
||||||
|
contentHTML += '</div><div style="float:right;" class="_in_city_story">';
|
||||||
|
contentHTML += '<img src="' + pics[picIndex] + '"/></div></div>';
|
||||||
|
contentHTML += '<div class="_in_story">';
|
||||||
|
contentHTML += '<div><a target="_blank" href="' + urls[0] +'">那座城市，那个人， 特价¥899</a></div>';
|
||||||
|
contentHTML += '<div><a target="_blank" href="' + urls[1] +'">再美不如苏州园林， 门票：¥40</a></div>';
|
||||||
|
contentHTML += '<div><a target="_blank" href="' + urls[2] +'">苏州好吃一窝，特价团购：¥30</a></div>';
|
||||||
|
contentHTML += '<div><a target="_blank" href="' + urls[3] +'">苏州必须去的5个景点，去了才知道</a></div>';
|
||||||
|
contentHTML += '<div><a target="_blank" href="' + urls[4] +'">假日酒店，全家人旅行特选，机场接送</a></div></div>';
|
||||||
|
contentHTML += '<div class="_in_arrow_down"></div></div>';
|
||||||
|
return contentHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTime(index){
|
||||||
|
var endTime = 0;
|
||||||
|
var startTime = parseInt(routes[0].startTime.split(':')[1]);
|
||||||
|
for(var n = index; n >= 0; n--){
|
||||||
|
endTime += disTime[n].time;
|
||||||
|
}
|
||||||
|
endTime += startTime;
|
||||||
|
//进行时间换算
|
||||||
|
var min = endTime % 60; //分钟
|
||||||
|
var hour = Math.floor(endTime/60);//小时
|
||||||
|
var arTime = parseInt(routes[0].startTime.split(':')[0]) + hour;
|
||||||
|
if(arTime > 23){
|
||||||
|
arTime = arTime - 24; //次日
|
||||||
|
arTime = '次日 ' + arTime;
|
||||||
|
}
|
||||||
|
if(min < 10){
|
||||||
|
min = '0' + min;
|
||||||
|
}
|
||||||
|
arTime += ':' + min;
|
||||||
|
return arTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取路上所花时间
|
||||||
|
function getHour(index){
|
||||||
|
var endTime = 0;
|
||||||
|
for(var n = index; n >= 0; n--){
|
||||||
|
endTime += disTime[n].time;
|
||||||
|
}
|
||||||
|
return Math.floor(endTime/60) + '小时' + Math.ceil(endTime%60) + '分钟';
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取所有距离
|
||||||
|
function getAllDistance(){
|
||||||
|
var dis = 0;
|
||||||
|
for(var i in disTime){
|
||||||
|
dis += parseInt(disTime[i].distance);
|
||||||
|
}
|
||||||
|
return dis;
|
||||||
|
}
|
||||||
|
|
||||||
|
//仪表盘功能
|
||||||
|
var myChart = echarts.init(document.getElementById('charts'));
|
||||||
|
var option = {
|
||||||
|
backgroundColor:'#fff',
|
||||||
|
series : [
|
||||||
|
{
|
||||||
|
min:0,
|
||||||
|
max:80,
|
||||||
|
name:'业务指标',
|
||||||
|
type:'gauge',
|
||||||
|
detail : {
|
||||||
|
textStyle:{
|
||||||
|
fontSize:18,
|
||||||
|
color:'#E82D00'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data:[{value: 50, name: 'km/h'}],
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length :15,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto',
|
||||||
|
width:1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
title : {
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
fontSize: 12,
|
||||||
|
fontStyle: 'italic'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||||||
|
myChart.setOption(option, true);
|
||||||
|
|
||||||
|
//计算时速
|
||||||
|
var realSpeedHandle = null;
|
||||||
|
function doSpeed(){
|
||||||
|
$('#real_time').text(getTime(disTime.length - 1));
|
||||||
|
$('#real_distime').text(getHour(disTime.length - 1));
|
||||||
|
$('#real_distance').text(getAllDistance() + 'km');
|
||||||
|
realSpeedHandle = setInterval(function(){
|
||||||
|
if(disTime[realCarIndex]){
|
||||||
|
var speed = (disTime[realCarIndex].speed - Math.random()*5).toFixed(2);
|
||||||
|
option.series[0].data[0].value = speed;
|
||||||
|
myChart.setOption(option, true);
|
||||||
|
$('#real_speed').text(speed + 'km/h');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
//时间轴
|
||||||
|
var timelineIn = null;
|
||||||
|
function doTimeline(){
|
||||||
|
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');
|
||||||
|
$('#timeline_' + timelineIndex).css('backgroundColor', '#989693');
|
||||||
|
$('#timeline_' + (timelineIndex + 1)).addClass('firebug_flash').css('backgroundColor', '#DE007D');
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
//开启、关闭弹幕
|
||||||
|
var tou_tag = 0;
|
||||||
|
$('.toupiao').on('click', function(){
|
||||||
|
if(tou_tag % 2 === 0){
|
||||||
|
$('#toupiao_frame').fadeIn();
|
||||||
|
}else{
|
||||||
|
$('#toupiao_frame').fadeOut();
|
||||||
|
}
|
||||||
|
tou_tag ++;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})(window, $);
|
||||||
+1803
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user