100%高度 fullHeight
JSHOP 2013-12-27 14:52:00
评论:0 浏览:17724
方法描述

用在相对定位里面有绝对定位时,背景透明图层以父节点为基准将高度撑满。

应用场景

主要应用于不同尺寸图片需要遮罩的效果中,由于高度100%存在浏览器兼容,这个方法会自动获取传入的基准容器高度,并赋给遮罩层。

方法参数
名称 类型 描述
调用语句 <div class="j-module" module-function="fullHeight" module-param="{参数一:值,参数二:值,...>模板代码</div> 方法调用 支持传入参数
参数
基准节点 fullHeightNode string 需要参照高度的基准节点,如:{fullHeightNode:'li'}
遮罩节点 fullNode string 需要撑满高度的遮罩节点,如:{fullNode:'.jShade'}
可使用模块
精品周刊
更多效果等您发挥
精品周刊DEMO
遮罩层高度100%
周三 WEDNESDAY
第三步 出游散心 24小时限时折扣 特惠时间:本周三0点至24点
<div class="j-module" module-function="tabClass,fullHeight" module-param="{defaultClass:'jCurrent'}" >
<div class="jTitle">
<div class="jWeekName">
<span class="jCn">$!weekByChinese</span>
<span class="jEn"><em></em>$!weekByEnglish</span>
</div>
<div class="jTitleName">
<span class="jText1">$!headTitle</span>
<span class="jText2">$!headSubTitle1</span>
<span class="jText3">$!headSubTitle2</span>
<span class="jText4">$!headSubTitle3</span>
</div>
<div class="jPic"><img src="$!headImg" width="612" height="74" /></div>
</div>
<ul>
#set($widthList=[480,235,235,235,235,235,480,480,235,235])
#set($heightList=[350,170,170,350,170,170,350,170,170,170])
#set($goodList=[$!goods1,$!goods2,$!goods3,$!goods4,$!goods5,$!goods6,$!goods7,$!goods8,$!goods9,$!goods10])
#set($skuImgList=[$!skuImg1,$!skuImg2,$!skuImg3,$!skuImg4,$!skuImg5,$!skuImg6,$!skuImg7,$!skuImg8,$!skuImg9,$!skuImg10])
#foreach( $i in [0 .. 9])
#set($jtempNum=$i+1)
<li class="jPic$jtempNum">
<div class="jPicArea">
<div class="jPic">
<img width="$!widthList.get($i)" height="$!heightList.get($i)" src="$!skuImgList.get($i)" alt="$!goodList.get($i).wname">
</div>
<a class="jShade" href="$!jshopProduct.getBuyUrl($!goodList.get($i).goodsId)" target="_blank"></a>
<div class="jItem">
<div class="jDesc">
<a href="$!jshopProduct.getBuyUrl($!goodList.get($i).goodsId)" target="_blank">$!goodList.get($i).wname</a>
</div>
<div class="jGoodsInfo">
<div class="jPrice">
<div class="jSalePrice">
<span class="jText">原价:</span>
<span class="jRmb">&yen;</span>
$!jshopPrice.getSalePrice($!goodList.get($i).goodsId)
</div>
<div class="jdPrice">
<span class="jText">惊喜价:</span>
<span class="jRmb">&yen;</span>
$!jshopPrice.getJdPrice($!goodList.get($i).goodsId)
</div>
</div>
<div class="jBtnArea">
<a href="$!jshopCommon.addCart($!goodList.get($i).goodsId)" title="立即购买">立即购买</a>
</div>
</div>
</div>
</div>
</li>
#end
<li class="jTitleEnd">
<div class="jEndName">$!footTitle</div>
<div class="jEndPic"><img width="196" height="65" src="$!footImg"></div>
<div class="jEndDesc"><span>$!footDescription</span></div>
</li>
</ul>
</div>
.userjWeekly .mt{}
.userjWeekly .mc{background:#272727; padding:10px;}
.userjWeekly .mb{display:none;}
.userjWeekly .jTitle{height:74px; padding-bottom:10px; overflow:hidden; position:relative; zoom:1;}
.userjWeekly .jWeekName{float:left;}
.userjWeekly .jWeekName span{display:block; color:#fff;}
.userjWeekly .jWeekName .jCn{font-size:52px; line-height:1.1;}
.userjWeekly .jWeekName .jEn{font-size:14px; text-transform:uppercase;}
.userjWeekly .jWeekName .jEn em{display:inline-block; *display:inline; zoom:1; width:9px; height:9px; background:#48a1f3; margin-right:3px;}
.userjWeekly .jTitleName{float:left; padding-left:10px; margin-left:10px; border-left:solid 2px #48a1f3; position:relative; zoom:1;}
.userjWeekly .jTitleName span{display:block;}
.userjWeekly .jTitleName .jText1{font-size:30px; line-height:1.2; color:#48a1f3;}
.userjWeekly .jTitleName .jText2{font-size:16px; color:#48a1f3; position:absolute; left:75px; top:15px; white-space:nowrap;}
.userjWeekly .jTitleName .jText3{font-size:14px; padding:2px 30px 2px 2px; background:#48a1f3; color:#fff;}
.userjWeekly .jTitleName .jText4{font-size:14px; color:#fff;}
.userjWeekly .jTitle .jPic{position:absolute; right:0; top:0; width:612px; height:74px; background:#fff;}
.userjWeekly ul{overflow:hidden; position:relative; height:890px;}
.userjWeekly li{position:absolute; background:#fff;}
.userjWeekly .jPic2, .userjWeekly .jPic3, .userjWeekly .jPic5, .userjWeekly .jPic6, .userjWeekly .jPic9, .userjWeekly .jPic10{width:235px; height:170px;}
.userjWeekly .jPic1, .userjWeekly .jPic7{width:480px; height:350px;}
.userjWeekly .jPic4{width:235px; height:350px;}
.userjWeekly .jPic8{width:480px; height:170px;}
.userjWeekly .jPic2{left:490px;}
.userjWeekly .jPic3{left:735px;}
.userjWeekly .jPic4{top:360px;}
.userjWeekly .jPic5{left:245px; top:360px;}
.userjWeekly .jPic6{left:245px; top:540px;}
.userjWeekly .jPic7{left:490px; top:360px;}
.userjWeekly .jPic8{top:720px;}
.userjWeekly .jPic9{left:490px; top:720px;}
.userjWeekly .jPic10{left:735px; top:720px;}
.userjWeekly .jPicArea{position:relative;}
.userjWeekly .jShade{display:none; width:100%; height:100%; position:absolute; top:0; left:0; background:#48a1f3; opacity:0.9; filter:progid:DXImageTransform.Microsoft.alpha(opacity=90);}
.userjWeekly .jItem{display:none; position:absolute; width:130px; height:100px; left:50%; top:50%; margin:-50px 0 0 -65px; overflow:hidden;}
.userjWeekly .jCurrent .jShade{display:block;}
.userjWeekly .jCurrent .jItem{display:block;}
.userjWeekly .jGoodsInfo{}
.userjWeekly .jDesc{margin-top:3px; height:18px; margin-bottom:3px; overflow:hidden;}
.userjWeekly .jDesc a{color:#fff;}
.userjWeekly .jDesc a:hover{text-decoration:underline;}
.userjWeekly .jSalePrice{color:#ffffff; margin-bottom:3px; text-decoration:line-through;display:none;}
.userjWeekly .jdPrice{color:#f6ff00; font-weight:bold; margin-bottom:3px;}
.userjWeekly .jBtnArea{}
.userjWeekly .jBtnArea a{display:block; width:118px; text-align:center; padding:5px 0; background:#f6ff00; font-size:14px; color:#cd5cd2; border-radius:5px;}
.userjWeekly .jTitleEnd{width:480px; height:170px;}
.userjWeekly .jTitleEnd{left:490px; top:180px; background:#48a1f3; color:#fff;}
.userjWeekly .jEndName{height:28px; padding-left:5px; border-left:solid 4px #272727; font-size:30px; line-height:1; float:left; margin:20px 15px 0 20px;}
.userjWeekly .jEndPic{width:196px; height:65px; float:left; margin-top:10px; background:#fff;}
.userjWeekly .jEndDesc{text-indent:20px; margin:0 20px; padding-top:10px; line-height:2; color:#ffffff; clear:both;}
.userjWeekly .jEndDesc span{border-bottom:dashed 1px #9b1aa0;}
名称 类型 描述