方法描述
事件触发小图查看大图。
应用场景
主要应用于商品推荐、主从商品等模块,能取到同一张不同尺寸大小的图片,这样就可以实现事件触发小图查看大图的效果。
方法参数
名称 值 类型 描述
调用语句 <div class="j-module" module-function="changePhoto" module-param="{参数一:值,参数二:值,...>模板代码</div>
方法调用 支持传入参数
功能参数
切换事件 eventType string 小图的改变事件,可选click、mouseenter等。如{eventType:’click’}
当前样式 defaultClass string 给当前显示的图片增加一个样式。如{defaultClass:’jCurrent’}
节点参数
小图父级节点 changePhotoNodeParent string 需要触发事件的小图的父级节点,如:{changePhotoNodeParent:’.jSubObject’}
小图节点 changePhotoNode string 需要触发事件的小图节点,如:{changePhotoNode:’.jPic img’}
小图外层节点 smallPhoto string 小图外层布局节点,用于控制小图展示,存储大图地址及链接地址。如:{smallPhoto:’.jScrollWrap li’}
标题节点 title string 小图父级节点。如:{title:’.jDesc a’}
<div class="j-module" module-function="changePhoto,movePhoto,tabClass" module-param="{node:'.jSubObject', subObj:'.jSubObject', changePhotoNode:'.jPic img' , smallPhoto:'.jScrollWrap li', title:'.jDesc a', eventType:'mouseenter', movePhotoNode:'.jScrollWrap li' , arrowPrev:'.jScrollPrev', arrowNext:'.jScrollNext', defaultClass:'jCurrent'}">
#set($intNum = 0)
<div class="jTitle">
#set($intNum = 0)
<div class="jTab">
$!popProduct.getShopSearchATag($!appId,$!venderId,$!shopId,$!categoryId,$!orderBy, $!minPrice , $!maxPrice ,$!direction, $!pageNo , $!pageSize ,$!domainKey , $!keyword, $!isGlobalSearch)
</div>
#if($!keyword!="")
<div class="jModulesTitle"><em>$!keyword</em>找到 <b>$!totalCount</b> 件相关商品</div>
#end
</div>
<ul>
#foreach($!item in $!productResult.list)
#set($m = $intNum.parseInt($item.wareid))
<li class="jSubObject">
<a class="jBtnAttention" href="#">+ 加关注</a>$jshopCommon.addFavorites($m)
<div class="jItem">
<div class="jPic">
<a href="$!jshopProduct.getBuyUrl($!item.wareid)" target="_blank"><img width="220" height="220" src="$!jshopCommon.getImage($!item.imageurl,7)" class="err-product"></a>
</div>
<div class="jScroll">
<a class="jScrollBtn jScrollPrev" href="javascript:;"></a>
<div class="jScrollWrap">
<ul>
<li data-href="$!jshopProduct.getBuyUrl($!item.wareid)"
data-src="$!jshopCommon.getImage($!item.imageurl,7)" sid="$!item.wareid">
<a title="$!item.color" class="" href="javascript:;">
<img width="25" height="25" alt="" src="$!jshopCommon.getImage($!item.imageurl,5)" class="err-product">
</a>
</li>
#foreach($!subProduct in $!item.subProductList)
<li data-href="$!jshopProduct.getBuyUrl($!subProduct.wareid)"
data-src="$!jshopCommon.getImage($!subProduct.imageurl,7)"
sid="$!subProduct.wareid">
<a title="$!subProduct.color" class="" href="javascript:;">
<img width="25" height="25" alt="" src="$!jshopCommon.getImage($!subProduct.imageurl,5)" class="err-product">
</a>
</li>
#end
</ul>
</div>
<a class="jScrollBtn jScrollNext" href="javascript:;">></a>
</div>
<div class="jGoodsInfo">
<div class="jDesc">
<a href="$!jshopProduct.getBuyUrl($!item.wareid)" target="_blank">$!item.warename</a>
</div>
<div class="jPrice">
<div class="jdPrice">
<span class="jRmb">¥</span>
$!jshopPrice.getJdPrice($m)
</div>
</div>
<div class="jExtra">
<span class="star"><span class="star-white"><span class="star-yellow h$item.averagescore"> </span></span></span>
<a href="$!jshopProduct.getCommentUrl($!item.wareid)" target="_blank">已有<em>$!item.commentcount</em>人评价</a>
</div>
</div>
</div>
</li>
#end
</ul>
<div class="jPage">
$!popProduct.getShopSearchPage( $!appId, $!venderId ,$!shopId , $!categoryId , $!orderBy , $!minPrice , $!maxPrice ,$direction , $!pageNo , $pageSize , $!domainKey , $!totalCount , $!pageCount , $!keyword ,$!isGlobalSearch)
##$!popProduct.getPageBar($appId, $categoryId, $orderBy, $direction, $pageSize, $pageNo, $totalCount, $pageCount)
</div>
#if ( $!totalCount <= 0 && $!envMode !="edit" )
<div class="jMessageError">抱歉,没有找到与"<em>$!keyword</em>"相关的商品</div>
#end
</div>
.userjSearchList{font-family:Verdana, Geneva, sans-serif; background:#fff;}
.userjSearchList .jModulesTitle{height:32px; line-height:32px; padding:0 10px; background:#f3f3f3; background:-moz-linear-gradient(top, #ffffff, #f3f3f3); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f3f3f3)); background:-o-linear-gradient(top, #ffffff, #f3f3f3); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3'); font-size:12px; font-weight:bold;}
.userjSearchList .jModulesTitle em{font-size:14px; font-weight:bold; color:#CC3300; margin-right:5px;}
.userjSearchList ul{width:100%; overflow:hidden;}
.userjSearchList li{float:left; /* width:224px;*/ width:240px; padding:0 10px; margin:10px 0; border:dotted 1px #fff; border-top:dotted 1px #ddd; overflow:hidden; position:relative; _zoom:1;}
.userjSearchList li.jCurrent{border:solid 1px #ddd; padding:0 10px; box-shadow:0 0 8px #ddd;}
.userjSearchList .jItem{height:auto;}
.userjSearchList .jPic{text-align:center; background:#fff; _height:100%;}
.userjSearchList .jPic a{display:block; height:220px; padding:10px 0 5px;}
.userjSearchList .jPic img{vertical-align:top;}
.userjSearchList .jPic img.err-product{background: url("//misc.360buyimg.com/lib/skin/e/i/error-jd.gif") no-repeat scroll 50% 50% transparent;}
.userjSearchList .jBtnAttention{display:none; cursor:pointer;}
.userjSearchList li.jCurrent .jBtnAttention{padding:5px; font-size:12px; color:#fff; position:absolute; top:0; right:0; background:#000; opacity:0.5; filter:progid:DXImageTransform.Microsoft.alpha(opacity=50); display:none;}
.userjSearchList li.jCurrent .jBtnAttention:hover{opacity:1; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);}
.userjSearchList .btn-coll{display:none; height:auto; line-height:normal; cursor:pointer;}
.userjSearchList li.jCurrent .btn-coll{padding:5px; font-size:12px; color:#fff; position:absolute; top:0; right:0; background:#000; opacity:0.5; filter:progid:DXImageTransform.Microsoft.alpha(opacity=50); display:block;}
.userjSearchList li.jCurrent .btn-coll:hover{opacity:1; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);}
.userjSearchList .jScroll{height:29px; margin-bottom:10px; overflow:hidden;}
.userjSearchList .jScrollPrev.jCurrent{background-position:-34px -126px; cursor:not-allowed;}
.userjSearchList .jScrollPrev{background-position:0 -126px; margin-right:2px;}
.userjSearchList .jScrollNext{background-position: -17px -126px;}
.userjSearchList .jScrollNext.jCurrent{background-position:-51px -126px; cursor:not-allowed;}
.userjSearchList .jScrollBtn{display:none; float:left; height:29px; text-indent:-9999px; width:16px;}
.userjSearchList .jScrollBtn{background-image:url("//misc.360buyimg.com/201007/skin/df/i/20130606B.png"); background-repeat:no-repeat;}
.userjSearchList .jScrollWrap{float:left; height:29px; overflow:hidden; position:relative; width:186px;}
.userjSearchList .jScrollWrap ul{position:absolute; top:0;}
.userjSearchList .jScrollWrap li{width:31px; height:31px; float:left; margin:0; padding:0; border:0;}
.userjSearchList .jScrollWrap li a{float:left; border:solid 1px #ddd; padding:1px;}
.userjSearchList .jScrollWrap li a img{height:25px; height:25px;}
.userjSearchList .jScrollWrap li.jCurrent a{border:1px solid #E4393C;}
.userjSearchList .jExtra{height:16px; line-height:16px; overflow:hidden; padding:2px 0;}
.userjSearchList .jExtra a{color:#005AA0; float:left; margin-top:1px;}
.userjSearchList .jExtra span{float:left; height:15px; overflow:hidden;}
.userjSearchList .star{margin-right:5px;}
.userjSearchList .star .star-white{background:url("//misc.360buyimg.com/201007/skin/df/i/20130606B.png") no-repeat scroll 0 -70px transparent; width:76px;}
.userjSearchList .star .star-yellow{background:url("//misc.360buyimg.com/201007/skin/df/i/20130606B.png") no-repeat scroll 0 -86px #FFFFFF; position:relative; z-index:1;}
.userjSearchList .star .h1{width:15px;}
.userjSearchList .star .h2{width:30px;}
.userjSearchList .star .h3{width:45px;}
.userjSearchList .star .h4{width:60px;}
.userjSearchList .star .h5{width:76px;}
.userjSearchList .jPage{padding:5px 10px; background:#fff; text-align:right; overflow:hidden; clear:both; font-size:14px;}
.userjSearchList .jPage em{font-style:normal; font-weight:bold; margin-right:10px;}
.userjSearchList .jPage a{margin:0 3px; color:#005aa0; border:solid 1px #ccc; padding:3px 8px; display:inline-block; *display:inline; zoom:1;}
.userjSearchList .jPage .current{font-weight:bold; color:#FF6600; border:solid 1px #fff;}
.userjSearchList .jPage a:hover{text-decoration:underline;}
.userjSearchList .jTab{overflow:hidden; padding:10px 10px 0 10px; border-bottom:solid 1px #cecece; _height:100%;}
.userjSearchList .jTab a, .userjSearchList .jTab .current{padding:4px 15px; text-align:center; display:block; border:solid 1px #cecece; border-bottom:0; color:#333; float:left; margin-right:8px; font-size:14px; font-weight:bold; background:#f6f6f6; background:-moz-linear-gradient(top, #ffffff, #f6f6f6); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f6f6f6)); background:-o-linear-gradient(top, #ffffff, #f6f6f6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.userjSearchList .jTab a:hover, .userjSearchList .jTab .current{color:#fff; border:solid 1px #c60001; border-bottom:0; background:#be0000; background:-moz-linear-gradient(top, #e00000, #be0000); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#e00000), to(#be0000)); background:-o-linear-gradient(top, #e00000, #be0000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e00000', endColorstr='#be0000');}
.userjSearchList .jMessageError{background:#fffdee; font-size:14px; font-weight:bold; padding:15px 10px;}
.userjSearchList .jMessageError em{color:#dc0000; font-weight:bold;}
.userjSearchList .jTab .up em{background:url(//misc.360buyimg.com/pop-shop/201007/misc/skin/i/icon.gif) repeat scroll 0 -10px transparent; display:inline-block; *display:inline; zoom:1; height:10px; margin-right:5px; width:10px; overflow:hidden; vertical-align:middle;}
.userjSearchList .jTab .down em{background:url(//misc.360buyimg.com/pop-shop/201007/misc/skin/i/icon.gif) repeat scroll -10px -10px transparent; display:inline-block; *display:inline; zoom:1; height:10px; margin-right:5px; width:10px; overflow:hidden; vertical-align:middle;}