From 2899f69c5d6e94d9af7d6797afc289e9c270ec0e Mon Sep 17 00:00:00 2001 From: lh_wang Date: Fri, 7 Aug 2015 14:49:02 +0800 Subject: [PATCH] add info module --- meitu/.idea/workspace.xml | 47 ++++++------ meitu/css/main.css | 3 +- meitu/index.html | 4 +- meitu/js/home/info.js | 155 ++++++++++++++++++-------------------- meitu/js/home/map.js | 16 ++-- 5 files changed, 111 insertions(+), 114 deletions(-) diff --git a/meitu/.idea/workspace.xml b/meitu/.idea/workspace.xml index 7ff1e20..650925b 100644 --- a/meitu/.idea/workspace.xml +++ b/meitu/.idea/workspace.xml @@ -24,8 +24,8 @@ - - + + @@ -34,8 +34,8 @@ - - + + @@ -47,9 +47,10 @@ @@ -247,13 +248,13 @@ - + - + @@ -276,14 +277,6 @@ - - - - - - - - @@ -300,26 +293,34 @@ - + - - + + - - + + + + + + + + + + - - + + diff --git a/meitu/css/main.css b/meitu/css/main.css index 5c6df38..dd9d114 100644 --- a/meitu/css/main.css +++ b/meitu/css/main.css @@ -116,6 +116,7 @@ html body { top: 60px; width: 50px; min-height: 50px; + z-index:10001; } .tools>div { width: 40px; @@ -198,7 +199,7 @@ html body { .router{ position:absolute; left:10px; - top:120px; + top:105px; width:45px; min-height:220px; background-color:#fff; diff --git a/meitu/index.html b/meitu/index.html index 0fe38e1..079990f 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -43,7 +43,7 @@ @@ -102,7 +102,7 @@ <% for(var i = 0; i < list.length; i++) { %>

<%=i%>

-

我们哈哈哈

+

<%=list[i].name%>

<% } %> diff --git a/meitu/js/home/info.js b/meitu/js/home/info.js index 088c30a..6225cea 100644 --- a/meitu/js/home/info.js +++ b/meitu/js/home/info.js @@ -1,85 +1,80 @@ +define('home/info', function (require, exports, module) { + var _ = require('lib/underscore'); + var $ = require('lib/zepto_pj'); + + //渲染数据 + var width = document.body.clientWidth; + var wrapper = $('.SN_info_wrapper'); + var tpl = $('#tpl').html(); + var data = { + width: width, + list: [ + { + name: '苏州' + }, + { + name: '上海' + }, + { + name: '南京' + } + ] + }; + + var html = _.template(tpl)(data); + wrapper.html(html); + + //动画特效 + var wholeLength = width * data.list.length; + wrapper.css('width', wholeLength); + + //记录初始位置 + var startX = 0; + wrapper.on('touchstart', function (e) { + startX = e.changedTouches[0].clientX; + }); + + wrapper.on('touchend', function (e) { + var dis = e.changedTouches[0].clientX - startX; + //获取当前translate3d的位置 + var transform = wrapper.css('transform') || wrapper.css('-webkit-transform'); + var currentPos = parseInt(transform.split(',')[0].split('(')[1]); + + //移动 + if (Math.abs(dis) > 20) { + //左移 + if (dis < -20) { + var w = 0; + var handle = setInterval(function () { + 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)'); + } else { + clearInterval(handle); + } + w += 80; + }, 70); + } + + //右移 + if (dis > 20) { + var w = 0; + var handle = setInterval(function () { + 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)'); + } else { + clearInterval(handle); + } + w += 80; + }, 70); + } + } + }); -define('home/info', function(require, exports, module){ - var _ = require('lib/underscore'); - var $ = require('lib/zepto_pj'); - - //渲染数据 - var width = document.body.clientWidth; - var wrapper = $('.SN_info_wrapper'); - var tpl = $('#tpl').html(); - var data = { - width: width, - list:[ - { - name: 'ss' - }, - { - name: 'ss' - }, - { - name: 'ss' - } - ] - }; - - var html = _.template(tpl)(data); - wrapper.html(html); - - //动画特效 - var wholeLength = width * data.list.length; - wrapper.css('width', wholeLength); - - //记录初始位置 - var startX = 0; - wrapper.on('touchstart', function(e){ - startX = e.changedTouches[0].clientX; - }); - - wrapper.on('touchend', function(e){ - var dis = e.changedTouches[0].clientX - startX; - //获取当前translate3d的位置 - var transform = wrapper.css('transform') || wrapper.css('-webkit-transform'); - var currentPos = parseInt(transform.split(',')[0].split('(')[1]); - - //移动 - if(Math.abs(dis) > 30){ - //左移 - if(dis < -30){ - var w = 0; - var handle = setInterval(function(){ - 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)'); - }else{ - clearInterval(handle); - } - w += 80; - }, 70); - } - - //右移 - if(dis > 30){ - var w = 0; - var handle = setInterval(function(){ - 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)'); - }else{ - clearInterval(handle); - } - w += 80; - }, 70); - } - } - - - - }); - - }); diff --git a/meitu/js/home/map.js b/meitu/js/home/map.js index e570f5c..197d9b5 100644 --- a/meitu/js/home/map.js +++ b/meitu/js/home/map.js @@ -4,11 +4,11 @@ define('home/map', function(require, exports, module){ //获取路线数据 var router = require('common/data').router; - - //初始化地图 - var map = new AMap.Map('map', { - mapStyle: 'fresh', - resizeEnable: true, + + //初始化地图 + var map = new AMap.Map('map', { + mapStyle: 'fresh', + resizeEnable: true, }); //途经点 @@ -25,15 +25,15 @@ define('home/map', function(require, exports, module){ // var contents = []; - - return { + + return { map: map, wayPointer: wayPoints, origin: origin, destination: destination, routes: routes, hasRoutes: hasRoutes, - contents: contents + contents: contents } }); \ No newline at end of file