diff --git a/meitu/.idea/workspace.xml b/meitu/.idea/workspace.xml index 650925b..84b5ab1 100644 --- a/meitu/.idea/workspace.xml +++ b/meitu/.idea/workspace.xml @@ -24,18 +24,18 @@ - - + + - - + + - - + + @@ -48,9 +48,9 @@ @@ -175,6 +175,20 @@ - + - - + + - - + + - + - - + + diff --git a/meitu/css/main.css b/meitu/css/main.css index dd9d114..28b3466 100644 --- a/meitu/css/main.css +++ b/meitu/css/main.css @@ -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 { - diff --git a/meitu/index.html b/meitu/index.html index 079990f..ed41b92 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -97,16 +97,60 @@ -
+
+
+ -
diff --git a/meitu/js/home/info.js b/meitu/js/home/info.js index 6225cea..dabe47a 100644 --- a/meitu/js/home/info.js +++ b/meitu/js/home/info.js @@ -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'); + } + }); + + + });