fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 76bc9b0b4258b3e220cc34bb9300c690ecc603f6 1 parent aefd8bfe

星潮教室首页

Inline Side-by-side
Showing 4 changed files with 163 additions and 19 deletions
... ... @@ -114,8 +114,25 @@ exports.index = (req, res) => {
articles: [
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
},
{
src: '//img12.static.yhbimg.com/yhb-img02/2016/01/05/07/022e56ed48c7d0b5745683e' +
'87518d6141b.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
},
{
src: '//img12.static.yhbimg.com/yhb-img02/2016/02/22/06/02f992b88afc92359113fc1355' +
'90ea9ce8.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ... @@ -133,8 +150,13 @@ exports.index = (req, res) => {
},
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ... @@ -152,8 +174,13 @@ exports.index = (req, res) => {
},
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ... @@ -171,8 +198,13 @@ exports.index = (req, res) => {
},
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ... @@ -190,8 +222,13 @@ exports.index = (req, res) => {
},
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ... @@ -209,8 +246,13 @@ exports.index = (req, res) => {
},
{
articleId: '48187',
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
starAvatar: [
{
src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
name: 'DREAMER',
avatarUrl: ''
}
],
title: 'dangerous people 跟着薛之谦维护世界和平T恤',
url: 'http://guang.m.yohobuy.com/info/index?id=48187',
articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，' +
... ...
... ... @@ -23,8 +23,19 @@
{{#each articles}}
<li data-id="{{articleId}}">
<div class="star-avatar">
<img class="lazy" data-original="{{image src 100 100}}" />
<p class="name">{{name}}</p>
<div class="article-avatar-swiper">
<ul class="clearfix swiper-wrapper">
{{#each starAvatar}}
<li class="swiper-slide">
<a href="{{avatarUrl}}">
<img class="swiper-lazy" data-src="{{image src 100 100}}" />
<p class="name">{{name}}</p>
<div class="swiper-lazy-preloader"></div>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="star-article">
<i class="article-arrow"></i>
... ... @@ -33,7 +44,7 @@
<a href="{{url}}"><p>{{articeTxt}}</p></a>
<ul class="artice-imgs">
{{#each articeImg}}
<li><img src="{{image . 130 130}}" /></li>
<li><img src="{{image . 640 640}}" /></li>
{{/each}}
</ul>
</div>
... ... @@ -44,5 +55,14 @@
</div>
</li>
{{/each}}
</ul>
</ul>
<div class="view-img">
<div class="mask-bg"></div>
<div class="view-area">
<div class="swiper-view">
<ul class="clearfix swiper-wrapper"></ul>
</div>
</div>
</div>
</div>
... ...
... ... @@ -9,9 +9,12 @@ var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
ellipsis = require('yoho-mlellipsis');
var $starArticle = $('.star-article');
var $starArticle = $('.star-article'),
$swiperView = $('.swiper-view'),
$viewImg = $('.view-img'),
imgs = [];
var avatarSwiper, avatarKey;
var avatarSwiper, avatarKey, mySwiper;
lazyLoad($('img.lazy'));
ellipsis.init();
... ... @@ -32,8 +35,34 @@ function articleImgAction(dom) {
imgLen = $articeImgs.find('img').length,
addFlagDom = $li.eq(2);
var i;
imgs = [];
$li.each(function() {
imgs.push($(this).find('img').attr('src'));
});
$li.on('click', function() {
console.log('1');
for (i = 0; i < imgLen; i++) {
$swiperView.find('ul').append('<li class="swiper-slide">' +
'<img class="swiper-lazy" data-src="' + imgs[i] + '">' +
'<div class="swiper-lazy-preloader"></div></li>');
}
setTimeout(function() {
mySwiper = new Swiper('.swiper-view', {
lazyLoading: true,
lazyLoadingInPrevNext: true,
slideElement: 'li'
});
}, 100);
$viewImg.show();
$('body').css({
overflow: 'hidden'
});
});
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
... ... @@ -68,6 +97,16 @@ if ($('.avatar-swiper .swiper-slide').length > 1) {
});
}
if ($('.star-avatar').length > 1) {
new Swiper('.article-avatar-swiper', {
initialSlide: 0,
lazyLoading: true,
lazyLoadingInPrevNext: true,
loop: true,
autoplay: 5000
});
}
if ($('.star-info').find('li').length > 0) {
$starArticle.each(function(key, item) {
txtLimit($(item));
... ... @@ -87,3 +126,12 @@ $('.avatar-swiper li').on('click', function() {
avatarSwiper.slideTo(avatarKey, 1000, false);
}
});
$('.mask-bg').on('click', function() {
$viewImg.hide();
$viewImg.find('li').remove();
mySwiper.destroy(false);
$('body').css({
overflow: 'auto'
});
});
... ...
... ... @@ -148,6 +148,12 @@
padding-left: 30px;
box-sizing: border-box;
float: left;
overflow: hidden;
.article-avatar-swiper {
width: 104px;
overflow: hidden;
}
img {
width: 104px;
... ... @@ -291,6 +297,34 @@
}
}
}
.view-img {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 9;
.mask-bg {
position: absolute;
background: rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
li {
float: left;
img {
width: 90%;
height: 100%;
}
}
}
}
.star-index-bg {
... ...