mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add info module
This commit is contained in:
lh_wang
Generated
+35
-16
@@ -24,18 +24,18 @@
|
||||
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-18.5">
|
||||
<caret line="104" column="37" selection-start-line="104" selection-start-column="37" selection-end-line="104" selection-end-column="37" />
|
||||
<state vertical-scroll-proportion="-22.25">
|
||||
<caret line="140" column="77" selection-start-line="140" selection-start-column="77" selection-end-line="140" selection-end-column="77" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="info.js" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/js/home/info.js">
|
||||
<file leaf-file-name="main.css" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/css/main.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.62655604">
|
||||
<caret line="75" column="0" selection-start-line="75" selection-start-column="0" selection-end-line="75" selection-end-column="0" />
|
||||
<state vertical-scroll-proportion="0.7095436">
|
||||
<caret line="261" column="17" selection-start-line="261" selection-start-column="17" selection-end-line="261" selection-end-column="17" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
@@ -48,9 +48,9 @@
|
||||
<list>
|
||||
<option value="$PROJECT_DIR$/js/home/tools.js" />
|
||||
<option value="$PROJECT_DIR$/js/home/map.js" />
|
||||
<option value="$PROJECT_DIR$/css/main.css" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/js/home/info.js" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/css/main.css" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
@@ -175,6 +175,20 @@
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="meitu" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="meitu" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="img" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="meitu" />
|
||||
@@ -202,6 +216,11 @@
|
||||
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="CopyFile.RECENT_KEYS">
|
||||
<recent name="$PROJECT_DIR$/img" />
|
||||
</key>
|
||||
</component>
|
||||
<component name="RunManager">
|
||||
<configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
|
||||
<method />
|
||||
@@ -301,26 +320,26 @@
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/css/main.css">
|
||||
<entry file="file://$PROJECT_DIR$/js/home/info.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.42047027">
|
||||
<caret line="201" column="11" selection-start-line="201" selection-start-column="11" selection-end-line="201" selection-end-column="11" />
|
||||
<state vertical-scroll-proportion="0.6680498">
|
||||
<caret line="37" column="42" selection-start-line="37" selection-start-column="42" selection-end-line="37" selection-end-column="42" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-18.5">
|
||||
<caret line="104" column="37" selection-start-line="104" selection-start-column="37" selection-end-line="104" selection-end-column="37" />
|
||||
<state vertical-scroll-proportion="-22.25">
|
||||
<caret line="140" column="77" selection-start-line="140" selection-start-column="77" selection-end-line="140" selection-end-column="77" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/js/home/info.js">
|
||||
<entry file="file://$PROJECT_DIR$/css/main.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.62655604">
|
||||
<caret line="75" column="0" selection-start-line="75" selection-start-column="0" selection-end-line="75" selection-end-column="0" />
|
||||
<state vertical-scroll-proportion="0.7095436">
|
||||
<caret line="261" column="17" selection-start-line="261" selection-start-column="17" selection-end-line="261" selection-end-column="17" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
|
||||
+34
-8
@@ -43,6 +43,7 @@ html body {
|
||||
font-size: 32px
|
||||
}
|
||||
}
|
||||
/*----*/
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -199,7 +200,7 @@ html body {
|
||||
.router{
|
||||
position:absolute;
|
||||
left:10px;
|
||||
top:105px;
|
||||
top:110px;
|
||||
width:45px;
|
||||
min-height:220px;
|
||||
background-color:#fff;
|
||||
@@ -219,21 +220,47 @@ html body {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
right:0px;
|
||||
bottom:0;
|
||||
bottom:5px;
|
||||
height:130px;
|
||||
z-index:10000;
|
||||
background-color:#FFF;
|
||||
/*border-top:1px solid #CCCCCC;*/
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.SN_info_wrapper{
|
||||
height:130px;
|
||||
-webkit-transform: translate3d(0px, 0px, 0px);
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
opacity: 0.8;
|
||||
-webkit-opacity:0.8;
|
||||
}
|
||||
|
||||
.SN_info_item{
|
||||
height:130px;
|
||||
float:left;
|
||||
background-color:#fff;
|
||||
margin-left:10px;
|
||||
margin-right:10px;
|
||||
box-sizing:border-box;
|
||||
border-radius:2px;
|
||||
border:1px solid #ddd;
|
||||
}
|
||||
|
||||
.SN_info_img{
|
||||
margin-top:20px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
margin-right:2px;
|
||||
}
|
||||
|
||||
.SN_info_img img{
|
||||
max-height:100px;
|
||||
max-width:100px;
|
||||
}
|
||||
|
||||
.SN_info_tui{
|
||||
position: relative;
|
||||
margin-top:20px;
|
||||
margin-left:4px;
|
||||
height:100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -241,4 +268,3 @@ html body {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+52
-8
@@ -97,16 +97,60 @@
|
||||
<canvas id="router_canvas" ></canvas>
|
||||
</div>
|
||||
<!--信息窗-->
|
||||
<div class="SN_info sh">
|
||||
<div class="SN_info">
|
||||
<div id="SN_TPL"></div>
|
||||
|
||||
<script type="text/template" id="tpl">
|
||||
<% for(var i = 0; i < list.length; i++) { %>
|
||||
<div style="width:<%=width%>px; height:130px;float:left;">
|
||||
<h1><%=i%></h1>
|
||||
<h1><%=list[i].name%></h1>
|
||||
</div>
|
||||
<% } %>
|
||||
<div id="SN_info_btn" style="position:absolute;top:2px;width:25px;margin-left:-12px;left:50%;z-index:10002;">
|
||||
<i class="fa fa-bars" style="color:#1DBAFF;font-size:16px;cursor:pointer;"></i>
|
||||
</div>
|
||||
<div class="SN_info_wrapper">
|
||||
<% for(var i = 0; i < list.length; i++) { %>
|
||||
<div style="width:<%=width%>px;" class="SN_info_item sh">
|
||||
<div class="fl SN_info_tui" style="width:<%=tui_width%>px;">
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
那座城市 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
今夜无人入眠 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
回锅肉， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
那个人咖啡， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style="width:<%=tui_width%>px;overflow:hidden;text-overflow:ellipsis;height:19px;">
|
||||
<a target="_blank">
|
||||
<i style="color:#00C348;margin-right:5px;" class="fa fa-star"></i>
|
||||
苏州10景， 特价
|
||||
<span style="color:red;font-size:14px;margin"><i class="fa fa-jpy"></i> 899</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr SN_info_img">
|
||||
<img src="img/iio.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</script>
|
||||
<div class="SN_info_wrapper"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
|
||||
|
||||
+40
-14
@@ -4,11 +4,21 @@ define('home/info', function (require, exports, module) {
|
||||
|
||||
//渲染数据
|
||||
var width = document.body.clientWidth;
|
||||
var wrapper = $('.SN_info_wrapper');
|
||||
var wrapper = $('#SN_TPL');
|
||||
var tpl = $('#tpl').html();
|
||||
var data = {
|
||||
width: width,
|
||||
width: width - 20,
|
||||
tui_width: width - 140,
|
||||
list: [
|
||||
{
|
||||
name: '苏州'
|
||||
},
|
||||
{
|
||||
name: '上海'
|
||||
},
|
||||
{
|
||||
name: '南京'
|
||||
},
|
||||
{
|
||||
name: '苏州'
|
||||
},
|
||||
@@ -25,56 +35,72 @@ define('home/info', function (require, exports, module) {
|
||||
wrapper.html(html);
|
||||
|
||||
//动画特效
|
||||
var wrapperContent = $('.SN_info_wrapper');
|
||||
var wholeLength = width * data.list.length;
|
||||
wrapper.css('width', wholeLength);
|
||||
|
||||
//记录初始位置
|
||||
var startX = 0;
|
||||
wrapper.on('touchstart', function (e) {
|
||||
wrapperContent.on('touchstart', function (e) {
|
||||
startX = e.changedTouches[0].clientX;
|
||||
});
|
||||
|
||||
wrapper.on('touchend', function (e) {
|
||||
wrapperContent.on('touchend', function (e) {
|
||||
var dis = e.changedTouches[0].clientX - startX;
|
||||
//获取当前translate3d的位置
|
||||
var transform = wrapper.css('transform') || wrapper.css('-webkit-transform');
|
||||
var transform = wrapperContent.css('transform') || wrapperContent.css('-webkit-transform');
|
||||
var currentPos = parseInt(transform.split(',')[0].split('(')[1]);
|
||||
|
||||
console.log(currentPos);
|
||||
//移动
|
||||
if (Math.abs(dis) > 20) {
|
||||
//左移
|
||||
if (dis < -20) {
|
||||
var w = 0;
|
||||
var handle = setInterval(function () {
|
||||
w += width/8;
|
||||
if (w <= width && Math.abs(currentPos) < (wholeLength - width - 10)) {
|
||||
var newX = (currentPos - w);
|
||||
wrapper.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapper.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapperContent.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapperContent.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
} else {
|
||||
clearInterval(handle);
|
||||
}
|
||||
w += 80;
|
||||
}, 70);
|
||||
|
||||
}, 30);
|
||||
}
|
||||
|
||||
//右移
|
||||
if (dis > 20) {
|
||||
var w = 0;
|
||||
var handle = setInterval(function () {
|
||||
w += width/8;
|
||||
if (w <= width && Math.abs(currentPos) > 10) {
|
||||
var newX = (currentPos + w);
|
||||
wrapper.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapper.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapperContent.css('transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
wrapperContent.css('-webkit-transform', 'translate3d(' + newX + 'px, 0px, 0px)');
|
||||
} else {
|
||||
clearInterval(handle);
|
||||
}
|
||||
w += 80;
|
||||
}, 70);
|
||||
}, 30);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//隐藏和显示
|
||||
var SN_info_btn = $('#SN_info_btn');
|
||||
var SN_info = $('.SN_info');
|
||||
|
||||
SN_info_btn.on('click', function(){
|
||||
if(parseInt(SN_info.css('height')) > 100){
|
||||
SN_info.css('height', '20px');
|
||||
}else{
|
||||
SN_info.css('height', '130px');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user