Product.ProductView产品展示功能示范脚本

admin

示例说明1：图片自适应垂直水平居中，不强制高宽比，带边框和阴影。
#ProductView li{ float:left; width:192px; height:222px; text-align:center; margin:10px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:192px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:192px; max-height:168px;}
#ProductView .atext{ display:block;}

示例说明2：图片自适应垂直水平居中，不强制高宽比。
#ProductView li{ float:left; width:198px; height:198px; text-align:center; margin:10px;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:198px; height:168px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:198px; max-height:168px;}
#ProductView .atext{ display:block;}

示例说明3：固定长宽，适合三列排版，鼠标HOVER由灰变蓝色，图片强制高宽比。
#ProductView ul li{ float:left; display:block; width:218px; height:220px; text-align:center; margin:14px; background:#efefef;}
#ProductView ul li:hover{ background:#00369B;}
#ProductView ul li img{ width:210px; height:180px; margin:4px;}
#ProductView ul li .atext{ line-height:30px; height:30px;}
#ProductView ul li:hover .atext{ color:#fff;}

admin

示例说明1升级示例：（HL）

点击箭头左或右滚动
DIV：
<div class="product">$func_product(navi=Nav2,css=Case,para=Product,len=12,rows=10,more=more)$</div>

JS：
if(jQuery("#Case #ProductView").length>0){ scrolling();}
function scrolling(){
var m=new Marquee(["Case","ProductView"]);
m.Direction=2;m.Step=2;m.Width=855;m.Height=185;m.Timer=20;m.DelayTime=0;m.WaitTime=0;m.ScrollStep=230;m.Start();
jQuery(".case #NavRight").click(function(){m.Direction=3;});
jQuery(".case #NavLeft").click(function(){        m.Direction=2;});
}

CSS:
#ProductView li{ float:left; width:260px; height:190px; text-align:center; margin:10px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee; position:relative;}
#ProductView .thumbs{ display:block;}
#ProductView .thumbs a{ display:table-cell; width:260px; height:160px; font-size:0; vertical-align:middle;}
#ProductView img{ max-width:260px; max-height:160px;}
#ProductView .atext{ display:block; line-height:30px;}
.product #ProductView li, .product #ProductView .thumbs a{ width:200px; height:160px;}
.product #ProductView img{ max-width:200px; max-height:160px;}
.product #ProductView .atext{ display:none;}
.product #ProductView li:hover a{ display:table-cell; width:200px; height:160px; line-height:160px; background:#000; opacity:.8; color:#fff; z-index:10; position:absolute;}

admin

示例说明1：图片自适应垂直水平居中，不强制高宽比，带边框和阴影。
LIST：1200像素 5列
#ProductView li,#ArticleView li{ float:left; width:200px; height:222px; text-align:center; margin:10px; margin-bottom:30px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView .thumbs,#ArticleView .thumbs{ display:block;}
#ProductView .thumbs a,#ArticleView .thumbs a{ display:table-cell; width:200px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img,#ArticleView img{ max-width:200px; max-height:168px;}
#ProductView .atext,#ArticleView .atext{ display:block;}

LIST：1200像素 4列
#ProductView li,#ArticleView li{ float:left; width:268px; height:232px; text-align:center; margin:10px; margin-bottom:30px; padding:4px; border:1px solid #eee; box-shadow:5px 5px 5px #eee;}
#ProductView li:hover,#ArticleView li:hover{ border:1px solid #D70C19;}
#ProductView .thumbs,#ArticleView .thumbs{ display:block;}
#ProductView .thumbs a,#ArticleView .thumbs a{ display:table-cell; width:268px; height:192px; font-size:0; vertical-align:middle;}
#ProductView img,#ArticleView img{ max-width:268px; max-height:192px;}
#ProductView .atext,#ArticleView .atext{ display:block; line-height:30px;}