ProductView/ArticleView.FLEX.CSS示范脚本

admin

高宽比：220/340，图片居中，列白边框，文本自动省略号
适合1200以上像素，分5列通用
CSS：
#ProductView ul,#ArticleView ul{ display: flex; justify-content:space-between; flex-wrap: wrap;}
#ProductView ul li,#ArticleView ul li{ float:flex; width:220px; height: 340px; border: 1px solid #fff; margin-bottom: 40px;}
#ProductView ul li .thumbs,#ArticleView ul li .thumbs{ display: flex; width: 100%; height:calc(100% - 40px); align-items: center;}
#ProductView ul li .thumbs img,#ArticleView ul li .thumbs img{ max-width:calc(100% - 20px); max-height:calc(100% - 20px); margin:10px;}
#ProductView ul li .atext,#ArticleView ul li .atext{ display:flex; justify-content:center; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
适合1200以上像素，分4列通用，只需修改红字部分为240-290即可

DIV：<div class="works">$func_product(navi=Navigator,title=10,para=Works,len=8,rows=15,more=view more)$</div>

配合JS向上滚动特效：

1. if($(".works #ProductView").length>0){
   
2.                 new Marquee(
   
3.                 {
   
4.                                 MSClass : ["ProductView","Slider"],
   
5.                                 Direction : 0,
   
6.                                 Step :2,
   
7.                                 Width : 1200,
   
8.                                 Height : 380,
   
9.                                 Timer : 1,
   
10.                                 DelayTime : 1000,
    
11.                                 WaitTime : 1000,
    
12.                                 ScrollStep: 382,
    
13.                                 AutoStart : 1
    
14.                 });
    
15.         }

复制代码