fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 78f30eb8eaa4a48bdbc1f766737f36aec8455dff 1 parent df909f82

guang index

Inline Side-by-side
Showing 12 changed files with 178 additions and 36 deletions
@@ -3,14 +3,18 @@ @@ -3,14 +3,18 @@
3 {{# guang}} 3 {{# guang}}
4 <div class="left-side"> 4 <div class="left-side">
5 <div id="slider" class="slider"> 5 <div id="slider" class="slider">
6 - <ul>  
7 - {{# slider}} 6 + <ul class="slide-wrapper">
  7 + {{#each slider}}
8 <li> 8 <li>
9 <a href="{{href}}"> 9 <a href="{{href}}">
10 - <img class="lazy" data-original="{{img}}"> 10 + {{#if @first}}
  11 + <img src="{{img}}">
  12 + {{^}}
  13 + <img class="lazy" data-original="{{img}}">
  14 + {{/if}}
11 </a> 15 </a>
12 </li> 16 </li>
13 - {{/ slider}} 17 + {{/each}}
14 </ul> 18 </ul>
15 </div> 19 </div>
16 <div id="pjax-container" class="msg"> 20 <div id="pjax-container" class="msg">
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 <div class="like-comment"> 35 <div class="like-comment">
36 <span class="like"> 36 <span class="like">
37 <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i> 37 <i class="iconfont like-icon{{#if liked}} liked{{/if}}">&#xe626;</i>
38 - <b class="like-num num-{{like}}">(<em class="num">{{like}}</em>)</b> 38 + {{#if like}}<b class="like-num">(<em class="num">{{like}}</em>)</b>{{/if}}
39 </span> 39 </span>
40 <span class="comment"> 40 <span class="comment">
41 <i class="iconfont">&#xe623;</i> 41 <i class="iconfont">&#xe623;</i>
@@ -26,10 +26,27 @@ var $ = require('yoho.jquery'), @@ -26,10 +26,27 @@ var $ = require('yoho.jquery'),
26 } else { 26 } else {
27 this._createPage(); 27 this._createPage();
28 } 28 }
  29 +
  30 + if (this.options.orient) {
  31 + this._createOrient();
  32 + }
29 this._slideShow(); 33 this._slideShow();
30 this._bindEvent(); 34 this._bindEvent();
31 this._autoplay(); 35 this._autoplay();
32 }, 36 },
  37 + _createOrient: function() {
  38 +
  39 + var orientHtml = '<div class="slide-switch">' +
  40 + '<a class="prev" href="javascript:;"><span class="iconfont">&#xe60c;</span></a>' +
  41 + '<a class="next" href="javascript:;"><span class="iconfont">&#xe60b;</span></a>' +
  42 + '</div>';
  43 +
  44 + if (this.$element.find('.slide-switch').length > 0) {
  45 + return;
  46 + }
  47 +
  48 + this.$element.append(orientHtml);
  49 + },
33 _createPage: function() { 50 _createPage: function() {
34 var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' + 51 var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
35 '<div class="slide-shade"></div><div class="slide-pagination-last">', 52 '<div class="slide-shade"></div><div class="slide-pagination-last">',
@@ -69,6 +86,12 @@ var $ = require('yoho.jquery'), @@ -69,6 +86,12 @@ var $ = require('yoho.jquery'),
69 }).on('mouseleave', function() { 86 }).on('mouseleave', function() {
70 that._autoplay(); 87 that._autoplay();
71 }); 88 });
  89 +
  90 + this.$element.on('mouseenter', function() {
  91 + $(this).find('.slide-switch').addClass('show');
  92 + }).on('mouseleave', function() {
  93 + $(this).find('.slide-switch').removeClass('show');
  94 + });
72 }, 95 },
73 _nextSlide: function() { 96 _nextSlide: function() {
74 if (this.index === this.len - 1) { 97 if (this.index === this.len - 1) {
@@ -89,12 +112,14 @@ var $ = require('yoho.jquery'), @@ -89,12 +112,14 @@ var $ = require('yoho.jquery'),
89 _slideShow: function() { 112 _slideShow: function() {
90 var $img = this.bigItem.eq(this.index).find('img.lazy'); 113 var $img = this.bigItem.eq(this.index).find('img.lazy');
91 114
  115 + //未加载图片的及时显示
92 if ($img.attr('src') !== $img.data('original')) { 116 if ($img.attr('src') !== $img.data('original')) {
93 - lazyLoad($img.trigger('appear'));  
94 - }  
95 - if (this.len > 1) {  
96 - this.$element.find('.slide-switch').addClass('show'); 117 + lazyLoad($img, {
  118 + event: 'sporty'
  119 + });
  120 + $img.trigger('sporty');
97 } 121 }
  122 +
98 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus'); 123 this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
99 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut(); 124 this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
100 }, 125 },
@@ -124,6 +149,7 @@ var $ = require('yoho.jquery'), @@ -124,6 +149,7 @@ var $ = require('yoho.jquery'),
124 $.fn.slider.Constructor = Slider; 149 $.fn.slider.Constructor = Slider;
125 $.fn.slider.defaults = { 150 $.fn.slider.defaults = {
126 time: 5000, 151 time: 5000,
  152 + orient: true, //左右切换箭头的显示
127 pagination: null 153 pagination: null
128 }; 154 };
129 })($); 155 })($);
1 /** 1 /**
2 * 图片移入闪动效果JS 2 * 图片移入闪动效果JS
3 - * @auhor: xuqi(qi.xu@yoho.cn) 3 + * @auhor: xuqi<qi.xu@yoho.cn>
4 * @date: 2015/7/29 4 * @date: 2015/7/29
5 */ 5 */
  6 +
6 var $ = require('yoho.jquery'); 7 var $ = require('yoho.jquery');
7 8
8 -$('.page').on('mouseover', 'a img, a .bg-img', function(e) { 9 +$('.guang-page').on('mouseover', 'a img, a .bg-img', function(e) {
9 var $el = $(e.target); 10 var $el = $(e.target);
10 11
11 //slider中的图片不做此效果 12 //slider中的图片不做此效果
@@ -4,22 +4,18 @@ @@ -4,22 +4,18 @@
4 * @date: 2015/12/15 4 * @date: 2015/12/15
5 */ 5 */
6 6
7 -var $ = require('yoho.jquery'),  
8 - lazyLoad = require('yoho.lazyload'); 7 +var $ = require('yoho.jquery');
9 8
10 var msg = require('./msg'); 9 var msg = require('./msg');
11 10
12 require('yoho.pjax'); 11 require('yoho.pjax');
  12 +require('../common/slider');
13 13
14 require('./img-blink'); 14 require('./img-blink');
15 15
16 require('./right-side'); 16 require('./right-side');
17 17
18 -lazyLoad({  
19 - failure_limit: 50  
20 -});  
21 -  
22 -msg.dotLazy(); 18 +$('#slider').slider(); //初始化slider
23 19
24 $(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', { 20 $(document).pjax('.pjax-link, .msg-pager a', '#pjax-container', {
25 timeout: 2000 21 timeout: 2000
@@ -59,4 +59,6 @@ $('.guang-page').on('click', '.like-icon', function() { @@ -59,4 +59,6 @@ $('.guang-page').on('click', '.like-icon', function() {
59 $(this).closest('.like').toggleClass('hover'); 59 $(this).closest('.like').toggleClass('hover');
60 }); 60 });
61 61
  62 +dotLazy();
  63 +
62 exports.dotLazy = dotLazy; 64 exports.dotLazy = dotLazy;
1 /** 1 /**
2 * 右侧栏文字截取js 2 * 右侧栏文字截取js
3 */ 3 */
4 -var $ = require('yoho.jquery'); 4 +var $ = require('yoho.jquery'),
  5 + lazyLoad = require('yoho.lazyload');
5 6
6 require('yoho.dotdotdot'); 7 require('yoho.dotdotdot');
7 8
8 $('.ex-reco-context').dotdotdot({ 9 $('.ex-reco-context').dotdotdot({
9 wrap: 'letter' 10 wrap: 'letter'
10 -});  
  11 +});
  12 +
  13 +lazyLoad($('.ads img.lazy'));
1 .guang-index-page { 1 .guang-index-page {
2 - .slider {  
3 - height: 327px;  
4 - width: 100%;  
5 - overflow: hidden;  
6 - }  
7 -  
8 .msg-nav { 2 .msg-nav {
9 border-bottom: 1px solid #000; 3 border-bottom: 1px solid #000;
10 margin-top: 24px; 4 margin-top: 24px;
@@ -33,6 +27,7 @@ @@ -33,6 +27,7 @@
33 } 27 }
34 } 28 }
35 } 29 }
  30 +
36 .msg-pager { 31 .msg-pager {
37 float: right; 32 float: right;
38 margin: 20px 0; 33 margin: 20px 0;
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 font-size: 20px; 28 font-size: 20px;
29 font-weight: bold; 29 font-weight: bold;
30 } 30 }
31 - .ex-recos-list { 31 + .ex-reco-list {
32 margin-top: 14px; 32 margin-top: 14px;
33 } 33 }
34 .ex-reco-item { 34 .ex-reco-item {
@@ -137,6 +137,11 @@ @@ -137,6 +137,11 @@
137 height: 80px; 137 height: 80px;
138 line-height: 24px; 138 line-height: 24px;
139 } 139 }
  140 +
  141 + .iconfont {
  142 + color: #ccc;
  143 + }
  144 +
140 .msg-img { 145 .msg-img {
141 position: relative; 146 position: relative;
142 float: left; 147 float: left;
@@ -240,11 +245,7 @@ @@ -240,11 +245,7 @@
240 } 245 }
241 .like { 246 .like {
242 margin-right: 10px; 247 margin-right: 10px;
243 - .num-0 {  
244 - display: none;  
245 - }  
246 -  
247 - &.hover .num { 248 + &:hover * {
248 color: #000; 249 color: #000;
249 } 250 }
250 } 251 }
@@ -271,6 +272,24 @@ @@ -271,6 +272,24 @@
271 } 272 }
272 } 273 }
273 274
  275 + .pager {
  276 + font-size: 12px;
  277 +
  278 + a {
  279 + height: 24px;
  280 + padding: 0 9px;
  281 + line-height: 24px;
  282 + display: inline-block;
  283 + text-align: center;
  284 + margin-right: 8px;
  285 + color: #222;
  286 +
  287 + &.cur {
  288 + background-color: #222;
  289 + color: #fff;
  290 + }
  291 + }
  292 + }
274 } 293 }
275 294
276 @import "home"; 295 @import "home";
@@ -4,7 +4,8 @@ @@ -4,7 +4,8 @@
4 "compass/reset", 4 "compass/reset",
5 "header", 5 "header",
6 "footer", 6 "footer",
7 - "path-nav"; 7 + "path-nav",
  8 + "plugin/slider";
