fe / YOHOBUYPC · Commits

Go to a project

Authored by unknown
Commit f1bdf8a91a5cb09ba791eab451bf1877a2ec306b 1 parent 34c77799

男首改版前三部分代码

Inline Side-by-side
Showing 10 changed files with 824 additions and 6 deletions
{{> layout/header}}
<div class="home-page yoho-page">
I am boys page
{{# boy}}
<div class="slide-container">
{{#if bigSlide}}
<div class="big-slide">
<ul>
{{# bigSlide}}
<li>
<a href="{{href}}">
<img src="{{img}}" alt="">
</a>
</li>
{{/ bigSlide}}
</ul>
<div class="slide-switch">
<a class="prev" href="javascript:;">
<span class="iconfont">&#xe60c;</span>
</a>
<a class="next" href="javascript:;">
<span class="iconfont">&#xe60b;</span>
</a>
</div>
</div>
{{/if}}
{{#if smallSlide}}
<div class="small-slide">
<ul class="clearfix">
{{# smallSlide}}
<li>
<a href="{{href}}"></a>
<img src="{{img}}" alt="">
</li>
{{/ smallSlide}}
</ul>
</div>
{{/if}}
</div>
{{# newReport}}
<div class="new-report clearfix">
{{> index/floor_header}}
<ul class="report-list clearfix">
{{# list}}
{{#unless @last}}
<li>
<a href="{{href}}">
<img src="{{img}}" alt="">
</a>
</li>
{{/unless}}
{{/ list}}
</ul>
{{# list}}
{{#if @last}}
<div class="last-item">
<a href="{{href}}">
<img src="{{img}}" alt="">
</a>
</div>
{{/if}}
{{/ list}}
</div>
{{/ newReport}}
{{# preferenceBrand}}
<div class="preference-brand">
{{> index/floor_header}}
<div class="img-brand">
<ul class="img-list clearfix">
{{# imgBrand}}
<li class="img-item">
<a href="{{href}}">
<img src="{{img}}" alt="">
</a>
</li>
{{/ imgBrand}}
</ul>
<div class="img-brand-switch">
<a class="prev" href="javascript:;">
<span class="iconfont">&#xe60c;</span>
</a>
<a class="next" href="javascript:;">
<span class="iconfont">&#xe60b;</span>
</a>
</div>
</div>
<div class="logo-brand">
<ul class="clearfix">
{{# logoBrand}}
{{#if switch}}
<li class="logo-brand-switch">
<a class="prev iconfont" href="javascript:;">&#xe60f;</a>
<a class="next iconfont" href="javascript:;">&#xe60e;</a>
</li>
{{else}}
{{#if more}}
<li class="brand-more">
<a href="{{href}}">MORE ></a>
</li>
{{else}}
<li>
<a href="{{href}}">
<img src="{{img}}" alt="">
</a>
</li>
{{/if}}
{{/if}}
{{/ logoBrand}}
</ul>
</div>
</div>
{{/ preferenceBrand}}
{{/ boy}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<div class="floor-header clearfix">
<h2 class="floor-title">{{name}}</h2>
{{#if navs}}
<ul class="header-navs">
{{# navs}}
<li data-classify="{{id}}">
<a target="_blank" href="{{href}}">{{name}}</a>
</li>
{{/ navs}}
</ul>
{{/if}}
</div>
\ No newline at end of file
... ...
... ... @@ -5,9 +5,10 @@
{{!-- 首页 --}}
{{#if boysHomePage}}
<script>
seajs.use('js/home/entrey', function(h) {
/*seajs.use('js/home/entrey', function(h) {
h.set('boys');
});
});*/
seajs.use('js/home/home');
</script>
{{/if}}
... ...
var $ = require('jquery');
(function($) {
var LinkageSlider = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.linkageSlider.defaults, options);
this.bigItem = this.$element.find('.big-slide').find('li');
this.smallItem = this.$element.find('.small-slide').find('li');
this.len = this.bigItem.size();
this.index = 0;
this.timer = null;
this.init();
};
LinkageSlider.prototype = {
init: function() {
this._slideShow();
if (this.len <= 1) {
this.$element.find('.slide-switch').hide();
return;
}
this._bindEvent();
this._autoplay();
},
_bindEvent: function() {
var that = this;
this.$element.find('.slide-switch').on('click', '.next', function() {
that._nextSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
}).on('click', '.prev', function() {
that._prevSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
});
this.smallItem.on('mouseenter', function() {
that.index = $(this).index();
clearInterval(that.timer);
that._slideShow();
}).on('mouseleave', function() {
that._autoplay();
});
},
_nextSlide: function() {
if (this.index === this.len - 1) {
this.index = 0;
} else {
this.index++;
}
this._slideShow();
},
_prevSlide: function() {
if (this.index === 0) {
this.index = this.len - 1;
} else {
this.index--;
}
this._slideShow();
},
_slideShow: function() {
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
},
_autoplay: function() {
var that = this;
clearInterval(this.timer);
this.timer = setInterval(function() {
that._nextSlide();
}, this.options.time);
}
};
$.fn.linkageSlider = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('linkageSlider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('linkageSlider', (data = new LinkageSlider(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
$.fn.linkageSlider.Constructor = LinkageSlider;
$.fn.linkageSlider.defaults = {
time: 5000
};
})($);
\ No newline at end of file
... ...
/**
* (品牌优选)图片幻灯片插件
* @author: wangqing(robin.wang@yoho.cn)
* @date: 205/7/2
*/
var $ = require('jquery');
(function($) {
$.fn.slider2 = function(options) {
$.fn.slider2.defaults = {
index: 0,
shownum: 3,
autoplay: false,
delaytime: 3000
};
return this.each(function() {
var opts = $.extend({}, $.fn.slider2.defaults, options);
var mr = parseInt($('.img-item').css('margin-right'));
var $banneritems = $('.img-item');
var bannerarr = [];
var _width = $banneritems.outerWidth() + mr,
_size = $banneritems.length,
j = 0;
if (_size <= 3) {
return;
}
for (j = 0; j < $banneritems.length; j++) {
bannerarr.push($banneritems[j]);
}
_size = bannerarr.length;
$(this).find('.img-list').css({
width: (_width * _size)
});
$(this).find('.next').on('click', function(e) {
var i = 0,
_obj = null;
e.preventDefault();
changePic(3, _width, function() {
for (i = 0; i < 3; i++) {
_obj = bannerarr.shift();
$('.img-item').parent().append(_obj.outerHTML);
bannerarr.push(_obj);
}
$('.img-item').first().remove();
$('.img-item').first().remove();
$('.img-item').first().remove();
$('.img-list').css({
'margin-left': '0'
});
});
});
$(this).find('.prev').on('click', function(e) {
var i = 0,
_obj = null,
offersetleft = '';
e.preventDefault();
for (i = 0; i < 3; i++) {
_obj = bannerarr.pop();
$('.img-item').parent().prepend(_obj.outerHTML);
bannerarr.unshift(_obj);
}
offersetleft = 3 * _width;
$('.img-item').last().remove();
$('.img-item').last().remove();
$('.img-item').last().remove();
$('.img-list').css({
'margin-left': -offersetleft + 'px'
});
changePic(0, _width);
});
if (opts.autoplay === true) {
autoplayrecycle(opts.index, _size, true);
}
});
function autoplay(index, limit, toright) {
if (toright === true) {
$('.next').trigger('click');
if (index === (limit - 3)) {
autoplayrecycle(--index, limit, false);
} else {
autoplayrecycle(++index, limit, true);
}
} else {
$('.prev').trigger('click');
if (index === 0) {
autoplayrecycle(++index, limit, true);
} else {
autoplayrecycle(--index, limit, false);
}
}
}
function autoplayrecycle(index, limit, toright) {
window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);
}
function changePic(index, width, callback) {
var offersetleft = -(index * width);
$('.img-list')
.animate({
'margin-left': offersetleft + 'px'
}, 'slow', callback);
}
};
}($));
\ No newline at end of file
... ...
... ... @@ -2,4 +2,12 @@
* 首页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/11/23
*/
\ No newline at end of file
*/
var $ = require('jquery');
require('../common/linkage-slider');
require('../common/slider2');
$('.slide-container').linkageSlider();
$('.img-brand').slider2();
\ No newline at end of file
... ...
... ... @@ -13,7 +13,7 @@
"spm": {
"main": "index.js",
"dependencies": {
"jquery": "2.1.4"
"jquery": "1.8.3"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
.home-page {
width: 1150px;
margin: 0 auto;
.slide-container {
margin: 10px 0 0;
img {
display: block;
}
}
.big-slide {
position: relative;
height: 450px;
overflow: hidden;
ul {
position: relative;
height: 100%;
}
&:hover {
.slide-switch {
display: block;
}
}
li {
display: none;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
&:first-child {
display: block;
}
}
.slide-switch {
display: none;
/* @include opacity(0);
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease-in); */
a {
position: absolute;
top: 50%;
margin: -30px 0 0;
width: 60px;
height: 60px;
line-height: 56px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover{
@include opacity(0.9);
}
.iconfont {
font-size: 32px;
color: #59585a;
}
}
}
}
.small-slide {
margin: 6px 0 0;
padding: 0 0 0 2px;
li {
position: relative;
float: left;
margin: 0 0 0 6px;
width: 138px;
height: 54px;
&:first-child {
margin: 0;
}
&.focus {
a {
@include opacity(0);
}
}
a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
@include opacity(0.3);
}
img {
width: 100%;
height: 100%;
}
}
}
.new-report {
img {
display: block;
}
.report-list {
float: left;
width: 868px;
li {
float: left;
margin: 0 8px 8px 0;
width: 185px;
height: 248px;
overflow: hidden;
&:first-child {
margin-right: 7px;
width: 282px;
height: 504px;
}
}
}
.last-item {
float: left;
width: 282px;
height: 504px;
overflow: hidden;
}
}
.img-brand {
position: relative;
width: 100%;
height: 175px;
overflow: hidden;
&:hover {
.img-brand-switch {
display: block;
}
}
ul {
width: 1158px;
}
li {
float: left;
margin: 0 8px 0 0;
width: 378px;
height: 175px;
line-height: 175px;
overflow: hidden;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.img-brand-switch {
display: none;
a {
position: absolute;
top: 50%;
margin: -20px 0 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 2;
background: #fff;
@include opacity(0.55);
&.prev {
left: 0;
}
&.next {
right: 0;
}
&:hover {
@include opacity(0.9);
}
}
}
}
.logo-brand {
ul {
width: 1158px;
}
li {
float: left;
margin: 8px 8px 0 0;
width: 185px;
height: 86px;
line-height: 86px;
font-size: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
}
.logo-brand-switch {
position: relative;
background: image-url('index/logo-brand-line.png') no-repeat center center;
line-height: normal;
.iconfont {
position: absolute;
left: 50%;
font-size: 32px;
&.prev {
top: 10px;
margin: 0 0 0 -48px;
}
&.next {
bottom: 12px;
margin: 0 0 0 20px;
}
}
}
.brand-more {
font-size: 16px;
&:hover {
text-decoration: underline;
}
}
}
.floor-header {
position: relative;
margin: 50px 0 30px;
.floor-title {
margin: 0 auto;
width: 298px;
height: 31px;
line-height: 31px;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.header-navs {
position: absolute;
padding: 10px 0;
top: 0;
right: 0;
font-size: 14px;
li {
float: left;
padding: 1px 10px;
border-left: 1px solid #ccc;
&:first-child {
border-left: none;
}
&:hover {
text-decoration: underline;
}
a {
color: #333;
}
}
}
}
@media screen and (min-width: 1150px) {
.floor-header {
margin: 80px 0 40px;
.header-navs {
li {
padding: 1px 15px;
}
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -9,6 +9,178 @@ class BoysController extends AbstractAction
public function indexAction()
{
$this->setTitle('男生首页');
$this->_view->display('index');
$data = array(
'boysHomePage' => true,
'boy' => array(
'bigSlide' => array(
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
)
),
'smallSlide' => array(
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/27/09/015b6a29ee526edeaacd13f4a7c81475f0.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
)
),
'newReport' => array(
'name' => '最新速报 NEW!',
'navs' => array(
array(
'id' => '',
'href' => '',
'name' => 'MORE'
)
),
'list' => array(
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/27/03/0140fd98fd1c15c206d198d458e1c8e96f.jpg?imageView/1/w/377/h/504'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/03/01b2bd814ed65013e06790a301a0eb6408.jpg?imageView/1/w/185/h/248'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/27/03/0140fd98fd1c15c206d198d458e1c8e96f.jpg?imageView/1/w/377/h/504'
)
)
),
'preferenceBrand' => array(
'name' => '优选品牌 BRAND',
'imgBrand' => array(
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/taobaocms/2015/11/30/01/01ebe6968476da9e79ddddfd28f60496c7.jpg'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/taobaocms/2015/11/30/01/01ebe6968476da9e79ddddfd28f60496c7.jpg'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/taobaocms/2015/11/30/01/01ebe6968476da9e79ddddfd28f60496c7.jpg'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/06/0124c4e16548b0d7aff4f0fa4ad7b13481.jpg?imageView/1/w/1150/h/450'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/06/0124c4e16548b0d7aff4f0fa4ad7b13481.jpg?imageView/1/w/1150/h/450'
),
array(
'href' => '',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/11/30/06/0124c4e16548b0d7aff4f0fa4ad7b13481.jpg?imageView/1/w/1150/h/450'
),
),
'logoBrand' => array(
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'switch' => true
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'href' => '',
'img' => 'http://img12.static.yhbimg.com/brandLogo/2015/03/18/16/020d4fec29ade8ccb6bc8e23b02c958a9d.jpg?imageView/2/w/185/h/86'
),
array(
'more' => true,
'href' => 'http://www.yohobuy.com'
),
)
)
)
);
$this->_view->display('index', $data);
}
}
\ No newline at end of file
... ...