8 9
9 body { 10 body {
10 font-family: arial,"Microsoft YaHei"; 11 font-family: arial,"Microsoft YaHei";
  1 +.slider {
  2 + position: relative;
  3 + height: 327px;
  4 + width: 100%;
  5 + overflow: hidden;
  6 +
  7 + img {
  8 + max-width: 100%;
  9 + max-height: 100%;
  10 + }
  11 +}
  12 +
  13 +.slide-pagination {
  14 + position: absolute;
  15 + left: 0;
  16 + right: 0;
  17 + bottom: 12px;
  18 + text-align: center;
  19 +}
  20 +
  21 +.slide-pagination-inner {
  22 + display: inline-block;
  23 + position: relative;
  24 + padding: 7px;
  25 + vertical-align: middle;
  26 +}
  27 +
  28 +.slide-shade {
  29 + position: absolute;
  30 + left: 0;
  31 + right: 0;
  32 + top: 0;
  33 + bottom: 0;
  34 + background: #000;
  35 + opacity: 0.3;
  36 + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  37 + @include border-radius(13px);
  38 +}
  39 +
  40 +.slide-pagination-last span {
  41 + display: block;
  42 + float: left;
  43 + position: relative;
  44 + margin: 0 7px;
  45 + width: 12px;
  46 + height: 12px;
  47 + background: #fff;
  48 + cursor: pointer;
  49 + @include opacity(0.6);
  50 + @include border-radius(6px);
  51 + z-index: 2;
  52 +
  53 + &.focus {
  54 + @include opacity(1);
  55 + }
  56 +}
  57 +
  58 +.slide-switch {
  59 + display: none;
  60 +
  61 + &.show {
  62 + display: block;
  63 + }
  64 +
  65 + a {
  66 + display: block;
  67 + position: absolute;
  68 + top: 50%;
  69 + margin: -30px 0 0;
  70 + width: 60px;
  71 + height: 60px;
  72 + line-height: 56px;
  73 + text-align: center;
  74 + z-index: 2;
  75 + background: #fff;
  76 + @include opacity(0.55);
  77 +
  78 + &:hover{
  79 + @include opacity(0.9);
  80 + }
  81 +
  82 + .iconfont {
  83 + font-size: 32px;
  84 + color: #59585a;
  85 + }
  86 + }
  87 +
  88 + .prev {
  89 + left: 0;
  90 + }
  91 +
  92 + .next {
  93 + right: 0;
  94 + }
  95 +}
@@ -77,9 +77,9 @@ class GuangController extends AbstractAction @@ -77,9 +77,9 @@ class GuangController extends AbstractAction
77 'tag' => 'adidas OriginalsQ' 77 'tag' => 'adidas OriginalsQ'
78 ) 78 )
79 ), 79 ),
80 - 'like' => 0,  
81 - 'liked' => false,  
82 - 'comment' => false 80 + 'like' => 0, //如果为0，不传
  81 + // 'liked' => false,
  82 + 'comment' => 20
83 ) 83 )
84 ), 84 ),
85 'exRecos' => array( 85 'exRecos' => array(